分享

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

 文炳春秋 2020-09-02
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标签的内容时的文字颜色【一、项目背景】

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

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

【二、项目准备】

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

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

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

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

【三、项目实施】

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

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

注:

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多