2024-02-16 分类: 网站建设
【一、项目背景】
让更多的人去学习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;)。
下面是详细备注
ulli{float: left; 把内容左浮动,这样可以横向排列width:100px; 设置每个li的宽height:30px; 设置每个li的高background-color:pink 设置li的背景颜色为粉色 border:1pxsolid6495ED; 设置li的边框颜色以及边框大小text-align: center; 设置li中的文字样式为居中line-height:30px; 设置li中文字举例上边框的高度 } ulli:hover{background-color: aqua;} 设置将鼠标放到li时的背景颜色ulli:hovera{color: black;} 设置将鼠标放到li中的a标签的内容时的文字颜色6. 完整代码,如下图所示。
7. 运行之后,效果图如下图所示。
【四、总结】
1. Html能做的效果非常多,希望你耐心的去学习,同时希望碰到问题主动搜索,尝试一下总会有解决方法。
2. 如果需要本文源码,请在公众号后台回复导航栏三个字获取。
看完本文有收获?请转发分享给更多的人
IT共享之家
想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/
非常感谢您读完创新互联的这篇文章:"一篇文章教会你如何制做精美导航条",仅为提供更多信息供用户参考使用或为学习交流的方便。我们公司提供:网站建设、网站制作、官网建设、SEO优化、小程序制作等服务,欢迎联系我们提供您的需求。
本文名称:一篇文章教会你如何制做精美导航条
文章链接:/news10/317510.html
成都网站建设公司_创新互联,为您提供营销型网站建设、服务器托管、小程序开发、网站内链、网站收录、做网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容