【一、项目背景】
让更多的人去学习html，以广东科技学院的导航栏为例， 教大家怎么去做一个横向的导航栏。
【二、项目准备】
准备一个编程的软件Dreamweaver，打开软件点击文件新建一个叫导航栏的项目，如下图所示。
点击确定之后，会弹出下图。
【三、项目实施】
1. 在
标签里面写下一个框架：注：
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共享之家
想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/
非常感谢您读完创新互联的这篇文章："Dreamweaver网站制作(Dreamweaver网站制作)"，仅为提供更多信息供用户参考使用或为学习交流的方便。我们公司提供：网站建设、网站制作、官网建设、SEO优化、小程序制作等服务，欢迎联系我们提供您的需求。
售后响应及时
7×24小时客服热线
数据备份
更安全、更高效、更稳定
价格公道精准
项目经理精准报价不弄虚作假
合作无风险
重合同讲信誉，无效全额退款
网站设计包含服务
网站制作流程
有效沟通方式
售后服务
+ 品牌创意
+ 宣传视频
+ 大陆官网
+ 外贸官网
+ 移动应用
+ 形象设计
广元网站建设
广元网站优化
广元网站制作
广元网站设计
广元网络营销
广元网站维护
公司简介
我们的观点
为什么选择我们
企业文化
支付方式
联系方式
在线留言
提交意向表
在线客服
来访路线
