CSS基础-26CSS常用操作-导航栏

<!DOCTYPE html>
<!--CSS常用操作-导航栏--> <html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css05.css" type="text/css" rel="stylesheet" >
</head>
<body>
    <ul>
        <li><a href="">导航1</a></li>
        <li><a href="">导航2</a></li>
        <li><a href="">导航3</a></li>
        <li><a href="">导航4</a></li>

    </ul>

</body>

</html>

css:

/*垂直导航栏*/
/*ul{*/
    /*去掉列表前的黑点*/
    /*list-style-type: none;*/
    /*margin: 0px;*/
    /*padding: 0px;*/

/*}*/
/*设置a标签*/
/*a:link,a:visited{*/
    /*去掉连接下的下滑线*/
    /*text-decoration: none;*/
    /*块状显示*/
    /*display: block;*/
    /*背景颜色*/
    /*background-color: #b3d4fc;*/
    /*字体颜色*/
    /*color: brown;*/
    /*文字居中*/
    /*text-align: center;*/
    /*宽度*/
    /*width: 50px;*/
/*}*/
/*鼠标放上去时,背景的变化*/
/*a:active,a:hover{*/
    /*background-color: #ffff00;*/

/*}*/

/*------------------------------------------------------------*/
/*水平导航栏*/

ul{
    /*去掉列表前的黑点*/
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background-color: aqua;
    width: 300px;
    text-align: center;

}
/*设置a标签*/
a:link,a:visited{
    /*文字加粗*/
    font-weight: bold;
    /*去掉连接下的下滑线*/
    text-decoration: none;
    /*块状显示*/
    /*display: block;*/
    /*背景颜色*/
    background-color: #b3d4fc;
    /*字体颜色*/
    color: brown;
    /*文字居中*/
    text-align: center;
    /*宽度*/
    width: 50px;
}
/*鼠标放上去时,背景的变化*/
a:active,a:hover{
    background-color: #ffff00;

}
li{
    display: inline;
    padding: 3px;
    padding-left: 5px;
    padding-right: 5px;
}

你可能感兴趣的:(CSS基础-26CSS常用操作-导航栏)