通过一个月以来对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
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
