将图片设置为背景
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度页面</title>
<style type="text/css">
/*将图片设置为背景*/
*{
margin:0 auto;
}
ul,li{
list-style: none;
}
body{
background-repeat: no-repeat;
background-size:100% 100%;
background-attachment:fixed;
}
.a{
margin-top:50px;
width:1000px;
height:900px;
background:#96F;
}
.b{
margin:0 200px;
}
.search_butt{
width:500px;
height:30px;
float:left;
background:url(img/camera_off.png) no-repeat right center
}
.clear:after{/*在每个.class之后插入新内容*/
content: "\200B";
display: block;/*使段落生成行内框,每个框是一个块级元素*/
height: 0;
clear: both;/*是图像的左侧和右侧均不出现浮动*/
}
/*定义小图片集合样式*/
.list{
float: left;
width: 700px;
}
</style>
</head>
<body background="img/a11.jpg">
<div class="a">
<div style="margin:0 300px"><img src="img/logo.png"/></div>
<div class="b">
<input type="text"class="search_butt" />
<input type="button" class="button" value="百度一下" style="background:#03F; height:38px;" />
</div>
<div class="box clear">
<ul class="list clear">
<li><span class="btn"></span><p>大国外交</p></li>
<li><span class="btn"></span><p>大国外交</p></li>
<li><span class="btn"></span><p>大国外交</p></li>
<li><span class="btn"></span><p>大国外交</p></li>
<li><span class="btn"></span><p>大国外交</p></li>
<li><span class="btn"></span><p>大国外交</p></li>
</ul>
</div>
</div>
</body>
</html>