码迷,mamicode.com
首页 > Web开发 > 详细

html5(未完待续)

时间:2015-07-01 18:54:05      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:

html

<!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="" ></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>

css

 /* 样式初始化*/
*{
    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;
}

html5(未完待续)

标签:

原文地址:http://my.oschina.net/u/1994482/blog/472990

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!