导航条设计素材_导航条
你们好，最近小活发现有诸多的小伙伴们对于导航条设计素材，导航条这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、首先，在body标记中创建一个DIV，将其命名为“nav ”,并在DIV中创建一个无序列表。根据图中所示的列表，分为9项，每项都有超链接。因为是演示，所以下面的每个链接都会用空链接来演示。
2、代码如下：
(资料图)
3、html
4、head
5、标题制作网页导航条/title
6、style
7、!-- --
8、/style
9、/head
10、body
11、div id="nav"
12、 ul
13、Li a href=" # "/网站主页/a/li
14、Li a href=" # "/公司简介/a/li
15、Li a href=" # "/产品演示/a/li
16、Lia href="#"/News /a/li
17、lia href=" # "/企业文化/a/li
18、lia href=" # "/招聘人才/a/li
19、lia href=" # "/联系我们/a/li
20、Li a href=" # "/参观路线/a/li
21、Li a href=" # "/收藏的网站/a/li
22、/ul
23、/div
24、/body
25、/html
26、打开浏览器预览，并查看以下效果：
27、点击鼠标右键，先在电脑中保存导航条的背景图片，如下图：
28、现在让我们逐一为导航条中的元素设置CSS样式，先为ul指定样式；代码如下：
29、style
30、!—
31、#nav ul {
32、Width:1000px;
33、height:40px;
34、margin:30px auto;
35、padding:0;
36、list-style:none;
37、border-top:solid 5px #DAA520;
38、border-bottom:solid 5px #DAA520;
39、background:url(img/navig-bg.jpg);
40、}
41、--
42、/style
43、上述代码的含义依次为
44、#nav ul {
45、宽度：1000像素；
46、高度：40像素；
47、外层空间：上下30像素，左右相等；
48、内部边距：0；
49、列表样式显示：无；(这句话代表去掉列表前面的黑点。)
50、上边框线：实线，5像素，颜色# daa520
51、下边框线：实线，5像素，颜色# daa520
52、背景：URL(图片地址)；
53、}
54、打开浏览器预览，看到的效果如下：
55、再为ul中的li规定样式，代码如下：
56、#nav ul li {
57、float:left;
58、text-align:center;
59、font:16px/2.5 "microsoft yahei";
60、}
61、上列代码的意思依次为
62、#nav ul li {
63、宽度：100像素；
64、浮动：左对齐；
65、文本对齐：居中；
66、文字：大小16像素，行高162.5，字体”微软雅黑”；
67、}
68、打开浏览器预览，看到的效果如下：
69、接下来就是为li里的链接a标签规定样式了，代码如下：
70、#nav ul li a {
71、text-decoration:none; color:#800080;
72、}
73、这句代码的意思是a 元素文字装饰：无（表示去掉下划线）； 默认下文字颜色：#800080（颜色代码）；
74、#nav ul li a:hover {
75、display:block; color:#FFFFFF; background:#DC143C;
76、 }
77、这句代码的意思是当鼠标移上a元素时，显示为：块；文字颜色#FFFFFF（白色）；背景颜色：#DC143C（红色）；
78、到了这一步，这个导航条就已经完成了，当把鼠标移到“公司简介”这一链接时，链接就会显示为块级元素，文字显示白色，背景显示为红色，如下图所示：
79、所有的样式代码如下：
80、style type="text/css"
81、#nav ul {
82、Width:1000px;
83、height:40px;
84、margin:30px auto;
85、padding:0;
86、list-style:none;
87、border-top:solid 5px #DAA520;
88、border-bottom:solid 5px #DAA520;
89、background:url(images/navig-bg.jpg)
90、}
91、#nav ul li {
92、width:100px;
93、float:left;
94、text-align:center;
95、font:16px/2.5 "microsoft yahei";
96、}
97、#nav ul li a {
98、color:#800080; text-decoration:none;
99、}
100、#nav ul li a:hover {
101、display:block; color:#FFFFFF; background:#DC143C;
102、}
103、/style
以上就是导航条这篇文章的一些介绍，希望对大家有所帮助。
X 关闭
精心推荐
Copyright © 2015-2022 大众安防网版权所有 备案号：豫ICP备20014643号-14 联系邮箱： 905 14 41 07@qq.com