<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h4 {
text-align: center;
}
div {
text-align: center;
}
span {
width: 175px;
height: 259px;
background-image: url(images/li_bg.jpg) ;
display: inline-block;
}
</style>
</head>
<body>
<h4>家居大视野</h4>
<div>
<span>
<img src="images/bj01.jpg" /><br />
室外居家空间设计
</span>
<span>
<img src="images/bj02.jpg" /><br />
室外居家空间设计
</span>
<span>
<img src="images/bj03.jpg" /><br />
室外居家空间设计
</span>
<span>
<img src="images/bj04.jpg" /><br />
室外居家空间设计
</span>
<span>
<img src="images/bj05.jpg" /><br />
室外居家空间设计
</span>
</div>
</body>
</html>
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/5bf7eaf69fd7d7a88aead8087e3c4cb7.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度</title>
<style>
#one {
height: 200px;
background: url(images/bdlogo.gif) no-repeat center;
background-size: contain;
}
#two {
text-align: center;
font-weight: bold;
letter-spacing: 2px;
}
span {
color: grey;
}
.three {
text-align: center;
font-weight: bold;
}
input[type=text] {
height: 30px;
width: 500px;
}
input[type=button] {
height: 35px;
width: 90px;
}
p {
text-align: center;
font-size: 15px;
color: grey;
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two">
<a href="#">新 闻</a>
<span>网 页</span>
<a href="#">贴 吧</a>
<a href="#">知 道</a>
<a href="#">音 乐</a>
<a href="#">图 片</a>
<a href="#">视 频</a>
<a href="#">地 图</a>
</div>
<br />
<div class="three">
<input type="text" autofocus="autofocus" />
<input type="button" value="百度一下" />
</div>
<br />
<div class="three">
<a href="#">百科</a>
<a href="#">文库</a>
<a href="#">hao123</a> |
<a href="#">更多>></a>
</div>
<br /><br /><br /><br /><br />
<div class="three">
<a href="#">把百度设为主页</a>
<a href="#">安装百度卫士</a>
</div>
<div class="three">
<a href="#">加入百度推广</a> |
<a href="#">搜索风云榜</a> |
<a href="#">关于百度</a> |
<a href="#">About Baidu</a>
</div>
<p>©2013 Baidu 使用百度前必读 京ICP证030173号</p>
</body>
</html>
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/80b2c4be2e25b1d85f16f3c25a13c28d.png)