HTML+CSS实现导航栏且文字居中
导航栏文字居中，注释很多，希望能节省大家的时间。
varbar.html
<DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="varbar.css"/> <!-- 调用css --> <title>导航栏</title> </head> <body> <div class="menu"> <!-- class选择器 --> <div class="nav"> <ul> <!-- ul标签 --> <li><a href="#">导航</a></li> <!-- li标签 --> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> <li><a href="#">导航</a></li> </ul> </div> </div> </body> </html>
varbar.css
body
{
text-align:center; /* 文字居中 */
}
ul
{
list-style-type:none; /* ul前面的点 */
}
*
{
margin:0px 0px; /* 到边框的距离 */
}
.menu
{
background:#404040; /* 导航条背景的颜色 */
}
.nav
{
margin:0 auto; /* 导航栏文字的位置 */
width:700px; /* 和文字宽度有关，不能小于文字宽度的总和 */
height:70px; /* 导航栏的宽度 */
}
.nav a
{
float:left; /* 导航栏的位置配置 */
width:140px; /* 选中的文字块的长度 */
line-height:70px; /* 选中的文字块的宽度 */
text-decoration: none; /* 去掉连接下划线 */
font-size:25px; /* 字体大小 */
color: #FFFFFF; /* 字体颜色 */
}
.nav li a:hover
{
background-color: #D8D8D8; /* 选中的文字块的颜色 */
text-decoration:none; /* 选中时去掉连接下划线 */
}
.nav li a:link{
text-decoration:none; /* 连接被点之后没有下划线 */
}
效果
上一篇：
IDEA上Java项目控制台中文乱码