CSS基础-26CSS常用操作-导航栏_导航栏style type,reciprocal-优快云博客

本文链接：https://blog.youkuaiyun.com/zhaihaohao1/article/details/47208303

本文介绍如何使用CSS为网站创建垂直及水平导航栏。通过调整样式属性，如背景颜色、字体颜色和文字对齐方式等，可以实现美观且实用的导航栏效果。文章详细解释了各个CSS属性的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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;
}