通过一个月以来对html5+css的学习。这篇随笔给大家来做一个简单的网页中常见的导航栏。
这些都称之为网页中的导航栏。
我简单的做了一个某宝和58同城的导航栏，供大家学习参考。
一、58同城导航栏：
解析：首先我们来看到这个导航栏，我们可以把它分成两个部分 左边为一部分，右边为一部分。把导航栏拆分成两个部分 这样这个导航栏的难度就大大降低了。
html5部分：
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="x-ua-compatible" content="ie=edge"> 8 <link rel="stylesheet" href="master1.css"> 9 <link rel="shortcut icon" href="56.ico" /> 10 <title>【58同城 58.com】珠海分类信息 - 本地 免费 高效</title> 11 12 </head> 13 14 <body> 15 <div class="warpper"> 16 17 <div class="top-nav-wrap"> 18 <div class="top-nav"> 19 <!--左--> 20 <ul class="top-nav-l"> 21 <!-- <li class="top-nav-menu area"> 22 <a href="#"> 23 <span>珠海</span> 24 </a> 25 </li>--> 26 <li class="top-nav-menu city"> 27 <span class="area">珠海</span> 28 <span> 29 <a href="#">[切换城市</a> 30 </span> 31 <a href="#">澳门</a> 32 <a href="#">中山</a> 33 <a href="#">重庆]</a> 34 </li> 35 <li class="top-nav-menu tianqi"> 36 <span class="bg-pic yl-pic"></span> 37 38 <span>晴</span> 39 <span>28 ~ 21℃</span> 40 41 <span class="bg-pic zl-pic"></span> 42 </li> 43 </ul> 44 45 <!--右--> 46 <ul class="top-nav-r"> 47 <li class="top-nav-menu login"> 48 <a href="#"> 49 <span class="c-span">登录 / 注册 </span> 50 </a> 51 </li> 52 <!-- <li class="top-nav-menu cut-off"> 53 <span>/</span> 54 </li> 55 56 <li class="top-nav-menu login"> 57 <a href="#"> 58 <span class="c-span">注册</span> 59 </a> 60 </li>--> 61 <li class="top-nav-menu per"> 62 <a href="#"> 63 <span class="c-span">个人中心</span> 64 </a> 65 <span class="bg-pic xsj-pic"></span> 66 </li> 67 68 <li class="top-nav-menu mer"> 69 <a href="#"> 70 <span class="c-span">商家中心</span> 71 </a> 72 <span class="bg-pic xsj-pic"></span> 73 </li> 74 75 <li class="top-nav-menu help"> 76 <a href="#"> 77 <span class="c-span">帮助中心</span> 78 </a> 79 <span class="bg-pic xsj-pic"></span> 80 </li> 81 82 <li class="top-nav-menu ser"> 83 <a href="#"> 84 <span class="c-span">联系客服</span> 85 </a> 86 </li> 87 88 <li class="top-nav-menu vig"> 89 <a href="#"> 90 <span class="c-span">网站导航</span> 91 </a> 92 <span class="bg-pic xsj-pic"></span> 93 </li> 94 95 </ul> 96 </div> 97 </div> 98 </div> 99 </body> 100 101 </html>
css代码部分：
我要评论 1 /*页面初始化*/
2 *{
3 margin:0;
4 padding:0;
5 list-style: none;
6 text-decoration:none;
7 }
8 /*页面的整体显示*/
9 html,
10 body{
11 width:100%;
12 height:100%;
13 background-color:#f4f4f4;
14 color:#555;
15 overflow: hidden;
16 }
17 /*页面的模块*/
18 .warpper{
19 width:100%;
20 height:100%;
21
22 }
23 /*设置导航栏的宽高*/
24 .warpper .top-nav-wrap{
25 width:100%;
26 height:35px;
27 background-color:#fff;
28 border-bottom: 1px solid #ddd;/*下标线*/
29 /*background-color:1px solid #000;*/
30 }
31 /*给显示东西的导航栏设置宽高*/
32 .warpper .top-nav-wrap .top-nav{
33 width:1190px;
34 height:35px;
35 /*border:1px solid red;*/
36 margin:0 auto;
37
38 }
39 /*将左边的内容 向左靠齐*/
40 .warpper .top-nav-wrap .top-nav .top-nav-l{
41 float:left;
42 }
43 /*将右边的内容 向右靠齐*/
44 .warpper .top-nav-wrap .top-nav .top-nav-r{
45 float:right;
46 }
47 /*将所以的内容区域水平排列*/
48 .warpper .top-nav-wrap .top-nav ul li{
49 float:left;
50 margin:5px;
51 }
52 /*将内容的所以的a标签改变颜色大小等*/
53 .warpper .top-nav-wrap .top-nav a{
54 color:#555;
55 font-size:12.5px;
56 padding:0 5px;
57 margin:0;
58 }
59 /*将内容首个 改变样式和字体，大小*/
60 .warpper .top-nav-wrap .top-nav .area{
61 color:#ff552e;
62 font-size:7.5px;
63 font-weight:bold;/*字体加粗*/
64 float: left;
65 padding-top: 4px;
66 }
67 /*改变所以span的内容字体大小*/
68 .warpper .top-nav-wrap .top-nav span{
69 font-size:11px;
70
71 }
72 /*鼠标指向改变状态。。颜色*/
73 .warpper .top-nav-wrap .top-nav a:hover{
74 color:#ff552e;
75 }
76 /*内容间距*/
77 .warpper .top-nav-wrap .top-nav .city{
78 padding:0 -6px;
79 word-spacing:-10px;
80 letter-spacing: 1px;
81 }
82
83
84 /*图片设置*/
85 .warpper .top-nav-wrap .top-nav .bg-pic{
86 display:inline-block;
87 width:14px;
88 height:9px;
89 background-size:100% 100%;
90 vertical-align:middle;
91 }
92
93 .warpper .top-nav-wrap .top-nav .bg-pic.xsj-pic{
94 background-image: url('./xsj1.png');
95 width:9px;
96 height:7px;
97 }
98 .warpper .top-nav-wrap .top-nav .bg-pic.yl-pic{
99 background-image: url('./tq.png');
100 width:16px;
101 height:10px;
102 }
103 .warpper .top-nav-wrap .top-nav .bg-pic.zl-pic{
104 background-image: url('./zl.png');
105 width:18px;
106 height:18px;
107 }
运行效果：
二、淘宝导航栏
html代码部分：
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="x-ua-compatible" content="ie=edge"> 8 <link rel="stylesheet" href="master.css"> 9 10 <title>淘宝网 - 淘！我喜欢</title> 11 </head> 12 13 <body> 14 15 <div class="wrapper"> 16 <!--导航栏--> 17 <div class="top-nav-wrap"> 18 <div class="top-nav"> 19 20 <ul class="top-nav-l"> 21 <li class="top-nav-menu china"> 22 <span class="c-span">中国大陆</span> 23 <span class="bg-pic xsj-pic"></span> 24 </li> 25 <li class="top-nav-menu login-sign"> 26 <a href="#">亲，请登录</a> 27 <a href="#">免费注册</a> 28 </li> 29 <li class="top-nav-menu "> 30 <a href="#">手机逛淘宝</a> 31 </li> 32 </ul> 33 34 <ul class="top-nav-r"> 35 <li class="top-nav-menu my-taobao"> 36 <a href="#">我的淘宝</a> 37 <span class="bg-pic xsj-pic"></span> 38 </li> 39 <li class="top-nav-menu shop-car"> 40 <a href="#"> 41 <span class="bg-pic shopcar-pic"></span> 42 <span>购物车0</span> 43 </a> 44 <span class="bg-pic xsj-pic"></span> 45 </li> 46 <li class="top-nav-menu like"> 47 <a href="#"> 48 <span class="bg-pic like-pic"></span> 49 <span>收藏夹</span> 50 </a> 51 <span class="bg-pic xsj-pic"></span> 52 </li> 53 54 <li class="top-nav-menu goods"> 55 <a href="#">商品分类</a> 56 </li> 57 58 <li class="top-nav-menu cut-off"> 59 <span>|</span> 60 </li> 61 <li class="top-nav-menu seller"> 62 <a href="#"> 63 <span class="c-span">卖家中心</span> 64 <span class="bg-pic xsj-pic"></span> 65 </a> 66 </li> 67 <li class="top-nav-menu cutsomer"> 68 <a href="#"> 69 <span class="c-span">联系客服</span> 70 <span class="bgpic xsj"></span> 71 </a> 72 </li> 73 <li class="top-nav-menu web-nav"> 74 <a href="#"> 75 <span class="bg-pic web-nav-pic"></span> 76 <span>网站导航</span> 77 </a> 78 <span class="bg-pic xsj-pic"></span> 79 </li> 80 </ul> 81 </div> 82 <!--导航图片 83 <div class="ad-wrap"> 84 <img src="toutiao4.png" alt="图"> 85 </div>--> 86 </div> 87 </body> 88 </html>
css代码部分：
1 /*初始化工作*/
2 *{
3 margin: 0;/*去边距*/
4 padding: 0;
5 list-style:none;/*去标签小圆点*/
6 text-decoration: none;/*去下划线*/
7 }
8 /*想设置页面的宽度，必须先让父元素先修改值*/
9 html,
10 body{
11 width: 100%;
12 height: 100%;
13 background-color:#f4f4f4;
14 color:#3c3c3c;
15 overflow: hidden;/*去纵向滚动条*/
16 }
17 .wrapper{
18 width: 100%;
19 height: 100%;
20 }
21 /*上导航栏条*/
22 .wrapper .top-nav-wrap{
23 width: 100%;
24 height:35px;
25 /*border:1px solid #000;*/
26 }
27 .wrapper .top-nav-wrap .top-nav{
28 width: 1190px;
29 height: 35px;
30 /*border:1px solid black;*/
31 margin:0 auto;/*让导航条居中在页面中间*/
32 }
33 .wrapper .top-nav-wrap .top-nav .top-nav-l{
34 float:left;/*让左侧的东西靠左*/
35 }
36 .wrapper .top-nav-wrap .top-nav .top-nav-r{
37 float:right;/*让右侧的东西靠右*/
38 }
39 .wrapper .top-nav-wrap .top-nav ul li{
40 float:left;/*导航条水平排列*/
41 margin:6px;/*字间距*/
42 }
43 .wrapper .top-nav-wrap .top-nav a{
44 color:#6c6c6c;
45 font-size:12.5px;
46 padding:0 6px;
47 margin:0;
48 }
49 /*伪类 鼠标指针指向*/
50 .wrapper .top-nav-wrap .top-nav a:hover{
51 color:#f40;
52 }
53 .wrapper .top-nav-wrap .top-nav .china{
54 color:black;
55 font-size:13px;
56 padding-top:3.5px;
57 }
58 .wrapper .top-nav-wrap .top-nav .my-taobao a{
59 color:black;
60 }
61 .wrapper .top-nav-wrap .top-nav .login{
62 color:#f40;
63 }
64 .wrapper .top-nav-wrap .top-nav .c-span{
65 padding:0 3px;
66
67 }
68 .wrapper .top-nav-wrap .top-nav .bg-pic{
69 display:inline-block;
70 width:10px;
71 height:10px;
72 background-size:100% 100%;
73 vertical-align:middle;
74 }
75 .wrapper .top-nav-wrap .top-nav .bg-pic.xsj-pic{
76 background-image: url('./xsj.png');
77
78 }
79 .wrapper .top-nav-wrap .top-nav .like-pic{
80 background-image: url('./xxx.png');
81 width:13px;
82 height:9px;
83 padding-top:4px;
84
85 }
86 .wrapper .top-nav-wrap .top-nav .bg-pic.shopcar-pic{
87 background-image: url('./gwc.png');
88 width:14px;
89 height:15px;
90
91 }
92 .wrapper .top-nav-wrap .top-nav .bg-pic.web-nav-pic{
93 background-image: url('./xuanxiang.png');
94 width:10px;
95 height:8px;
96 padding-top:2px;
97 }
98 .wrapper .top-nav-wrap .top-nav .cut-off{
99 line-height:25px;
100 color:#ddd;
101 }
注：因为没有运用到javascript所以很多动态交互无法实现，图标都是图片暂时放上的。所以请多多理解。
运用的知识：1.title显示， 2.css样式引入， 3.css选择器与选择器权重， 4.横向滚动条消失， 5.display， 6.浮动， 7.居中， 8.文字竖直居中， 9.background， 10.伪类， 11.定位position， 12.margin/padding
如对本文有疑问， 点击进行留言回复！！
荐 css的3中水平居中方式和4中水平垂直居中方式及应用情形速记
网友评论