制作简易导航栏,思路明细
12/100
发布文章
qq_53810245
未选择文件
new
思路:
首先用HTMl定义一套列表机制,该列表机制均由a标签控制,如下:
<div id="menu"> <ul id="list"> <li> <a href="#">首页</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> <li> <a href="#">JavaScript</a> </li> <li> <a href="#">关于</a> </li> <li> <a href="#">帮助</a> </li> </ul> </div>
- 使用CSS样式放置在一行
list-style-type: none;
:去掉圆点width: 100px;
:宽度height: 50px;
:高度line-height: 50px;
:行高background-color:beige;
:背景色text-align: center;
:文本居中float: left;
:整一行上text-decoration: none;
:去掉下划线- 使用CSS样式放置在一行
让导航栏动起来
<style> #list li { list-style-type: none; width: 100px; height: 50px; line-height: 50px; /*background-color: beige;*/ text-align: center; float: left; } #list li:hover{ background-color: red; } #list li a { text-decoration: none; } #menu{ width: 700px; height: 50px; background-color: beige; margin: 0 auto; } </style>
创作不易,大侠请留步… 动起可爱的双手,来个赞再走呗 (๑◕ܫ←๑)
思路:
首先用HTMl定义一套列表机制,该列表机制均由a标签控制,如下:
在这里插入图片描述
使用CSS样式放置在一行
在这里插入图片描述
list-style-type: none;:去掉圆点
width: 100px;:宽度
height: 50px;:高度
line-height: 50px;:行高
background-color:beige;:背景色
text-align: center;:文本居中
float: left;:整一行上
text-decoration: none;:去掉下划线
让导航栏动起来
在这里插入图片描述