前端实例2——横向导航栏（css样式）

水深无声 2023-02-08 15:52 26阅读 0赞

**效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDE5MDE2_size_16_color_FFFFFF_t_70]

**HTML**

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>横向导航栏</title>
        <link rel="stylesheet" href="15head.css">
    </head>
    <body>
        <div class="head-back">
            <div class="head">
                <div class="head-left">
                    <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>
                </div>
                <div class="head-right">
                    <ul>
                        <li><a href="">注册</a></li>
                        <li>/</li>
                        <li><a href="">登录</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    </html>

**CSS**

*{ 
      margin: 0;
        padding: 0;
    }
    a{ 
        text-decoration: none;
    }
    li{ 
        list-style-type: none;
    }
    .head-back{ 
        background-color: black;
    
    }
    .head{ 
        width: 80%;
        /*background-color: red;*/
        /*padding: 10px 0;*/
        margin: 0 auto;
    }
    .head:after{ 
        content: "";
        clear: both;
        display: block;
    }
    .head-left li{ 
        float: left;
    
    }
    .head-left li:hover{ 
        background-color: red;
    }
    .head-right li{ 
        float: right;
        padding: 10px 3px;
        color: white;
    }
    .head-left a,.head-right a{ 
        color: white;
    }
    .head-left a{ 
        display: block;
        padding: 10px 15px;
    }
    .head-right a:hover{ 
        color: orange;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDE5MDE2_size_16_color_FFFFFF_t_70]: /images/20230208/9947267c378c4d409645b164ba5696a8.png