html5(未完待續)

時間 2019-12-10

原文原文鏈接

htmlcss

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>

    <header>
        <div class="header border center">
            <div class="logo">
                <a href="index.html"><img src="" alt=""></a>
            </div>

            <nav>
                <ul>
                    <li><a href=""><strong>電影臺詞</strong></a> </li>
                    <li><a href=""><strong>電視劇臺詞</strong></a> </li>
                    <li><a href=""><strong>英文臺詞</strong></a> </li>
                    <li><a href=""><strong>搞笑臺詞</strong></a> </li>
                    <li><a href=""><strong>經典臺詞</strong></a> </li>
                    <li><a href=""><strong>網絡臺詞</strong></a> </li>

                </ul>
            </nav>

        </div>
    </header>

    <div id="container" class="border center">
        <article class="bg">


        </article><aside class="bg">

        </aside>
    </div>

    <footer class="bg">

    </footer>

</body>
</html>

csshtml

 /* 樣式初始化*/
*{
    margin: 0px;
    padding: 0px;
}
/*公用樣式*/
.border{
    border: 1px solid #ff0000;
}
.center{
    margin: 0px auto;
}

.bg{
    background: yellowgreen;
}

body{
    background: #FBFBFB;
}

header{
    width: 100%;
    height: 60px;
    background: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;
}
#container{
    width: 1200px;
    height: 800px;
    margin-top: 70px;
}

#container article{
    width: 821px;
    height: 600px;
    display: inline-block;
}

#container aside{
    width: 354px;
    height: 600px;
    display: inline-block;
    margin-left: 20px;
}

footer{
    width: 1198px;
    height: 115px;
    margin: 10px auto;
}

header .header{
    width: 1200px;
    height: 60px;
    vertical-align: middle;
}
header .header nav{
    width: 630px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
}
header .header nav ul li{
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    display: inline-block;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。