下面是经由过程html的无序标签ul共同css样式来完当作一个导航栏的功能 。
文章插图
方式/
1起首建立一个html的是文件 。
文章插图
2然后建立一个div ， 并为它的id属人命名为menu
文章插图
3在该div下建立一个无序标签ul,并在ul标签添加列表项标签内容 。
文章插图
4此时因为没有添加div和a标签的css样式 ， 所以结果如下 ， 这显然不是我们的需要 。
文章插图
5在html头部添加css 。 经由过程id选择器添加导航栏div的样式 ， 包罗border边框样式 ， background-color布景颜色 ， 宽、高 。 具体仍是看你小我的需要 。
添加了div的css样式之后 ， 跟我们的需如果有点像了 。 但列表纵标的目的是不可的 。
文章插图
文章插图
6然后我们经由过程层级选择器 ， 将纵标的目的列表改当作横项 。 display是显示结果 ， inline见名知义显示在一行上 。 再改变颜色
改完之后如图 ， 根基上可以了 。
文章插图
文章插图
7当然有需要我们也可以去失落a标签所带来的下划线 。 再把字体之间的距离调整一下会更都雅 。
经由过程
text-decoration:none;去失落下划线 。 然后html中经由过程 （占一个字符 ， 所以两个占一个中文字）转义字符添加空格 ， 如许可以拉年夜字体间的距高 。
文章插图
文章插图
8【如何使用html的无序列表ul和css完成导航栏】如许导航栏的结果根基就出来 ， 具体结果如下固然可能还有点欠好看 ， 但也差不多可以了 。
文章插图
以上内容就是如何使用html的无序列表ul和css完成导航栏的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- QQ蓝钻如何开通
- 卧室门对着厕所如何调整布局？通常有这几种方法！
- html5的基本用法
- 如何开通QQ绿钻
- 装修风水｜卫生间门直对床，如何破解！？
- 卧室门正对厕所门，如何化解不晦气？
- QQ如何开通黄钻特权
- word如何插入封面最新教程
- word下边有一条线，不是页脚的那条线，如何去掉
- 如何修改Word中的样式