一篇文章教会你如何制作精美导航条

浏览: 1020

【一、项目背景】

让更多的人去学习html,以广东科技学院的导航栏为例, 教大家怎么去做一个横向的导航栏。

一篇文章教会你如何制做精美导航条

【二、项目准备】

准备一个编程的软件Dreamweaver,打开软件点击文件新建一个叫导航栏的项目,如下图所示。

一篇文章教会你如何制做精美导航条

点击确定之后,会弹出下图。

一篇文章教会你如何制做精美导航条

【三、项目实施】

1. 在<body>标签里面写下一个框架:

一篇文章教会你如何制做精美导航条

注:<nav>标签定义导航链接的部分。<ul> 标签定义无序列表,<li>标签定义列表项目。

<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

一篇文章教会你如何制做精美导航条

2. 写完运行(运行:右下角点击f12运行)看到效果,如下图所示:

一篇文章教会你如何制做精美导航条

3. 加入css样式表(这里采用内部样式表)。

3.1 CSS样式表有两种加入的方式 如图:

一篇文章教会你如何制做精美导航条

3.2 去除li带来的小黑点:

li{
list-style: none;
}

4. 基于上述步骤,运行一下 如下图所示:

一篇文章教会你如何制做精美导航条

5. 设置一下导航栏的样式。

1) 设置一下列表ul 的宽度 ,高度,背景颜色,文字位置居中(margin:0 auto)。

Li 同样的设置高度 。

2) 去掉小黑点 ,再设置文字的颜色 ,高度 ,内边距 ,(个人喜好 看着舒服就行)

3) 设置文字的大小,去掉下划线(text-decoration:none;)。

一篇文章教会你如何制做精美导航条

下面是详细备注

ul li{float: left; # 把内容左浮动,这样可以横向排列
width: 100px; # 设置每个li的宽
height: 30px; # 设置每个li的高
background-color:pink # 设置li的背景颜色为粉色
border: 1px solid 6495ED; # 设置li的边框颜色以及边框大小
text-align: center; # 设置li中的文字样式为居中
line-height: 30px; # 设置li中文字举例上边框的高度
}
ulli:hover{background-color: aqua;} # 设置将鼠标放到li时的背景颜色
ul li:hover a{color: black;} # 设置将鼠标放到li中的a标签的内容时的文字颜色

6. 完整代码,如下图所示。

一篇文章教会你如何制做精美导航条

7. 运行之后,效果图如下图所示。

一篇文章教会你如何制做精美导航条

【四、总结】

1. Html能做的效果非常多,希望你耐心的去学习,同时希望碰到问题主动搜索,尝试一下总会有解决方法。

2. 如果需要本文源码,请在公众号后台回复“导航栏”三个字获取。

看完本文有收获?请转发分享给更多的人

IT共享之家

推荐 0
本文由 dcpeng 创作,采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
转载、引用前需联系作者,并署名作者且注明文章出处。
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台,并不用于任何商业目的,如果有任何问题,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

0 个评论

要回复文章请先登录注册