내비게이션연습을 하면서 연습용으로 성공한 웹사이트의 소스코드를 살펴보았는데, 이 성공적인 코드를 통해 배울 수 있었으면 좋겠습니다. 엔지니어의 프로그래밍 아이디어를 구현합니다.
소스코드를 보면서 그동안 무시했던 내용도 많이 알게 되었고, 많은 유익을 얻은 기분이 들었습니다.
Lagou.com의 CSS 파일을 열면 첫 번째 부분에 주석이 표시되어 문서의 시간, 작성자, 스타일 내 특정 요소를 표시합니다. 색상, 너비, 높이를 쉽게 볼 수 있는 시트입니다.
두 번째 부분은 초기화된 요소 스타일과 초기화된 공개 클래스입니다.
세 번째 부분은 웹페이지 각 부분의 스타일입니다.
-
처음으로 했던 네비게이션 연습은 Lagou.com 네비게이션이었습니다.
웹 페이지 탐색 연습
관찰과 생각
이를 위해서는 몇 단계의 중첩을 작성해야 합니까? 항해?
2. 너비를 설정하시겠습니까, 아니면 100%를 사용하시겠습니까?
3. 중앙에 맞추는 방법은?
4. 로그인과 등록 사이의 얇은 경계를 구현하는 방법.
이러한 문제는 제가 발견한 문제이며, 계속 진행하다 보면 분명 문제가 있을 것입니다.
-
주변 요소 스타일 설정
#header{
background: #fafafa;
height: 60px;
min-width: 1024px;
border-top: 3px solid #00B38A;
}
#header .wrapper{
width: 1024px;
margin: 0 auto;
}로그인 후 복사
1. 가장 바깥쪽 주변 #header은 내비게이션의 높이와 내비게이션의 배경색을 설정합니다. 보더탑 스타일.
2. 너비는 내부 .wrapper에 설정되고, 최소 너비는 외부 #header에 설정됩니다. 두 속성 은 모두 동일한 값을 갖습니다. 물론, 디스플레이 화면의 너비는 1024px보다 커야 하므로 .wrapper 안에 margin: 0 auto;를 추가하면 1024px 너비로 콘텐츠를 중앙에 배치할 수 있습니다.
-
내비게이션 요소 기본 레이아웃 수행
웹 페이지 탐색 연습
.wrapper .logo{
float: left;
margin-top: 7px;
width: 229px;
height: 43px;
background: url(image/logo.png) no-repeat;
}
.wrapper .navheader{
float: left;
margin-left: 30px;
}
.navheader li{
float: left;
}
.wrapper .loginTop{
float: right;
}
.loginTop li{
float: left;
}로그인 후 복사
1. 로고 이때 이미지의 원본 크기는 229×43이므로 이 설정에서는 이미지가 늘어나지 않습니다.
2. 왼쪽에는 로고와 내비게이션 메뉴가 플로팅되고, 오른쪽에는 로그인 및 회원가입버튼이 플로팅됩니다.
-
탐색 메뉴 기본 스타일 수정
참고: 마우스가 a 위로 지나갈 때 3px 테두리-하단이 있어야 합니다. 그런데 이 3px는 #header을 넘을 수 없습니다. li 높이를 60px, a 높이를 57px로 하여 마우스가 지나갔을 때 아래쪽 가장자리가 튀어나오지 않게 표시되도록 해야 합니다. .
웹 페이지 탐색 연습
.navheader li{
height: 60px;
padding: 0px 20px;
}
.navheader li a{
display: block;
line-height: 57px;
text-decoration: none;
color: #999;
font-size: 20px;
}
.navheader li a:hover{
color: #333;
border-bottom: 3px solid #00B38A;
}
.loginTop li{
height: 30px;
line-height: 30px;
color: #FFF;
background: #00B38A;
}
.loginTop li a{
display: block;
line-height: 30px;
padding: 0px 10px;
color: #fff;
text-decoration:none ;
}
.loginTop li a:hover{
color: #CCEAE3;
}로그인 후 복사
1. a는 인라인 요소이며 블록으로 변환해야 합니다. level 요소는 높이를 설정하는 것과 같습니다. 인라인 요소를 블록 레벨로 설정하지 않고 줄 높이를 직접 설정하면 높이를 변경하여 문서 흐름을 차지할 수 있지만 줄 높이가 차지하는 공간은 a에 속하지 않습니다.
2. 주의 깊게 보면 행 높이만 설정하고 a 높이를 설정하지 않은 것을 알 수 있습니다. 왜냐하면 IE6 및 7 버전의 브라우저에서는 높이가 설정되지 않았을 때, a 찾았습니다. 실제 블록 수준 요소처럼 상위 요소를 채울 너비가 없습니다. 그런데 높이를 설정하고 나니 갑자기 블록레벨 요소의 특성을 갖게 된 것을 발견했습니다. 하지만 우리는 그가 그렇게 하는 것을 원하지 않기 때문에 키를 쓰지 않겠습니다. 이 효과는 호환됩니다. 작성해 보면 아주 간단합니다. float<a href="http://www.php.cn/wiki/974.html" target="_blank">:left<code>float<a href="http://www.php.cn/wiki/974.html" target="_blank">:left</a>만 추가하면 됩니다. a
3. IE6은 png 형식의 이미지를 지원하지 않습니다. . . . .
-
사실 언뜻 보기에는 그런 모습을 하고 있는 것 같지만, 메뉴에 마우스를 올리면 메뉴의 변화가 갑작스러운 것이 아니라 점진적인 것을 발견했습니다.
.navheader a,.loginTop a{
transition: all .2s ease-in-out ;
-webkit-transition: all .2s ease-in-out ;
-moz-transition: all .2s ease-in-out ;
-o-transition: all .2s ease-in-out ;
}로그인 후 복사
transition이 속성을 설정할 수 있으며, 요소의 특정 스타일이 변경되면 그라데이션도 변경될 수 있습니다. 더욱 흥미로운 사진을 얻을 수 있으며 html5에 대한 관련 지식을 배워야 합니다. 계속해서 배울 것입니다.
*{<a href="http://www.php.cn/wiki/938.html" target="_blank">개요<code>*{<a href="http://www.php.cn/wiki/938.html" target="_blank">outline</a>:none;}:없음 ;}기본적으로 모든 요소의 윤곽선을 없음으로 설정합니다.
body,p,a,span,ul,li{margin: 0;padding: 0;} 모든 요소의 내부 여백 을 0으로 설정합니다.
ul.<a href="http://www.php.cn/wiki/1081.html" target="_blank">reset</a>{list-style:none;}去除掉列表的默认样式
首先分出body与footer两个部分。这里面还涉及相应的height与min-height设置，但是这些又涉及一些兼容的问题，所以我就先不写了，回头再另写一篇。
最外层嵌套使用id='header'标记，方便寻找里面子元素，里面就可以用class啦，.wrapper可以用作包围元素做公共类使用。class="navheader"与class="loginTop"可以作为查找元素使用。
ul>li>a，一般的导航基本上都是这样的结构。
ul前的a可以以背景为图片，做链接。
-
第一步：设计出html结构，并为元素设置相应的id与类
<p>
</p><p>
</p><p>
<a></a>
</p>
로그인 후 복사
对网页进行全局的css设置。
我先写下做导航时我用到的
对导航进行css设置
위 내용은 웹 페이지 탐색 연습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
