百度首页-html+css 页面布局
css页面布局需要掌握七种基本的选择器：id选择器、标签选择器、属性选择器
下面介绍七种选择器使用方法
标签选择器：
标签名{样式名：样式值；。。。}
作用：会给当前网页的所有该标签添加相同的样式
id选择器：
#标签的id{样式名：样式值；。。。}
作用：给指定的标签添加样式
类选择器：
.类选择器名{样式名：样式值；。。。}
作用：给不同标签添加样式
全选择器
*{样式名：样式值；。。。}
组合选择器
选择器1，选择器2，....{样式名：样式值；。。。}
作用：解决不同的选择器之间的重复样式问题
子标签选择器
选择器1 子标签{样式名：样式值；。。。}
属性选择器
标签名【属性名=属性值】{样式名：样式值；。。。}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度首页</title>
<style type="text/css">
#header{width: 100%;height: 45px;}
#header_nav{position: absolute;right: 92px;top: 26px;}
#header_nav li{float: left;list-style-type: none;margin-left: 24px;}
#header_nav li a{color: #000000;font-size: 13px;font-weight: 700;line-height:24px ;}
#main{width: 100%;height: 503px;text-align: center;}
img{margin-top: 117px;}
input[type=text]{height: 39px;width: 592px;border: solid 1px #4992FF ;
background-image: url(img/QQ截图20190802221013.png);
background-repeat: no-repeat;background-position-x: 565px;background-position-y: 7px;}
input[type=submit]{height: 45px;width: 115px;position: relative;right: 7px;background-color: blue;font-size: 15px;color: #fff}
#footer{width: 100%;height: 265px;text-align: center;}
p{text-align: center;position: relative;bottom: 80px;}
#10{text-align: center;position: relative;bottom: 80px;}
</style>
</head>
<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 src="img/QQ浏览器截图20190801222248.png" /><br />
<input type="text" name="" id="" value="" />
<input type="submit" name="" id="" value="百度一下" />
</div>
<div id="footer">
<img src="img/timg.gif" style="width: 80px;height: 80px;position: relative;bottom: 60px;"/><br />
<p id="9">手机百度</p><br />
<p id="10"><a href="">把百度设为主页</a>
<a href="">关于百度</a>
<a href="">About Baidu</a>
<a href=""><百度推广/a>
</p><br />
<p>
©2019 baidu <a href="">使用百度前必读</a><a href="">意见反馈</a> 京ICP证030173号 <a href="">京公网安备11000002000001号</a>
</p>
</div>
<body>
</body>
</html>
