查看: 1431|回复: 0

几种页面常见导航栏的制作与说明


17-5-10 21:58:13 | [复制链接]

4

主题

29

帖子

152

积分

千锋学员

Rank: 2

社区QQ达人

发表于 17-5-10 21:58:13 | 显示全部楼层 |阅读模式
    学习了html半个月之久,感觉自己收获颇丰,以前看各种网页感觉都非常高深,从一开始的一窍不通,到目前为止,自己也可以独立完成了.在学习的过程中,发现导航栏的样式不同,对整个网页的美观效果也会带来很大影响.所以还是要多会几个样式还是有好处的,"一招鲜"还是不行的.总结了了一下最近学习的知识,整理出几个导航样式.
    1.第一种
    这是比较常见的,也是相对来说最简单的一种导航样式.
    看一下效果图:
   

鼠标滑动之前

鼠标滑动之前
这是鼠标滑动之前的
            nav1_b.png 这是鼠标滑动之后的
            一言不合上代码环节:
    <!--*********************************************nav0 html代码-->
  1.                 <div class="nav0">
  2.                         <ul>
  3.                                 <li>
  4.                                         <a href="#">选项</a>
  5.                                 </li>
  6.                                 <li>
  7.                                         <a href="#">选项</a>
  8.                                 </li>
  9.                                 <li>
  10.                                         <a href="#">选项</a>
  11.                                 </li>
  12.                                 <li>
  13.                                         <a href="#">选项</a>
  14.                                 </li>
  15.                                 <li>
  16.                                         <a href="#">选项</a>
  17.                                 </li>
  18.                                 <li>
  19.                                         <a href="#">选项</a>
  20.                                 </li>
  21.                                 <li>
  22.                                         <a href="#">选项</a>
  23.                                 </li>
  24.                                 <li>
  25.                                         <a href="#">选项</a>
  26.                                 </li>
  27.                         </ul>
  28.                 </div>
复制代码

下面是CSS样式:
首先要写一些初始化的样式:
/*这里也可以不用这么复杂,使用通配符*就可以,但是在公司正常做项目一般不允许使用通配符,所以建议这么使用来进行初始化*/
  1. body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,img,input {
  2.                                 margin: 0;
  3.                                 padding: 0;
  4.                         }
  5.                         
  6.                         img {
  7.                                 border: none;
  8.                         }
  9.                         
  10.                         li {
  11.                                 list-style: none;
  12.                         }
  13.                         
  14.                         a {
  15.                                 text-decoration: none;
  16.                         }
  17. /*初始化结束*/
  18. /*导航一的样式nav0*/
  19.                         .nav0 {
  20.                                 width: 800px;
  21.                                 height: 80px;
  22.                                 margin: 0 auto;
  23.                                 background: #480cf6;
  24.                         }
  25.                         .nav0 ul li{
  26.                                 float: left;
  27.                         }
  28.                         .nav0 ul li a{
  29.                                 display: block;
  30.                                 color: #fff;
  31.                                 width: 100px;
  32.                                 text-align: center;
  33.                                 line-height: 80px;
  34.                         }
  35.                         .nav0 ul li a:hover{
  36.                                 background: #f56118;
  37.                                 color: #f5dcdb;
  38.                         }
复制代码

说明:首先在创建一个div,宽800px高80px,左右居中显示,然后div里写一个ul,让li列表左浮动,再对li里面的超链接a进行设置,a链接属于内联元素,转成块级元素才能设置宽高,所以设置display:block;然后设置文本颜色为白色,行高为div的高度,div宽度为800px,这里有8个选项,所以设置每个a标签宽度是100px,当鼠标划过某个选项的时候要让选项变化颜色,需要设置a:hover里的background来改变背景色,这样就达到效果了.
          第二种:
