html+css仿百度新闻首页（下）
今天写了tech的div和footer的div，那整个页面已经有规模了
以下是代码index.html
百度新闻搜索——全球最大的中文新闻平台
新闻 网页 贴吧 知道 音乐 图片 视频 地图
帮助|搜素|高级设置
新闻全文
新闻标题
菲称台渔船冲撞才射击 躲渔船像惊悚片
[台渔船否认冲撞] [马英九:菲律宾冷血谋杀] [台军演疑遭美舰艇尾随]
央视：达赖集团发布《自焚指导书》操纵自焚
[步骤设计详细] [一见火光冲天就兴奋] [称自焚者为英雄] [视频]
香港轻轨列车出轨至少62人伤
[轻铁转弯时出事 不少乘客倒地流血] [3名重伤者已送往医院]
消息称高层正起草7大领域改革方案 涉户籍制度
- 最高检公布刑事赔偿新标准 日赔偿额为182.35元
- 美国称跟踪到中国探空火箭:发射过程携多个物体
- 中国海监船编队巡航钓鱼岛领海 驱离日侵权船舶
- 中央8项规定出台 北京部分高端餐厅开卖火锅包子
滚动新闻
科技
- 最高检公布刑事赔偿新标准 日赔偿额为182.35元
- 美国称跟踪到中国探空火箭:发射过程携多个物体
- 中国海监船编队巡航钓鱼岛领海 驱离日侵权船舶
- 中央8项规定出台 北京部分高端餐厅开卖火锅包子
探索
- 最高检公布刑事赔偿新标准 日赔偿额为182.35元
- 美国称跟踪到中国探空火箭:发射过程携多个物体
- 中国海监船编队巡航钓鱼岛领海 驱离日侵权船舶
- 中央8项规定出台 北京部分高端餐厅开卖火锅包子
手机
- 最高检公布刑事赔偿新标准 日赔偿额为182.35元
- 美国称跟踪到中国探空火箭:发射过程携多个物体
- 中国海监船编队巡航钓鱼岛领海 驱离日侵权船舶
- 中央8项规定出台 北京部分高端餐厅开卖火锅包子
数码
- 最高检公布刑事赔偿新标准 日赔偿额为182.35元
- 美国称跟踪到中国探空火箭:发射过程携多个物体
- 中国海监船编队巡航钓鱼岛领海 驱离日侵权船舶
- 中央8项规定出台 北京部分高端餐厅开卖火锅包子
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;
float: left;
}
#recommend_left_1 .recommend_left_1_bt {
line-height: 40px;
font-size: 16px;
color: #990000;
font-weight: bold;
}
#recommend_left_1 p {
line-height: 22px;
font-size: 12px;
}
#recommend_left_2 {
width: 100%;
height: 170px;
float: left;
margin-top: 10px;
}
#recommend #recommend_left #recommend_left_2 .recommend_left_2_bt {
line-height: 40px;
font-size: 16px;
font-weight: bold;
}
#recommend #recommend_left #recommend_left_2 ul {
list-style: none;
}
#recommend #recommend_left #recommend_left_2 li {
padding-left: 8px;
line-height: 27px;
}
#recommend_right {
width: 560px;
height: 430px;
float: left;
background: #C6F;
}
#recommend #recommend_right #recommend_right_2 {
width: 560px;
height: 30px;
}
#recommend #recommend_right #recommend_right_2 .recommend_right_2_bt {
width: 76px;
line-height: 30px;
display: block;
background: #e7e7e7;
float: left;
text-align: center;
color: #666666;
}
#recommend #recommend_right #recommend_right_2 .recommend_right_2_m {
width: 474px;
line-height: 30px;
display: block;
padding-left: 10px;
background: #fafafa;
float: left;
font-size: 12px;
}
#technology{
width:100%;
height:400px;
float:left;
}
#tech_up{
width:100%;
color:#000;
height:40px;
float:left;
margin-top:10px;
border-bottom:#CCC 1px solid;
}
#tech_up_1{
width:150px;
height:40px;
float:left;
font-size:30px;
font-weight:bold;
padding:10px 0 0 10px;
}
#tech_navi{
float:left;
height:40px;
margin-top:17px;
}
#tech_navi a{
display:block;
color:black;
float:left;
margin-left:7px;
margin-right:8px;
}
#tech_down_left{
width:440px;
height:360px;
float:left;
}
#tech_down_left_1{
width:440px;
height:180px;
float:left;
}
#tech_down_left_1 .tech_down_left_1_bt {
line-height: 40px;
font-size: 16px;
font-weight: bold;
}
#tech_down_left_1 li {
padding-left: 8px;
line-height: 27px;
}
#tech_down_left_2{
width:450px;
height:180px;
float:left;
}
#tech_down_left_2 .tech_down_left_2_bt {
line-height: 40px;
font-size: 16px;
font-weight: bold;
}
#tech_down_left_2 li {
padding-left: 8px;
line-height: 27px;
}
#tech_down_center{
width:200px;
height:360px;
float:left;
}
#tech_down_center_1{
width:100%;
height:200px;
}
#tech_down_center_1 p{
line-height:40px;
font-size:20px;
margin-left:10px;
}
#tech_down_center_1 img{
margin-left:10px;
}
#tech_down_center_2{
width:50%;
height:160px;
display:block;
float:left;
}
#tech_down_center_2 img{
margin:10px;
}
#tech_down_center_2 p{
margin:3px;
}
#tech_down_center_3{
width:50%;
height:160px;
display:block;
float:left;
}
#tech_down_center_3 img{
margin:10px 10px 10px 0 ;
}
#tech_down_center_3 p{
margin:3px;
}
#tech_down_right{
width:359px;
height:360px;
float:left;
}
#tech_down_right_1{
width:100%;
height:180px;
float:left;
}
#tech_down_right_1 .tech_down_right_1_bt {
line-height: 40px;
font-size: 16px;
font-weight: bold;
}
#tech_down_right_1 li {
padding-left: 8px;
line-height: 27px;
list-style:none
}
#tech_down_right_2{
width:100%;
height:180px;
float:left;
}
#tech_down_right_2 .tech_down_right_2_bt {
line-height: 40px;
font-size: 16px;
font-weight: bold;
}
#tech_down_right_2 li {
padding-left: 8px;
line-height: 27px;
list-style:none
}
#relevant {
width:100%;
height:138px;
float:left;
border-top:1px #CCCCCC solid;
}
#relevant p{
font-size:20px;
margin:10px 0 0 10px;
}
#rele_left{
width:250px;
height:138px;
float:left;
}
#rele_left ul{
margin:5px 0 10px 5px;
}
#rele_left li{
margin:0;
float:left;
list-style:none;
line-height:30px;
padding:0 15px 0 15px;
color:black;
}
#rele_center{
width:400px;
height:138px;
float:left;
}
#rele_center ul{
margin:0px;
}
#rele_center li{
margin:0px;
float:left;
list-style:none;
line-height:50px;
font-size:18px;
padding:0 35px 0 35px;
color:#000;
}
#rele_right{
width:300px;
height:138px;
float:right;
}
#rele_right a {
color: black;
text-decoration: none;
float:left;
font-size:9px;
margin-left:10px;
margin-top:10px;
}
#rele_right a:hover,a:focus {
color: #005580;
text-decoration: underline;
}
#footer{
width:100%;
height:20px;
float:left;
margin:5px 0 5px 0;
padding:0 0 0 100px;
}将从官网下载的bootstrap放置如下：
百度新闻页面是自己模仿的第一个网站，可以看出各种不熟练，最后做出来也是差强人意，以下是总结：
1、对于文字的排版不够熟练，大块大块的文字排版一看就晕，最近多看一些文字排版的实例应该会好很多。
2、开始熟练的用一些bootstrap的css，但是还是会有一些时候会无所适从不知道排版到底偏差出在哪里，下一个案例中要开始定制自己的bootstrap，做到得心应手。
3、css中相同元素的属性提取做的不够好，太分散。