html css学习笔记-水平与垂直导航

最新推荐文章于 2024-04-26 19:19:48 发布

绿叶清风

最新推荐文章于 2024-04-26 19:19:48 发布

阅读量1.2k

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/PZ0605/article/details/45766645

版权

html/css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*ul{*/
            /*list-style-type: none;*/
            /*margin: 0px;*/
            /*padding: 0px;*/
        /*}*/
        /*去掉下划线*/
        /*a:link,a:visited{*/
            /*text-decoration: none;*/
            /*display: block;*/
            /*background-color: darkgoldenrod;*/
            /*color: #ffffff;*/
            /*width: 50px;;*/
        /*}*/
        /*当鼠标放上去时*/
        /*a:hover,a:active{*/
            /*background-color: red;*/
        /*}*/

        /*水平导航*/
        ul{
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            width: 400px;;
            text-align: center;
            background-color: darkgoldenrod;
        }
        /*水平显示，通过padding把导航变宽*/
        li{
            display: inline;
            padding:3px;
            padding-right: 5px;
           padding-left: 5px;;
        }
        /*去掉下划线*/
        a:link,a:visited{
            text-decoration: none;

color: #ffffff;
            width: 50px;;
        }
        /*当鼠标放上去时*/
        a:hover,a:active{
            background-color: red;
        }
    </style>
</head>
<body>

<ul>
    <li><a href="#">导航一</a></li>
    <li><a href="#">导航2</a></li>
    <li><a href="#"> 导航3</a></li>
    <li><a href="#">导航4</a></li>
</ul>
</body>
</html>

绿叶清风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html css学习笔记-水平与垂直导航

/*ul{*/ /*list-style-type: none;*/ /*margin: 0px;*/ /*padding: 0px;*/ /*}*/ /*去掉下划线*/ /*a:link,a:visited{*/ /*text-decora
复制链接

扫一扫

专栏目录