html+css仿百度新闻⾸页（下）
版权声明：本⽂为博主原创⽂章，未经博主允许不得转载。 blog.csdn/Irving_zhang/article/details/42150301
今天写了tech的div和footer的div，那整个页⾯已经有规模了
以下是代码index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度新闻搜索——全球最⼤的中⽂新闻平台</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header"> <a href="#">百度新闻⽆线版</a> <a href="#">百度⾸页</a> <a href="#">登录</a><a href="#">注册</a> </div> <div id="body">
<div id="search">
<div id="search_left"><a href="#"><img src="images/logo.png" alt="百度新闻" height="46px" width="137px"></a></div>
<div id="search_right">
<div id="search_right_1"> <span id="span1">新闻⽹页贴吧知道⾳乐图⽚视频地图</span> </div>
<div id="search_right_2">
用html和css制作百度页面<div id="search_right_2">
<div class="input-append">
<input type="text" class="span5">
<button class="btn" type="button">搜索</button>
</div>
<span>帮助|搜素|⾼级设置</span> </div>
<div id="search_right_3">
<input type="radio"/>
新闻全⽂
<input type="radio"/>
新闻标题 </div>
</div>
</div>
<div id="navigate"> <a href="#" class="selected">⾸页</a> <a href="#">热点</a> <a href="#">国内</a> <a href="#">国际</a> <a href="#">军事</a> <a href="#">财 <div id="recommend">
<div id="recommend_left">
<div id="recommend_left_1">
<p class="recommend_left_1_bt">菲称台渔船冲撞才射击躲渔船像惊悚⽚</p>
<p>[台渔船否认冲撞] [马英九：菲律宾冷⾎谋杀] [演疑遭美舰艇尾随] </p>
<p class="recommend_left_1_bt">央视：达赖集团发布《⾃焚指导书》操纵⾃焚</p>
<p>[步骤设计详细] [⼀见⽕光冲天就兴奋] [称⾃焚者为英雄] [视频] </p>
<p class="recommend_left_1_bt">⾹港轻轨列车出轨⾄少62⼈伤 </p>
<p>[轻铁转弯时出事不少乘客倒地流⾎] [3名重伤者已送往医院] </p>
</div>
<div id="recommend_left_2">
<p class="recommend_left_2_bt">消息称⾼层正起草7⼤领域改⾰⽅案涉户籍制度 </p>
<ul>
<li>最⾼检公布刑事赔偿新标准⽇赔偿额为182.35元 </li>
<li>美国称跟踪到中国探空⽕箭：发射过程携多个物体 </li>
<li>中国海监船编队巡航钓鱼岛领海驱离⽇侵权船舶 </li>
<li>中央8项规定出台北京部分⾼端餐厅开卖⽕锅包⼦ </li>
</ul>
</div>
</div>
<div id="recommend_right">
<div id="recommend_right_1"><img src="images/1.bmp" width="560" height="400"/> </div>
<div id="recommend_right_2">
<div class="recommend_right_2_bt">滚动新闻</div>
<div class="recommend_right_2_m">
<marquee scrollamount="2">
|暴⾬袭击藤县局部受灾|挖掘传承传统技艺藤县⽔上民歌传承基地挂牌成⽴ |岑溪⼯商开展⼉童⽤品市场专项整治见成效|
</marquee>
</div>
</div>
</div>
</div>
<div id="technology">
<div id="tech_up">
<div id="tech_up_1"><a href="#">科技探索</a></div>
<div id="tech_navi"> <a href="#">⼿机</a> <a href="#">数码</a> <a href="#">业界</a> </div>
</div>
<div id="tech_down">
<div id="tech_down_left">
<div id="tech_down_left_1">
<p class="tech_down_left_1_bt">科技</p>
<ul>
<li>最⾼检公布刑事赔偿新标准⽇赔偿额为182.35元 </li>
<li>美国称跟踪到中国探空⽕箭：发射过程携多个物体 </li>
<li>中国海监船编队巡航钓鱼岛领海驱离⽇侵权船舶 </li>
<li>中央8项规定出台北京部分⾼端餐厅开卖⽕锅包⼦ </li>
</ul>
</div>
<div id="tech_down_left_2">
<p class="tech_down_left_2_bt">探索</p>
<ul>
<li>最⾼检公布刑事赔偿新标准⽇赔偿额为182.35元 </li>
<li>最⾼检公布刑事赔偿新标准⽇赔偿额为182.35元 </li>
<li>美国称跟踪到中国探空⽕箭：发射过程携多个物体 </li>
<li>中国海监船编队巡航钓鱼岛领海驱离⽇侵权船舶 </li>
<li>中央8项规定出台北京部分⾼端餐厅开卖⽕锅包⼦ </li>
</ul>
</div>
</div>
<div id="tech_down_center">
<div id="tech_down_center_1"> <a href="#">
<p>科技图⽚</p>
</a> <img src="images/2.jpg" width="170px"/> </div>
<div id="tech_down_center_2"> <img src="images/2.jpg" width="80px"/> <p>这是科技栏下中部分的第2格</p>
</div>
<div id="tech_down_center_3"> <img src="images/2.jpg" width="80px"/> <p>这是科技栏下中部分的第3格</p>
</div>
</div>
<div id="tech_down_right">
<div id="tech_down_right_1">
<p class="tech_down_right_1_bt">⼿机</p>
<ul>
<li>最⾼检公布刑事赔偿新标准⽇赔偿额为182.35元 </li>
<li>美国称跟踪到中国探空⽕箭：发射过程携多个物体 </li>
<li>中国海监船编队巡航钓鱼岛领海驱离⽇侵权船舶 </li>
<li>中央8项规定出台北京部分⾼端餐厅开卖⽕锅包⼦ </li>
</ul>
</div>
<div id="tech_down_right_2">
<p class="tech_down_right_2_bt">数码</p>
<ul>
<li>最⾼检公布刑事赔偿新标准⽇赔偿额为182.35元 </li>
<li>美国称跟踪到中国探空⽕箭：发射过程携多个物体 </li>
<li>中国海监船编队巡航钓鱼岛领海驱离⽇侵权船舶 </li>
<li>中央8项规定出台北京部分⾼端餐厅开卖⽕锅包⼦ </li>
</ul>
</div>
</div>
</div>
</div>
<div id="relevant">
<div id="rele_left">
<p>热门频道推荐</p>
<ul>
<a href="#">
<li>国内</li>
</a> <a href="#">
<li>国内</li>
</a> <a href="#">
<li>国内</li>
</a> <a href="#">
<li>国内</li>
</a> <a href="#">
<li>国内</li>
</a> <a href="#">
<li>国内</li>
</a> <a href="#">
<li>国内</li>
</a> <a href="#">
<li>国内</li>
</a> <a href="#">
<li>国内</li>
</a> <a href="#">
<li>国内</li>
</a> <a href="#">
<li>国内</li>
<li>国内</li>
</a> <a href="#">
<li>国内</li>
</a>
</ul>
</div>
<div id="rele_center">
<p>相关功能</p>
<ul>
<a href="#">
<li><i class="icon-music"></i>⾳乐</li>
</a> <a href="#">
<li><i class="icon-film"></i>电影</li>
</a> <a href="#">
<li><i class="icon-envelope"></i>邮件</li>
</a> <a href="#">
<li><i class="icon-camera"></i>相机</li>
</a> <a href="#">
<li><i class="icon-file"></i>⽂件</li>
</a> <a href="#">
<li><i class="icon-user"></i>联系⼈</li>
</a>
</ul>
</div>
<div id="rele_right">
<p>百度新闻独家出品</p>
<a href="#">新闻由机器选取5分钟⾃动更新</a> <a href="#">百度不刊登或转载任何完整新闻内容</a> <a href="#">百度新闻搜索于互联⽹⽹站和频道，系⾃动分 </div>
<div id="footer">
<span>⽂明办⽹举报电话：010********投诉中⼼京公⽹安备110000000001号互联⽹新闻信息服务许可 ©2013 Baidu 使⽤百度前必读</span>
</div>
</div>
</body>
</html>
style.css
@charset "utf-8";
/* CSS Document */
* {
padding: 0;
margin: 0;
}
div {
font-size: 14px;
}
#header {
text-align: right;
width: 100%;
height: 20px;
margin: 5px 0 0 0;
}
#body {
width: 1000px;
margin: auto;
}
#search, #navigate, #recommend, #technology, #relevant, #footer {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#search {
height: 84px;
}
#search_left {
width: 137px;
float: left;
margin: 10px 0 0 0;
}
#search_right {
float: left;
width: 831px;
margin: 0 0 0 10px;
}
#search_right_1 {
float: left;
width: 831px;
height: 18px;
margin-bottom: 7px;
font-family: Verdana, Geneva, sans-serif; font-size: 16px;
}
#search_right_2 {
float: left;
width: 714px;
height: 34px;
}
#search_right_3 {
float: left;
width: 831px;
height: 10px;
margin-top: 5px;
margin-left: 7px;
}
#navigate {
height: 45px;
}
#navigate a, #navigate a:visited {
line-height: 40px;
color: black;
font-size: 18px;
border-bottom: 3px solid #e7e7e7;
display: block;
float: left;
text-decoration: none;
padding: 0 7px 0 6px;
}
#navigate a:hover, #navigate a.selected { border-bottom: 3px solid #336699;
}
#recommend {
width: 100%;
margin-top: 10px;
float: left;
}
#recommend_left {
width: 390px;
height: 430px;
float: left;
margin-right: 50px
}
#recommend_left_1 {
width: 100%;
height: 250px;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论