html+css仿百度新闻首页（上）

学习html+css+javascript有一段时间了，但动手做的模仿的网页太少所以感觉无从下手，现在回过头来多做几个练练手，第一个是仿百度新闻首页的静态页面，由于之前接触过bootstrap开源css代码，因此在写的过程中引用了部分bootstrap相关知识，比如百度搜索的搜索框。工具用的是dreamweaver cs6.0，之前用的dreamweaver8不支持html5的模版，还要下插件好像，也懒得弄就果断换cs6.0，浏览器用的是Chrome38.0.2125.111 m，没有做浏览器性能的差异测试。只为练习div+css写静态页面的能力。诸位勿笑。

html部分：

 百度新闻无线版 百度首页 登录注册 

  

    

    

      
 新闻  网页  贴吧  知道  音乐  图片  视频  地图 
      

        

          
          搜索
        
        帮助|搜素|高级设置 
      

        
        新闻全文
        
        新闻标题 
    
  
  

  首页 热点 国内 国际 军事 财经 互联网 体育 娱乐 女人 科技 房产 汽车 社会 游戏 教育 图片 人物 新闻名站
  

  	

    	

        	
菲称台渔船冲撞才射击 躲渔船像惊悚片
            
[台渔船否认冲撞] [马英九:菲律宾冷血谋杀] [台军演疑遭美舰艇尾随] 
            
央视：达赖集团发布《自焚指导书》操纵自焚
            
[步骤设计详细] [一见火光冲天就兴奋] [称自焚者为英雄] [视频] 
            
香港轻轨列车出轨至少62人伤 
            
[轻铁转弯时出事 不少乘客倒地流血] [3名重伤者已送往医院] 
        
        

        
消息称高层正起草7大领域改革方案 涉户籍制度 
                

                	
最高检公布刑事赔偿新标准 日赔偿额为182.35元 
                	
美国称跟踪到中国探空火箭:发射过程携多个物体 
                	
中国海监船编队巡航钓鱼岛领海 驱离日侵权船舶 
                	
中央8项规定出台 北京部分高端餐厅开卖火锅包子 
                
        
        
    
    

    	

        
        

            
滚动新闻
            
|暴雨袭击藤县局部受灾|挖掘传承传统技艺 藤县水上民歌传承基地挂牌成立 |岑溪工商开展儿童用品市场专项整治见成效|
        
    
  
  

  

  

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;
	background: #000;
	margin-right: 50px
}
#recommend_left_1 {
	width: 100%;
	height: 250px;
	float: left;
	background: #0FC;
}
#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;
	background: #9F6;
	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;
	background: url(images/top_bg.png) no-repeat left -272px;
}
#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;
}

效果图我不知道怎么上传

不太习惯。。。

说说今天总结吧：

1、今天些了最上边的header的div，中间的search的div，下边的recommend的div，嗯用了很长时间，就是之前了解的用的都不熟练，导致很多格式出现偏差。

2、子类的div继承以后要先写width和height属性，否则就会不显示。。。

3、导航栏的写法除了用传统的

• 标签以外，还可以直接用标签然后调整line-height,padding,text-decoration,border-bottom等属性也能做出漂亮的导航菜单。

  4、文字排版的问题。记住text属性能做出有美感的排版。line-height,font-size,color,font-weight,padding等。

  5、明天接着写一个栏目，再把底部的footer写出来，算是完成一个还行的静态页面，然后会试着加一些动态的javascript上去。