百度首页设计（HTML）

一. 百度首页总结。
    知识点1：完整的网页的布局顺序。
              1.先对网页整体的区域进行划分，划分为多个div区域。
                 百度首页由头部的一个文字导航，中间的一个按钮和一个输入框以及下边的文字简介和导航组成（可以先大致设置3个div，即上 ，中 ，下三部分）。 
                 文字导航部分（上）

         
                 按钮和输入框部分（中）

                下面的文字简介和导航组成（下）

              2.对每一块区域进行上色（宽，高，背景颜色），依次调整间距，做出实际的布局效果。
              3.单独去布局每一块区域的内容（按照1,2,3步骤）。
              4.Css属性  
                 a)盒模型相关的属性：margin，padding，border，width，height。
                 b)文本相关的属性：color,font-size,line-height,font-family,text-dercoration,letter-sacing等
                 c)处理新问题：display: inline-block;  vertical-align：top;
    知识点2：间隙问题的处理？
             1.Html元素自带的间隙问题。 
                解决方案：添加通配选择器,清除元素自带的盒模型结构。 
               *{ margin:0；  pading：0；}
             2.行属性标签以及行内块属性自带间隙问题。
                解决方式1：将分行写的代码放置在同一行写。 
                解决方式2：
                             a. 将所有的行元素放置在一个div中。
                             b. 给div设置字体大小为0的属性。
                             c. 将行元素字体设置为想要的字体大小。
                解决方式3：浮动。
             3.图片对齐方式的问题。
                解决方案：给图片添加vertical-align属性，默认值是baseline基线对齐，只需要给上其他值即可。Vertical-align: top | middle | bottom；

实现代码（注意：网页结构和样式是分开来写的即外联式）：

a.百度网页大体结构（主旨部分）：

	
		
		
		
		
	
	
		
		
		

			抗击肺炎
			新闻
			hao123
			地图
			视频
			贴吧
			学术
			登录
			设置
			更多产品
		
		
		

			
			
			

				 
				
			
		
		
		

			
			
下载百度APP
			
有事搜一搜  没事看一看
			

				把百度设为首页
				关于百度
				About Baidu
				百度推广
				(京)-经营性-2017-0020
			
			
			

				©2020 Baidu 
				使用百度前必读
				意见反馈 
				京ICP证030173号
				
				京公网安备110000020
				
			
		
	

b.css样式（实现网页的布局，让网页变得更加美观，实现所期望的效果）：

/*通配选择器清除间隙*/
*{
	margin: 0;
	padding: 0;
}
.top{
	/*内容右对齐*/
	text-align: right;
	/*上填充*/
	padding-top: 19px;
    /*右填充*/
    padding-right: 11px;
}

/*子代选择器*/
.top>a{
	/*文字相关的属性*/
	color: #333333;
	/*文字字体*/
	font-weight: 700;
	font-size: 13px;
	line-height: 24px;
	/*文字字体*/
	font-family: arial;
	/*左间距*/
	margin-left: 20px;
}

.top>.top_a{
	/*调整文字粗细*/
	font-weight: 400;
}

#more{
	/*宽高*/
	width: 60px;
	height: 24px;
	/*
	 a标签是一个行属性标签，行属性标签是无法改变宽高的，宽高由内容撑开
	 如果想让a标签能够设置宽高，比如给a标签添加一个display: inline-block;
	 */
	background-color: #3388ff;
	/*去掉下划线*/
	text-decoration: none;
	color: white;
	font-weight: 400;
	/*水平居中*/
	text-align: center;
}

.middle{
	/*上间距*/
	margin-top: 138px;
	/*内容居中*/
	text-align: center;
}

.middle>img{
	width: 270px;
}

.input{
	/*上间距*/
	margin-top: 25px;
}

/*输入框*/
.input_text{
	width: 532px;
	height: 34px;
	border: 1px solid #b6b6b6;
	/*去掉右边框 - 将右边框宽度设置为0*/
	/*border-right-width: 0;*/
	border-right: none;
	/*左填充*/
	padding-left: 7px;
	
}

/*按钮*/
.input_button{
	width: 100px;
	height: 36px;
	background-color: #3385ff;
	color: white;
	border: 1px solid #3385ff;
	/*垂直对齐方式*/
	vertical-align: top;
}

.bottom{
	/*上间距*/
	margin-top: 256px;
	text-align: center;
}

.download{
	/*文本相关*/
	color: #333333;
	font-size: 16px;
	line-height: 32px;
	/*字母间距*/
	letter-spacing: 3px;
	/*字体*/
	font-family: arial;
}

.look{
	color: #999;
	font-size: 14px;
	font-weight: 300;
	line-height: 14px;
}

.about{
	/*文本相关的属性*/
	color: #999;
	font-size: 12px;
	line-height: 22px;
	font-family: arial;
	/*上间距*/
	margin-top: 25px;
}

/*  a元素对文字有自己的颜色设置，所以如果想修改a元素中文字的颜色，就必须作用到a标签上的颜色*/

.about>a{
	color: #999;
	/*右间距*/
	margin-right: 25px;
}

.copyright{
	color: #999;
	font-size: 12px;
	line-height: 24px;
	font-family: arial;
}

.copyright>a{
	color: #999;
}

.copyright>img{
	/*修改图片的垂直对齐方式 -- 垂直居中对齐*/
	vertical-align: middle;
}

#record{
	/*左间距*/
	margin-left: 15px;
}

.bottom>img{
	border: 1px solid #f3f3f3;
	padding: 5px;
}

最终实现的效果图：