前端学习——模拟百度首页 - 好文

注意：1：模拟百度首页时，有些数据可以看看百度首页的设置，打开百度首页，按f12键，然后点这个小箭头再右键点击你需要查看的地方。

2：将百度首页分为三个div，头部，中部和底部，为了区分开来，可以先分别设置不同的背景色，完成后再删除。

HTML代码：
<html> <head> <title>百度一下，你就知道</title> <meta charset="UTF-8"/>
 <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"> <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;}

效果：

热门工具换一换