效果图:
nav2_a.png 这是选中之前
nav2_b.png 这是选中之后
这种效果最简单的实现方式就是给每个边框设置border-radius:5px 5px 0 0 ;这样虽然也能达到效果,但是这是css3里才有的,某些浏览器不一定支持.
所以写了如下方式,上代码:
<!--*********************************************nav1 html-->
  1.                 <div class="nav1">
  2.                         <ul>
  3.                                 <li>
  4.                                         <a href="#"><span>首页</span></a>
  5.                                 </li>
  6.                                 <li>
  7.                                         <a href="#"><span>首页</span></a>
  8.                                 </li>
  9.                                 <li>
  10.                                         <a href="#"><span>首页</span></a>
  11.                                 </li>
  12.                                 <li>
  13.                                         <a href="#"><span>首页</span></a>
  14.                                 </li>
  15.                         </ul>
  16.                 </div>

  17. /*------------------------------------------nav1 css*/
  18.                         
  19.                         .nav1 {
  20.                                 width: 1000px;
  21.                                 margin: 50px auto 0;
  22.                         }
  23.                         
  24.                         .nav1 ul {
  25.                                 overflow: hidden;
  26.                                 padding-left: 150px;
  27.                         }
  28.                         
  29.                         .nav1 li {
  30.                                 float: left;
  31.                                 margin-right: 10px;
  32.                         }
  33.                         
  34.                         .nav1 li a {
  35.                                 height: 42px;
  36.                                 background: url(img/tableft.gif) no-repeat left top;
  37.                                 padding-left: 4px;
  38.                                 display: block;
  39.                                 line-height: 42px;
  40.                         }
  41.                         
  42.                         .nav1 li span {
  43.                                 height: 42px;
  44.                                 background: url(img/tabright.gif) right top;
  45.                                 display: block;
  46.                                 line-height: 42px;
  47.                                 padding-right: 4px;
  48.                         }
  49.                         
  50.                         .nav1 li a:hover {
  51.                                 background-position: left -42px;
  52.                         }
  53.                         
  54.                         .nav1 li a:hover span {
  55.                                 background-position: right -42px;
  56.                         }
复制代码


这里是使用背景图来达到的效果,需要的背景图在这里贴出:
tableft.gif
这是左边背景
tabright.gif
这是右边背景
实现思路:
因为无法给一个标签设置两个背景图,所以两个背景图肯定是要分开设置的,在a标签里添加span标签,把选项放进span里,分别设置a标签和span标签的背景图,把小一点的图片设置给a标签,不重复 从左上开始,因为要把它的位置让出来,这张图片的宽为4px,所以设置padding-left:4px;图片上半部分是42px,line-height设置为42px;大背景图设置给span,把span转成块之后,设置从右上开始的背景图,为了实现左右对称,设置padding-right也为4px.当鼠标划中之后,实现把下半部分的图片显示出来,只需设置背景图的位置网上挪就好,因为上半部分为42px,所以需要网上挪42px.
    第三种:
效果图:
nav3_a.png 选中之前
nav3_b.png 选中之后
这种也是比较常见的导航效果,他实现的方式跟第二种类似,但是相对来说更加简单,这种方式是把八个小图标整合到一张图上,然后在不同时候设置一张图不同的位置来显示,整合的图片如下:
bg.gif
这种方式在公司中更加常见,因为这种图片整合相对来说加载更快,体积也比八张分开要少,而且只需要请求一次服务器就能下载下来,用户体验度也比较好,这就是图片整合的好处.
上代码:
<!--********************************************nav2-->
  1.                 <div class="nav2">
  2.                         <ul>
  3.                                 <li>
  4.                                         <a href="#" class="link_1"></a>
  5.                                 </li>
  6.                                 <li>
  7.                                         <a href="#" class="link_2"></a>
  8.                                 </li>
  9.                                 <li>
  10.                                         <a href="#" class="link_3"></a>
  11.                                 </li>
  12.                                 <li>
  13.                                         <a href="#" class="link_4"></a>
  14.                                 </li>
  15.                         </ul>
  16.                 </div>

  17. /*-------------------------nav2*/
  18.                         
  19.                         .nav2 {
  20.                                 width: 1000px;
  21.                                 margin: 50px auto 0;
  22.                                 padding-left: 150px;
  23.                         }
  24.                         
  25.                         .nav2 ul {
  26.                                 overflow: hidden;
  27.                         }
  28.                         
  29.                         .nav2 ul li {
  30.                                 float: left;
  31.                         }
  32.                         
  33.                         .nav2 ul li a {
  34.                                 height: 22px;
  35.                                 width: 62px;
  36.                                 display: block;
  37.                                 background: url(img/bg.gif) no-repeat left top;
  38.                         }
  39.                         .nav2 ul li .link_2{
  40.                                 background-position: -62px top;
  41.                         }
  42.                         .nav2 ul li .link_3{
  43.                                 background-position: -124px top;
  44.                         }
  45.                         .nav2 ul li .link_4{
  46.                                 background-position: -186px top;
  47.                         }
  48.                         .nav2 ul li a:hover{
  49.                                 background-position: left bottom;
  50.                         }
  51.                         .nav2 ul li .link_2:hover{
  52.                                 background-position: -62px bottom;
  53.                         }
  54.                         .nav2 ul li .link_3;hover{
  55.                                 background-position: -124px bottom;
  56.                         }
  57.                         .nav2 ul li .link_4:hover{
  58.                                 background-position: -186px bottom;
  59.                         }
