web网页导航练习-css教程-PHP中文网

首页

web前端

css教程

web网页导航练习

PHPz

Apr 04, 2017 am 11:20 AM

web网页

我在做导航练习时，是查看那些已经成功的网站的源代码进行练习，希望通过这些成功的代码可以学习到代码背后前端工程师们的编程思路。
在查看源代码中我也学习了很多以前忽视的细节，觉得受益匪浅啊。

当我打开拉勾网的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<a href="http://www.php.cn/wiki/974.html" target="_blank">:left</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">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 id=&#39;body&#39;>
        <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>

登录后复制