<meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="varbar.css"/> <!-- 调用css --> <title>导航栏</title> </head> <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> </body> </html>


varbar.css


body
    text-align:center;      /* 文字居中 */
    list-style-type:none; /* ul前面的点  */
    margin:0px 0px;     /* 到边框的距离 */
.menu
    background:#404040; /* 导航条背景的颜色  */     
    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; /* 连接被点之后没有下划线  */