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

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;             《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】  /* 去掉连接下划线 */

font-size:25px; /* 字体大小 */

color: #FFFFFF; /* 字体颜色 */

}

.nav li a:hover

{

background-color: #D8D8D8;         /* 选中的文字块的颜色 */

text-decoration:none; /* 选中时去掉连接下划线 */

}

.nav li a:link{

text-decoration:none; /* 连接被点之后没有下划线 */
}
效果