html如何利用ul/li制作横向导航栏css做导航?

 时间:2024-10-19 10:49:17

1、新建一个html网页,在body中输入【<ul> <li><a href="#" target="_blank">首页</a></li></ul>】。保存后刷新网页可以看到无序列表已经由第一项了。

html如何利用ul/li制作横向导航栏css做导航?

3、在head中添加【<style type="text/css">ul{list-style-type:none;}</style>】,这样就可以去掉无序列表前面的原点了。

html如何利用ul/li制作横向导航栏css做导航?

5、定义a标签样式【a{width: 80px; height: 20px;padding: 10px 0;text-锾攒揉敫align: center; background: #d4d4d4;display: block;}】。可以看到文字有距离了,但是文字是蓝色的,并且有下划线;三个列表项中间还没有空隙。

html如何利用ul/li制作横向导航栏css做导航?

7、然后加入以下代码【 color: #000000; text-decoration: none;】,定义字体为黑色,下划线去掉。这样就像导航了把~

html如何利用ul/li制作横向导航栏css做导航?
  • 如何在HTML中插入图片
  • 实现整个html居中最简单方法
  • 网页设计HTML中如何插入背景图片
  • css如何修改ul的li之间的间隔
  • html图片如何居中
  • 热门搜索
    坝美最佳旅游时间 毕棚沟最佳旅游时间 宝安旅游租车 云南昆明旅游攻略 海南旅游必去景点 去日本旅游注意事项 11月份去哪里旅游好 巴黎旅游攻略 张家界的旅游景点 重庆旅游大巴租赁