复制代码


实现思路:
给所有a标签选项都都设置成这个最左上的为背景,然后单独设置其他选项背景图的位置,以及选中状态时候背景图的位置
    第四种:
效果图:
nav4_a.png        选中之前
nav4_b.png 选中之后
这种效果一般在新闻页面比较常见,比如网易的页面中就会有出现
实现的代码:
<!--********************************************nav3-->
  1.                 <div class="nav3">
  2.                         <ul>
  3.                                 <li>
  4.                                         <a href="#">首页</a>
  5.                                 </li>
  6.                                 <li>
  7.                                         <a href="#">首页2</a>
  8.                                 </li>
  9.                                 <li>
  10.                                         <a href="#">首页3</a>
  11.                                 </li>
  12.                                 <li>
  13.                                         <a href="#">首页4</a>
  14.                                 </li>
  15.                         </ul>
  16.                 </div>

  17. /*-------------------------nav3*/
  18.                         
  19.                         .nav3 {
  20.                                 background: #eee;
  21.                                 height: 50px;
  22.                                 width: 800px;
  23.                                 margin: 50px auto 0;
  24.                                 border-bottom: 1px solid #000000;
  25.                                 padding-left: 150px;
  26.                         }
  27.                         
  28.                         .nav3 ul li {
  29.                                 float: left;
  30.                         }
  31.                         
  32.                         .nav3 ul li a {
  33.                                 margin-top: 19px;
  34.                                 margin-right: 10px;
  35.                                 display: block;
  36.                                 height: 30px;
  37.                                 border: 1px solid #999;
  38.                                 border-bottom: none;
  39.                                 line-height: 30px;
  40.                         }
  41.                         
  42.                         .nav3 ul li a:hover {
  43.                                 height: 35px;
  44.                                 margin-top: 15px;
  45.                                 background: #fff;
  46.                                 line-height: 35px;
复制代码

                        }

实现的思路:
设置div高50px,以及1px的下边框,然后设置每个单元格高度为30px的列表,只有上和左右的边框,没有下边框,让它距上19px,以为加上1px的上边框是二十正好占满整个div的高度,跟下边框刚好吻合,然后设置选中状态单元格高度为35px,距上15px,设置背景色与div的不同,这时候单元格的高度是35+15+1=51px,刚好把div的下边框盖住,看上去就好像单元格突出一块,并且div的下边框跟选中的单元格边框连接一起.
    第五种:
效果图:
nav5_a.png 选中之前
nav5_b.png 选中之后
这种导航图跟第二种的思路也是一样的,是分开两部分实现的,其实也可以用一个外边框实现,但是不能满足里面内容变多之后还能包裹的效果,所以把这个选中框分开两部分实现,可以达到内容变多可以一直包住内容.
两个边框的背景图如下
这是左边的背景图:
                               left.jpg
这是右边的背景图:
                               right.jpg
实现思路跟第二种一样,相对来说简单一些,不需要变换颜色,选中时候a标签显示左边背景图,同时span也显示右边的背景图,这样当span里的内容不断增多,但是满足一直在两边包裹的效果.

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

订阅|小黑屋|手机版|千锋教育论坛 ( 京ICP备12003911号-3 )

GMT+8, 20-4-3 02:07 , Processed in 0.405022 second(s), 45 queries .

Powered by Discuz! X3.2

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表