【一、项目可行性】
让大量的人去学习html ，以广东省科技学校的导航条为例子 ， 教大伙儿如何去做一个横着的导航条。
【二 、新项目提前准备】
提前准备一个程序编写的手机软件Dreamweaver，打开软件点一下文档在建一个叫导航条的新项目 ，如下图所显示 。
点一下明确以后 ，会弹出来下面的图 。
【三 、项目实施】
1. 在
标识里边写出一个架构：注：
- ) 和无序列表 (
- ) 中 。
2. 写完运作（运作：右下方点一下f12运作）见到实际效果 ，如下图所显示：
3. 添加css样式表（这儿选用內部css样式表）。
3.1 CSScss样式表有二种添加的方法 如图所示：
3.2 除去li产生的黑点儿:
li{ list-style: none; }
4. 根据所述流程 ，运作一下 如下图所显示：
5. 设置一下导航条的款式 。
- 设置一下目录ul 的总宽 ，高度，背景色,文字位置垂直居中（margin：0 auto） 。
Li 一样的设置高度 。
-
除掉黑点儿 ，再设置文本的色调 ，高度 ，内边距 ，（本人爱好 看见舒适就可以了）
-
设置文本的尺寸 ，除掉下横线（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共享资源世家
想学习培训大量Python爬虫技术与大数据挖掘专业知识 ，可前去行业网站：http://pdcfighting.com/
