注意：1：模拟百度首页时，有些数据可以看看百度首页的设置，打开百度首页，按f12键，然后点这个小箭头
再右键点击你需要查看的地方。
2：将百度首页分为三个div，头部，中部和底部，为了区分开来，可以先分别设置不同的背景色，完成后再删除。
HTML代码：
<html>
<head>
<title>百度一下，你就知道</title>
<meta charset="UTF-8"/>
<!--引入外部声明的css文件-->
<link rel="stylesheet" type="text/css" href="css/baidu.css"/>
<!--引入网页标题，就是左上角的那个小图片-->
<link href="img/title.ico" rel="shortcut icon"/>
</head>
<body>
<div id="header">
<ul id="header-nav"><!--命名规则：父-自己的id-->
<li><a href="新闻"></a></li>
<li><a href="">hao123</a></li>
<li><a href="">地图</a></li>
<li><a href="">视频</a></li>
<li><a href="">贴吧</a></li>
<li><a href="">学术</a></li>
<li><a href="">登录</a></li>
<li><a href="">设置</a></li>
</ul>
</div>
<div id="main">
<img id="img-logo"src="img/5f8dcf06d74b796a51269303a0d2e07b_bd_logo1.jpg"width="270px" height="129px"/>
<form action="https://www.baidu.com/s" method="get"><br />
<input type="text" name="wd" id="" value="" />
<input type="submit" name="" id="" value="百度一下" />
</div>
<div id="footer">
<img src="img/10.jpg"/>
</div>
</body>
</html>(1)margin:0px auto :作用于块级元素，对块级元素进行居中
(2)text-align:center:作用于内联元素，必须放在要居中的内联元素所在的块级元素。
css代码：
/*margin：层的边框以外留的空白*/
/*padding：层的边框到层的内容之间的空白*/
/*设置页面的基础样式（全部）*/
*{margin: 0px;padding: 0px;}
/*设置头部样式*/
#header{height:100px;width:100%;}
/*设置导航栏样式*/
#header-nav li{float:left;list-style-type:none;margin-left: 21px;}
#header-nav li a{color: #333;font-weight: 700;line-height: 24px;font-size: 13px;}
#header-nav{position: absolute;right: 92px;top: 26px;}
/*设置中间样式*/
#main{height: 300px;width:100%;text-align: center;}/*margin 是指当前元素到相邻元素间的距离。text-align 指当前元素中内容的对其方式。*/
#img-logo{margin-top: 30px;margin-bottom: 21px;}
/*属性选择器,搜索框样式*/
input[type=text]{height: 34px;width: 539px;border: solid 1px #4992FF;background-image: url(../img/9.jpg);background-repeat: no-repeat;background-position-x: 490px;background-position-y:1px;}
/*浏览器中，右是x轴，下是y轴*/
input[type=submit]{width: 100px;height:33px;font-size: 15px;color: #fff;background-color:#2d78f4;border: solid #2d78f4;letter-spacing: 1px;position: right:5px;top: 1px;}
/*设置底部样式*/
#footer{height: 405px;width: 100%;text-align: center;}
/*用伪类给标签添加样式*/
#header-nav li a:hover{color:blue;}
效果：
