CSS_之浮动设置

深碍√TFBOYSˉ_ 2022-01-12 02:43 216阅读 0赞

## 实现案例 ##

要实现如上图所示，（把 HOME ABOUT GARLLERY EVENT CONACT 展示在导航栏汇中）

### html代码实现 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="../css/index2.css">
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div class="header">
        <div class="logo"><img src="../images/logo.png"></div>
        <div class="link_page">
            <ul>
                <li>home</li>
                <li>home</li>
                <li>home</li>
                <li>home</li>
                <li>home</li>
                <li>home</li>
            </ul>
        </div>
    </div>
    </body>
    </html>
    复制代码

### css代码实现 ###

* {
        margin: 0px;
        padding: 0px;
    }
    
    .header {
        width: 100%;
        height: 70px;
        background-color: #07cbc9;
    }
    .header .logo img {
        margin-top: 11px;
        margin-left: 100px;
    }
    .header .logo{
        float: left;
        position: relative;
    }
    .header .link_page{
        float: right;
        position: relative;
    }
    .header .link_page ul li{
        float: left;
        position: relative;
        margin-top: 5%;
        margin-right: 30px;
        list-style: none;
    }
    .logo .link_page .blo {
        width: 30px;
        height:  70px;
        background: black;
    }
    a{
        text-decoration: none;
        color: black;
    }
    复制代码

### 实现鼠标移动变背景颜色 ###

可以在css中添加

.header .link_page a:hover {
        background: black;
        color: white;
        height: 70px;
        width: 30px;
    }
    复制代码

转载于:https://juejin.im/post/5d0839626fb9a07ee30e1a5b