HTML+CSS实现导航栏且文字居中

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/helongqiang/article/details/80117032

导航栏文字居中,注释很多,希望能节省大家的时间。

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; /* 连接被点之后没有下划线  */
}

效果


博主设置当前文章不允许评论。

没有更多推荐了,返回首页