master

分支 (12)

标签 (2)

管理

管理

master

revert-merge-238-master

5.0.1

5.0.0

4.7.2

4.7.1

4.7.0

4.6.5

4.6.4

4.6.3

4.6.2

4.6.1

5.1

4.6.3

MCMS
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div class="header">
            <div class="content">
                <div class="logo">
                    <img src="./zihang1.png" alt="zihang">
                </div>
                <div class="nav">
                    <ul class="navFirst">
                        <li ><a href="">出生</a>
                            <div class="suv">
                                <div id="triangle-up"></div>
                                <ul class="sub_nav">
                                    <li>菜单一</li>
                                    <li>菜单一</li>
                                    <li>菜单一</li>
                                </ul>
                            </div>
                        </li>


                        <li > <a href="">周年</a></li>
                    </ul>

                </div>
            </div>
        </div>
        <div class="body">

            <div class="content">
                <div class="left">左边</div>
                <div class="right">右边</div>
            </div>

        </div>

</body>
<style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
        color: #FFF;
        font-weight: 100;
        font-size: 32px;
        padding: 0;
        margin: 0;
        text-shadow: 0 0 10px #639c90, 0 0 20px #6c938f, 0 0 30px #6d7a69;
    }
    ul{
        list-style: none;
    }
    .body{
        width: 1200px;
        min-height: 800px;
        background-color: #8888bb;
        margin: 0 auto;
    }
    .header{
        background-color: #afb959;
        height: 80px;
    }
    .header .content{
        width: 1200px;
        height: 80px;
        margin: 0 auto;
    }
    .header .content .logo{
        width: 200px;
        height: 80px;
    }
    .header .content .logo img{
        width: 165px;
    }
    .header .nav .navFirst{
        padding: 0px;
        margin: 0 auto;
        width: 400px;
        height: 80px;
        list-style: none;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        line-height: 80px;
    }
    #triangle-up {
        width: 0px;
        height: 0px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 10px solid red;
        position: relative;
        left: 45px;
    }
    .header .nav > .navFirst> li{
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100px;
        height: 80px;
        background-color: yellow;
        text-align: center;
    }
    .header .nav > .navFirst> li >.suv{
        z-index: 100;
        position:relative;
        list-style: none;
        text-align: left;
        display: none;

    }
    .nav .navFirst li:hover .suv{
        display: block;
    }
    .header .nav > .navFirst> li ul{
        list-style: none;
        background-color: yellow;
        text-align: left;

    }
    .header .nav > .navFirst> li >.suv >ul li{
        margin:0px;
        padding:0px;
        width: 100px;
        text-align: left;
        margin-left: -40px;
        text-align: center;
    }
    .content{
        display: flex;
        flex-direction: row;
    }
    .content .left{
        width: 800px;
        min-height: 800px;
        background-color: #5cb9bb;
    }
    .content .right{
        width: 400px;
        min-height: 800px;
        background-color: #a3b2bb;
    }
</style>
</html>