image.png
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今日头条</title>
<link rel="stylesheet" href="css/layout-news.css">
</head>
<body>
<div id="content">
<div id="navigation">
<div>
<img src="img/news.png">
</div>
<div class="list">
<span><a href="#">推荐</a></span>
<span><a href="#">热点</a></span>
<span><a href="#">图片</a></span>
<span><a href="#">娱乐</a></span>
<span><a href="#">游戏</a></span>
<span><a href="#">体育</a></span>
<span><a href="#">财经</a></span>
<span><a href="#">汽车</a></span>
</div>
</div>
<div id="hotsearch">
<h2>今日热搜</h2>
<ol>
<li>颖儿付辛博背包式秀恩爱</li>
<li>马云 我每天都睡不好</li>
<li>银联双12全民5折</li>
<li>第一有那么重要吗</li>
<li>高中生公开拥抱被开除</li>
<li>罗晋为唐嫣主持生日会</li>
<li>上海迪士尼 门票提价</li>
<li>大学的生活让你懂得什么道理</li>
</ol>
</div>
<div id="main">
<div id="search">
<form action="https://www.toutiao.com/search/">
<input type="text" class="content" name="keyword">
<input type="submit" value="搜索" class="button">
</form>
</div>
<div class="content">
<h3>中国新生代</h3>
<div>
<video src="1.mkv" controls="controls"></video>
</div>
</div>
</div>
</div>
</body>
</html>
css
body{
margin: 0;
padding: 0;
}
#content{
width: 960px;
/*height: 1000px;*/
/*background-color: #0e84b5;*/
margin: 0 auto;
}
#navigation{
width: 960px;
height:60px;
/*background-color: yellow;*/
margin-top: 30px;
float: left;
margin-bottom: 10px;
}
#navigation img{
width: 108px;
height: 27px;
margin-top: 17px;
margin-left: 30px;
}
#navigation .list{
margin-right: 20px;
float: right;
margin-top: -30px;
font-size: 20px;
}
#navigation a{
margin-right: 10px;
color: #000;
text-decoration: none;
}
#navigation span:hover{
background-color: #ed4040;
}
#hotsearch{
width: 350px;
height: 500px;
/*background-color: #dd0000;*/
float: left;
}
#hotsearch h2{
margin-top: 50px;
text-align: center;
}
#hotsearch li{
font-size: 15px;
text-align: center;
color: #0e84b5;
margin-bottom: 20px;
}
#main{
width: 600px;
height: 500px;
/*background-color: #69341e;*/
float: right;
}
#main #search{
height: 50px;
/*background-color: #27AE60;*/
width: 350px;
float: right;
}
#main #search .content{
width: 240px;
height: 36px;
padding: 3px 10px;
border: 1px solid #e8e8e8;
border-radius: 4px;
}
#main #search .button{
width: 65px;
height: 45px;
background-color: #208eda;
font-size: 15px;
color: white;
padding: 0;
margin: 0;
border: 0;
}
#main .content{
width: 600px;
height: 450px;
/*background-color: yellowgreen;*/
float: left;
border: solid 1px wheat;
}
#main .content h3{
text-align: center;
}
#main .content div{
width: 500px;
height: 350px;
/*border: solid 1px beige;*/
margin: auto;
overflow: auto;
}
#main .content div video{
width: 450px;
height: 300px;
/*text-align: center;*/
margin-left: 25px;
}
