当我打开拉勾网的css文件时，第一部分是用注释的方式标记了文档的时间，作者以及样式表内部方便查看的某些元素的颜色及宽高。
第二部分是一些初始化的元素样式，及初始化的公共类。
第三部分是网页各个部分的样式。
我做的第一个导航练习是拉勾网的导航。
lagou_nav.jpg
观察与思考
1、这个导航需要写几层嵌套呢？
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设置了导航的高度，以及导航的背景色，增添了border-top的样式。
2、内部.wrapper设置了宽度，外部#header设置了最小宽度，二者属性值一样。当然显示屏的宽度肯定大于1024px,这样在加上在.wrapper里进行margin: 0 auto;可以实现宽度为1024的内容居中。
对导航元素进行基本布局
step1.jpg
.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、设置logo时，图片原来的尺寸就是229×43，所以这样设置并不会拉伸图片。
2、logo与导航菜单均左浮动，登录注册按钮向右浮动。
对导航菜单进行基本样式修饰
注意：当鼠标经过a时，需要有一个3px的border-bottom，但是这个3px不能超过#header，需要做的就是让li的高度为60px，让a的高度为57px，这样当鼠标经过时，显示底边，不会突出。
2015-01-18_200656.jpg
.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为行内元素需要将他转化为块级元素，这样才能够设置高度。行内元素如果不设置为块级，直接设置行高，虽然也可以改变高度，并且占据文档流，但是行高所占据的空白并不会是属于a的。
2、细心的可以发现，我为每一个a只设置了行高，并没有设置高度，因为在IE6、7版本的浏览器，我发现未设置高度时，我发现a并没有具备真正的块级元素具备的那样，宽度充斥父元素。但是设置了高度后，发现他们一下子具备了块级元素的特点。但是我们不想让他那样，所以我就不写高度了。这样效果均兼容。如果写了呢，也很简单只要为a补上一个float:left
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的相关知识。会继续学习的。
*{outline:none;}设置所有元素的轮廓默认为无。
body,p,a,span,ul,li{margin: 0;padding: 0;}设置所有元素的内外边距为0。
ul.reset{list-style:none;}去除掉列表的默认样式
首先分出body与footer两个部分。这里面还涉及相应的height与min-height设置，但是这些又涉及一些兼容的问题，所以我就先不写了，回头再另写一篇。
最外层嵌套使用id='header'标记，方便寻找里面子元素，里面就可以用class啦，.wrapper可以用作包围元素做公共类使用。class="navheader"与class="loginTop"可以作为查找元素使用。
ul>li>a，一般的导航基本上都是这样的结构。
ul前的a可以以背景为图片，做链接。
第一步：设计出html结构，并为元素设置相应的id与类
<p id='body'> <p id="header"> <p class="wrapper"> <a class="logo" href=""></a> <ul class="navheader reset"> <li><a href="">首页</a></li> <li><a href="">论坛</a></li> <li><a href="">我的简历</a></li> <li><a href="">发布职位</a></li> </ul> <ul class="loginTop reset"> <li><a href="">登录</a></li> <li>|</li> <li><a href="">注册</a></li> </ul> </p> </p> </p> <p id="footer"> </p>
对网页进行全局的css设置。
我先写下做导航时我用到的
对导航进行css设置
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright © 2019-2024 51dongshi.com 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
