（十三）使用无序列表制作导航栏

效果：

代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        ul{
            list-style: none;    //隐藏自带的属性（去除圆圈）
        }
        li{
ps：此处得注意先后顺序。比如背景颜色在最前面，文字居中在左浮动和高宽得后面

            background-color: red;    //背景颜色
            float: left;    //左浮动（竖排的无序列表会变成横排）
            height: 30px;
            width: 100px;
            text-align: center;    //文字居中
            color: #000f;
            border-radius: 15px 15px 0 0 ;    //每个li元素的圆角
            
        }
        li a{
            text-decoration: none;    //a标签的下划线
        }
        li a:hover{
            background-color: green;    //hover效果
            color: yellow;

        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#">首页</a></li>        
        <li><a href="#">今日活动</a></li>        
        <li><a href="#">产品展示</a></li>        
        <li><a href="#">售后服务</a></li>        
        <li><a href="#">联系我们</a></li>        
    </ul>
</body>
</html>

 

posted @ 2018-04-26 23:08  花花妹子。  阅读(976)  评论(0)    收藏  举报