이제 H-1과 3 세의 텍스트 색상을 변경해 보겠습니다. 어두운 기본 부트 스트랩 색상이 여기에 들어가서 H-1 색상 흰색과 H-3 색상 흰색을 수행하고 새로 고칠 수 있습니다.
그리고 우리는 흰색 텍스트를 얻습니다.
하지만 우리는 H-1 쉼표 H-3을 사용하고 있기 때문에이 둘이 결합되어 있기 때문에 할 수 있습니다. 그러면 둘 다 흰색이됩니다.
쉼표가있을 때마다 다른 그룹을 선택합니다.
그래서 모든 쌍둥이는 모두 나이가 3이고 똑같은 것처럼 보입니다.
그러나 우리는 이것을 더욱 단순화 할 수 있으며, 몸에있는 모든 것을 색상 흰색으로 지정할 수 있습니다.
그리고 문제가 바뀌거나 단추가 바뀌거나 탐색 막대가 변경 될 수 있다고 생각할 수도 있지만 더 구체적이라는 것을 기억하십시오.
우리는 부트 스트랩의 클래스를 가지고 있습니다. 대 H-1과 H-3입니다. 클래스 나 ID가 없으며 H1의 바디 컬러를 설정하여 스타일을 재정의하는 것이 더 쉽습니다. 세 살 때 그 색채를 물려 받았고 다른 모든 것들도 물려 받았습니다.
그것은 단지 무시되었다.
그래서 우리가 검사하면이 버튼을 말하면 우리가 살펴 봅시다.
우리가 그것을 선택하면이 색상으로 설정된 색상이 Button 기본 클래스에 의해 3 3 3이라는 것을 알 수 있습니다.
그러나 우리가 아래로 계속 스크롤하면 몸이 바로 흰색으로 설정되고 바로 넘어지는 것을 보게 될 것입니다.
괜찮아.
그래서 다시 두 사람이 모두 백인이라고 말했습니다.
이제 글꼴 크기를 알아 보겠습니다.
H-1도 그렇습니다.
우리는 현재 접히지 않은 접혀 있어야합니다.
그래서 그것은 대담 할 필요가 있습니다. 그리고 부모 요소보다 5 배 더 큰 5cms가되기를 바랍니다. 그래서 우리는 각각을 선택하고 글꼴 체중을 700으로 줄 것입니다. 이것은 우리가 대담한 새로 고침을 사용하는 방법입니다 .
대담하게 볼 수 있습니다.
이제 글꼴 크기를 5M-M으로 크게 확대합시다.
이제 돌아가서 우리가 간다.
그렇게 가까이에서보고 있습니다.
이제 H1과 H3 사이의 비율은 똑같아 보입니다.
우리는 H-3에 아무 것도 할 필요가 없습니다. 이제 이미지가 우리가 원하는 방식으로 작동해야합니다.
그렇게하기 위해 전에는 보지 못했던 것을 보여 드릴 것입니다.
어둠을 오른쪽으로 옮기려고합니다. 노인을 육안으로 검사하거나 육체를 살펴 본다면 두 사람 모두 페이지 끝 부분에서 멈추는 것을 보게 될 것입니다.
그래서 여기에 관해서.
그것이 내 문서의 시대의 끝입니다.
그래서 몸을 커버하기 위해 이미지를 말하면 커버 할 배경 크기와 중심이되는 배경 위치를 말하면 바디의 크기가 고려되며 몸이 바로 끝나면 다르게 동작합니다.
이를 해결하기 위해 HTL 요소의 높이를 100 %로 지정하면 컨테이너의 전체 문서 창을 100 % 차지하게됩니다.
남자 신장은 100 퍼센트로 되돌아갑니다.
지금 전체 화면으로 만들고 새로 고침 해 봅시다.
그리고 우리의 이미지는 우리가 기대하는 방식대로 작동하고 축소됩니다.
그리고 그것은 나에게도 좋아 보인다.
이제 우리는 두 가지 주요 사항을 집중했습니다.
첫 번째는 H.R ..
우리가 훨씬 더 작아 져야하는 것은 너무 넓습니다.
그리고 나는 또한 글꼴에 초점을 맞추기를 원합니다.
미술 작품을 고르기 시작하면 400 픽셀을주는 것입니다.
그래서 C S에서 우리는 h를 400 픽셀로 선택합니다.
우리는 거기에 갈.
제가 할 수있는 또 하나의 일은 당신이 여기에 가서 포더를 맨 위에 놓을 때 알아 차리지 못할 수도있는 조금 비열한 것입니다.
하나의 픽셀 솔리드.
그러면 여기에 8 8 8 8의 색깔이 있습니다.
그리고 나서 하나의 픽셀 솔리드이고 이것은 투명한 색이 될 것입니다.
영점 0 영점 2.
그래서 이것은 그림자의 효과를주지 않을 것입니다.
그러니주의하십시오.
정말보기가 어렵습니다.
나는 스크린 캐스트에서 픽업 할 것인지 모르겠다.하지만 우리가 가지고있는 것은 국경이며 바로 아래 국경 바로 아래에 약간의 그림자가있는 것처럼 보이는 밝은 회색 선이다. 밝은 색상.
승인.
따라서 저를 신뢰하거나 배경 이미지를 제거 할 수 있다면 충분히 볼 수 없으며 거기에서도 쉽게 볼 수 있습니다.
다음은 내가 재미있게 사용했던 아이콘에 집중하겠습니다.
그래서 나는 그것을 열었다.
장난.
굉장해.
알아.
그리고 우리는 여기서도 CD를 얻을 것입니다.
시작을 클릭하면 거기에 복사 할 수있는 CDN이 있습니다.
우리의 응용 프로그램에 넣으십시오. 그리고 그걸 꼭 저장하고 나서 실제 아이콘을 살펴 보겠습니다.
우리가 사용한 첫 번째 것은 PA입니다.
그리고 우리가 필요로하는 것은 모두 고급 ECO F F F F 대시 PA입니다.
그래서 버튼 안에 넣었습니다.
따라서 시작하기 바로 전에 버튼으로 가면 추가 할 것입니다.
이제 우리가 돌아가서 새로 고침하면 우리는 거기에 작은 버튼이 있는지 확인할 수 있습니다. 그리고 손자국이 생기면 다음에 등록하고 로그인 할 수있는 두 개의 아이콘이 나타납니다.
그리고 그 두 사람은 그들이 무엇인지 기억합니다.
나는 우리가 당신이 다른 아이콘을 추가하고 싶다는 것을 알았을 때 등록하기 위해 다음에 여기에서 그것을 할 것입니다.
이 시간 클래스는 F-8 PA가 아니고 F.A. 대시 사용자 대시 플러스는 더하기 기호가있는 아이콘을 제공하고 로그인하는 것은 플러스가없는 것과 동일한 것입니다.
그래서 대시 사용자와 그 두 개의 아이콘이 있습니다.
내가 한 일은 텍스트 그림자라는 것을 눈치 채지 못했을 것입니다.
그래서 여기에 모든 텍스트 주위에 그림자가 있고 그것을 볼 수 있습니다.
그것은 H-1과 H-3 주변에 있으며 테크 섀도우는 SS 텍스트 대쉬 그림자로 설정할 수 있습니다.
그리고 그것에는 많은 조각들이 있습니다.
여기서 오프셋 X와 오프셋 Y를 보았습니다.
그림자가 얼마나 멀리 떨어져 있어야할까요?
그러면 우리는 그 블러의 반경도 설정합니다. 그래서 기본적으로 얼마나 두껍게되어야합니다.
그리고 제가 사용하고있는 색과 그림자는 조금 복잡합니다.
조각이 너무 많아서 CSSA 파일에 한 번에 하나씩 입력해야합니다.
따라서 콘텐츠 div의 내부에는 텍스트 대시 그림자가 추가되고 첫 번째 텍스트 그림자가 추가됩니다.
0 픽셀 4 픽셀 3 픽셀 그리고 내가 빨간색으로 만듦으로써 정말 명백하게 만들 것이고, 내가 새로 고치면 처음에 추가하는 그림자가 있습니다.
이제 가서 쉼표와 들여 쓰기로 두 번째 글자를 추가 한 다음 0 픽셀 8 픽셀 13 픽셀을 얻고 여기에 오렌지색을 넣고 그 중 하나를 봅니다.
여러분은 밝은 오렌지색 아래에 더 흐리게 보이는 것을 볼 수 있습니다. 그리고 나서 첫 번째 숫자가 X 오프셋이고 y 오프셋이 18 픽셀이고 그 다음 23 픽셀이 반경 인 것을 기억하는 0 픽셀 인 세 번째 그림자가 있습니다. 이것 하나를 노랗게 만들고 우리는 우리가 밝은 빨간 역청 그림자를 가지고 있음을 볼 수 있습니다.
그리고 나서 조금 더 멀리있는 오렌지색입니다.
그리고 나서 훨씬 더 희미 해지고 더 넓어지는 노란색 하나.
그래서 우리는 그 색깔을 바꾸고 싶습니다.
우리는 그 일을하고 싶지 않습니다.
그래서 색은 조금 덜 흥미 롭습니다.
첫번째.
0 제로 0 0.4.
다음 중 하나는 0.4 0.1 대신 매우 유사합니다.
그리고 그 중 하나가 0.1입니다.
그래서 R.G. B-A 우리는 단지 회색의 다른 색조를 설정하고 있습니다.
그리고 거기에 우리가 간다.
흥미 로움은 덜하지만 잘하면 여기서 볼 수 있습니다.
훨씬 더 미묘하지만 페이지에 약간의 깊이가 추가됩니다.
큰.
그것이 우리가해야 할 모든 것입니다.
내가 다시 가서 몇 가지를 정리하자.
내가 여기서 만들고 싶은 큰 점은 부트 스트랩을 사용하고 의존 할 수 있지만 모든 스타일에 의존하지 않는다는 것입니다.
네, 네비게이션 막대를 계속 유지했지만 마지막 비디오에서 네비게이션 바의 색을 어떻게 바꿀 수 있는지 보여 주었지만 배경 이미지를 추가 한 글꼴을 변경했습니다.
그래서 우리는 기본적으로 부트 스트랩을 기본 토대로 사용하고 그 다음에 모든 스타일을 맨 위에 추가하고 많이 사용하지 않았습니다.
하지만 몇 줄의 코드만으로도 상당히 존경할만한 것을 만들었다 고 생각합니다.
그리고이 정직한 텍스트 쉐도우 라인의 모든 부분에서 솔직히 말해 봅시다.
굉장해.
그래서 우리는 사이트를 상대적으로 좋아 보이게 만들었습니다.
지금은 부트 스트랩으로 끝났습니다.
우리는 다음 장에서 Javascript로 옮겨 가고 있습니다. 정말 재미 있습니다.
우리는 단지 자바 스크립트에만 집중할 수 있도록 조금 더보기 좋은 사이트 및 것들을 만드는 것으로부터 벗어날 것입니다.
그러나 우리는 모든 것을 다시 모으고 실제로 멋지게 보이지 않는 것들을 실제로하는 아름다운 사이트를 만들 것입니다.
그래서 곧 출시 될 부트 스트랩을 즐겼습니다.
그리고 언제나처럼 질문이 있으면 코드를 다운로드하는 것이 좋습니다.
이 동영상에 대한 설명입니다.