HTML初学（五）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/css0620.css"/>
</head>
<body>
<header class="header">
    <div class="header_01">
        <div class="header_01_01">
            <img src="./img/logo.png" alt=""/>
        </div>
        <div class="header_01_02">
            <input type="text"/>
            <a href="#"></a>
        </div>
        <div class="header_01_03">
            <a href="#">sign&nbsp;in/up</a>
        </div>
        <div class="header_01_04">
            <a href="#">what's&nbsp;on</a>
        </div>
        <div class="header_01_05">
            <a href="#">watchlist</a>
        </div>
        <div class="header_01_06">
            <a href="#">news&nbsp;&&nbsp;features</a>
        </div>
    </div>
</header>
<div class="body">
    <div class="body_01">
        <div class="body_01_01">
            <p><img src="./img/section_icon.png" alt=""/>&nbsp;<span>Today's</span>&nbsp;<span>News</span></p>
        </div>
        <div class="body_01_02">
            <img src="./img/160113-news-chicago-hp-lg.jpg" alt=""/>
            <p>adsf asdfsa asdf asfd asdf asdfasdfasdf asdfasdf</p>
            <p>asdf asdffasdfasd asdf</p>
        </div>
        <div class="body_01_03">
            <div class="body_01_03_01">
                <img src="./img/170x170.png" alt=""/>
                <p>asfd asdf asdf</p>
                <p>sdafasdf asdfasdf</p>
            </div>
            <div class="body_01_03_02">
                <img src="./img/170x170.png" alt=""/>
                <p>asfd asdf asdf</p>
                <p>sdafasdf asdfasdf</p>
            </div>
        </div>
        <div class="body_01_04">
            <img src="./img/160113-news-heroes-hp-sm.jpg" alt=""/>
            <p><span>asdf</span> asdfdf sadsfasd fasd fasdfa sdfasdf asdfas dfasdf<br/><span>adfasdfasdf</span></p>
        </div>
    </div>
    <div class="body_02">
        <div class="body_02_01">
            <p><img src="./img/section_icon.png" alt=""/>&nbsp;<span>Photo</span>&nbsp;<span>Gallery</span></p>
        </div>
        <div class="body_02_02">
            <img src="./img/gettyimages-504404784.jpg" alt=""/>
            <p>dsf asdfasdf asdfadf fasdf</p>
            <p>asdf adsfasd sadfa adsfad fasdf</p>
        </div>
    </div>
    <div class="body_03"></div>
    <div class="body_04">
        <div class="body_04_01">
            <p><img src="./img/section_icon.png" alt=""/>&nbsp;<span>Trending</span>&nbsp;<span>Full&nbsp;Episodes</span></p>
        </div>
        <div class="body_04_02">
            <div class="body_04_02_01">
                <img src="./img/16958493_70x93.jpg" alt=""/>
                <p>fasdfad</p>
            </div>
            <div class="body_04_02_02">
                <img src="./img/16958493_70x93.jpg" alt=""/>
                <p>fasdfad</p>
            </div>
            <div class="body_04_02_03">
                <img src="./img/16958493_70x93.jpg" alt=""/>
                <p>fasdfad</p>
            </div>
            <div class="body_04_02_04">
                <img src="./img/16958493_70x93.jpg" alt=""/>
                <p>fasdfad</p>
            </div>
            <div class="body_04_02_05">
                <img src="./img/16958493_70x93.jpg" alt=""/>
                <p>fasdfad</p>
            </div>
            <div class="body_04_02_06">
                <img src="./img/16958493_70x93.jpg" alt=""/>
                <p>fasdfad</p>
            </div>
        </div>
    </div>
</div>
<footer class="footer">
    <div class="footer_01">
        <div class="footer_01_01">
            <div class="footer_01_01_01"></div>
            <div class="footer_01_01_02">
                <div class="footer_01_01_02_01">
                    <div class="footer_01_01_02_01_01">
                        <a href="#"></a>
                    </div>
                    <div class="footer_01_01_02_01_02">
                        <a href="#"></a>
                    </div>
                </div>
                <div class="footer_01_01_02_02">
                    <div class="footer_01_01_02_02_01">
                        <ul>
                            <li><a href="#">help</a></li>
                            <li><a href="#">media&nbsp;kit</a></li>
                            <li><a href="#">mobile</a></li>
                        </ul>
                    </div>
                    <div class="footer_01_01_02_02_02">
                        <p>&copy;2016&nbsp;CBS&nbsp;sadfasdf</p>
                    </div>
                    <div class="footer_01_01_02_02_03">
                        <ul>
                            <li><a href="#">help</a></li>
                            <li><a href="#">media&nbsp;kit</a></li>
                            <li><a href="#">mobile</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer_01_02">
            <div class="footer_01_02_01">
                <p>Watch&nbsp;TV.&nbsp;Anytime.<br/>Anywhere.</p>
                <p>Download asdfafasdfa</p>
                <div class="footer_01_02_02">
                    <div class="footer_01_02_02_01">
                        <a href="#"></a>
                    </div>
                    <div class="footer_01_02_02_02">
                        <a href="#"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
