<!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 in/up</a>
</div>
<div class="header_01_04">
<a href="#">what's on</a>
</div>
<div class="header_01_05">
<a href="#">watchlist</a>
</div>
<div class="header_01_06">
<a href="#">news & 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=""/> <span>Today's</span> <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=""/> <span>Photo</span> <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=""/> <span>Trending</span> <span>Full 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 kit</a></li>
<li><a href="#">mobile</a></li>
</ul>
</div>
<div class="footer_01_01_02_02_02">
<p>©2016 CBS sadfasdf</p>
</div>
<div class="footer_01_01_02_02_03">
<ul>
<li><a href="#">help</a></li>
<li><a href="#">media 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 TV. 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;
}
浙公网安备 33010602011771号