</body>
</html>

body,header,div,footer,div,input,a,ul,li,p{
    margin: 0;
    padding: 0;
}
header{
    width: 100%;
    height: 100px;
    background-color: #f2f3f7;
}
.header_01{
    width: 100%;
    height: 60px;
    background-color: #191c1f;
    overflow: hidden;
}
.header_01 div{
    float: left;
    height: 100%;
}
.header_01_01{
    background-color: red;
}
.header_01_01 img{
    height: 100%;
}
.header_01_02 input{
    border: 0px;
    outline: none;
    background-color: #303336;
    height: 100%;
    width: 252px;
    padding-left: 4px;
}
.header_01_02 a{
    display: block;
    height: 100%;
    float: right;
    width: 52px;
    background-image: url("../img/sprite.png");
    background-repeat: no-repeat;
    background-position: -116px -160px;
    border-right: 1px solid #282a2d;
}
.header_01_03{
    width: 197px;
    border-left: 1px solid #242729;
    border-right: 1px solid #1e2224;
    background-color:#25282a;
}
.header_01_03 a{
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 60px;
    padding-left: 50px;
}
.header_01_04{
    width: 162px;
    border-left: 1px solid #1a1e20;
    border-right: 1px solid #16181b;
    background-color:#191c1f;
}
.header_01_05{
    width: 162px;
    border-left: 1px solid #1a1e20;
    border-right: 1px solid #16181b;
    background-color:#191c1f;
}
.header_01_06{
    width: 162px;
    border-left: 1px solid #1a1e20;
    border-right: 1px solid #16181b;
    background-color:#191c1f;
}
.header_01_04 a{
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 60px;
    padding-left: 38px;
}
.header_01_05 a{
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 60px;
    padding-left: 36px;
}
.header_01_06 a{
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 60px;
    padding-left: 10px;
}
.footer{
    width: 100%;
    height: 240px;
    background-color: #383d43;
    overflow: hidden;
}
.footer_01{
    width: 1200px;
    height: 210px;
    padding-top: 30px;
    margin: auto;
}
.footer_01 div{
    float: left;
}
.footer_01_01{
    width: 50%;
    height: 100%;
    float: left;
}
.footer_01_02{
    width: 50%;
    height: 100%;
    position: relative;
}
.footer_01_01_01{
    width: 81px;
    height: 60px;
    background: url("../img/section_icon.png");
    background-size: 100%;
}
.footer_01_01_02{
    width: 75%;
    height: 80%;
    margin-left: 50px;
}
.footer_01_01_02_01{
    width: 100%;
    height: 23px;

}
.footer_01_01_02_01_01{
    float: left;
    width: 24px;
    height: 23px;
}
.footer_01_01_02_01_01 a:hover{
    background-position:-35px -4px;
}
.footer_01_01_02_01_01 a{
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/sprite.png");
    background-position: -4px -4px;
}
.footer_01_01_02_01_02{
    float: left;
    width: 24px;
    height: 23px;
}
.footer_01_01_02_01_02 a:hover{
    background-position:-100px -4px;
}
.footer_01_01_02_01_02 a{
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/sprite.png");
    background-position: -72px -4px;
}
.footer_01_01_02_02_01{
    width: 100%;
}
.footer_01_01_02_02_01 ul li{
    float: left;
    list-style: none;
    text-transform: capitalize;
}
.footer_01_01_02_02_01 ul li a{
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
}
.footer_01_01_02_02_01 ul li:nth-child(1){
    padding-right: 10px;
    border-right: 1px solid #40454b;
}
.footer_01_01_02_02_01 ul li:nth-child(2){
    padding-right: 10px;
    padding-left: 10px;
    border-right: 1px solid #40454b;
}
.footer_01_01_02_02_01 ul li:nth-child(3){
    padding-left: 10px;
}
.footer_01_01_02_02_02{
    color: #4c545b;
    font-size: 12px;
    width: 100%;
    line-height: 0;
    margin-top: 10px;
    margin-bottom: 6px;
}
.footer_01_01_02_02_03{
    width: 100%;
}
.footer_01_01_02_02_03 ul li{
    float: left;
    list-style: none;
    text-transform: capitalize;
}
.footer_01_01_02_02_03 ul li a{
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
}
.footer_01_01_02_02_03 ul li:nth-child(1){
    padding-right: 10px;
    border-right: 1px solid #40454b;
}
.footer_01_01_02_02_03 ul li:nth-child(2){
    padding-right: 10px;
    padding-left: 10px;
    border-right: 1px solid #40454b;
}
.footer_01_01_02_02_03 ul li:nth-child(3){
    padding-left: 10px;
}
.footer_01_02_01{
    width: 80%;
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -240px;
}
.footer_01_02_01 p:nth-child(1){
    font-size: 18px;
    color: #ffffff;
}
.footer_01_02_01 p:nth-child(2){
    font-size: 12px;
    color: #4f565a;
}
.footer_01_02_02{
    width: 100%;
}
.footer_01_02_02_01{
    width: 50%;
    height: 49px;
}
.footer_01_02_02_01 a{
    display: block;
    width: 150px;
    height: 100%;
    background: url("../img/app_store.png");
}
.footer_01_02_02_02{
    width: 50%;
    height: 49px;
    margin-left: -80px;
}
.footer_01_02_02_02 a{
    display: block;
    width: 150px;
    height: 100%;
    background: url("../img/google_play.png");
}
.body{
    width: 1170px;
    margin: auto;
    clear: both;
    overflow: hidden;
}
.body>div{
    float: left;
    overflow: hidden;
    margin-bottom: 30px;
}
.body_01{
    width: 370px;
    margin-right: 30px;
    border-bottom: 1px solid #dadada;
    padding-bottom: 10px;
}
.body_02{
    width: 370px;
    border-bottom: 1px solid #dadada;
    padding-bottom: 10px;
}
.body_03{
    width: 370px;
    margin-left: 30px;
}
.body_01_01{
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
}
.body_01_01 span:nth-child(3){
    color: red;
}
.body_01_02{
    width: 100%;
}
.body_01_02 p:nth-child(2){
    font-size: 20px;
    text-transform: capitalize;
    word-wrap: break-word;
    margin: 10px 0;
}
.body_01_02 p:nth-child(3){
    font-size: 12px;
}
.body_01_03{
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
}
.body_01_03_01{
    width: 170px;
    float: left;
}
.body_01_03_01 img{
    width: 170px;
    height: 170px;
    margin-bottom: 10px;
}
.body_01_03_01 p:nth-child(2){
    font-weight: 800;
    text-transform: capitalize;
}
.body_01_03_01 p:nth-child(3){
    text-transform: capitalize;
}
.body_01_03_02{
    width: 170px;
    float: right;
}
.body_01_03_02 img{
    width: 170px;
    height: 170px;
    margin-bottom: 10px;
}
.body_01_03_02 p:nth-child(2){
    font-weight: 800;
    text-transform: capitalize;
}
.body_01_03_02 p:nth-child(3){
    text-transform: capitalize;
}
.body_01_04{
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
}
.body_01_04 img{
    float: left;
}
.body_01_04 p{
    word-wrap: break-word;
    padding-left: 90px;
    padding-top: 5px;
    text-transform: capitalize;
    font-weight: 800;
}
.body_01_04 span:nth-child(1){
    font-style: oblique;
}
.body_01_04 span:nth-child(3){
    font-weight: 500;
    font-style: normal;
}
.body_02_01{
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
}
.body_02_01 span:nth-child(3){
    color: red;
}
.body_02_02{
    width: 100%;
    margin-bottom: 10px;
}
.body_02_02 p:nth-child(2){
    font-size: 30px;
    font-weight: 800;
}
.body_02_02 p:nth-child(3){
    font-size: 16px;
    margin-bottom: 10px;
}
.body_04{
    width: 100%;
    overflow: hidden;
    border-top: 1px solid #dadada;
    padding-top: 10px;
}
.body_04_01{
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
}
.body_04_01 span:nth-child(3){
    color: red;
}
.body_04_02 div{
    float: left;
    margin-right: 30px;
    width: 170px;
}
.body_04_02_06{
    margin-right: 0px !important;
}
.body_04_02 img{
    width: 100%;
}
.body_04_02 p{
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
}

posted @ 2016-06-21 01:31 奕军阅读(119) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

奕军

HTML初学（五）

公告