代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p{
text-decoration: underline;
letter-spacing: 10px;/*每一个字体的左边距*/
}
div{
width: 199px;
background-image: url("../../img/bg.gif");
height: 325px;
}
h4{
color: orange;
padding-top: 35px;/*与边框上面的间距*/
padding-left: 15px;
}
ul{
list-style: none;
padding: 0;
}
li{
float: left;
width: 66px;
margin-bottom: 12px;
text-align: center;
}
</style>
<title>商品分类</title>
</head>
<body>
<p>欢迎来到贵美商城</p>
<div>
<h4>家用电器</h4>
<ul>
<li>大家电</li>
<li>洗衣机</li>
<li>电冰箱</li>
<li>相机</li>
<li>电视</li>
<li>电脑</li>
<li>DVD</li>
<li>电视</li>
<li>电脑</li>
</ul>
<h4>家用电器</h4>
<ul>
<li>大家电</li>
<li>洗衣机</li>
<li>电冰箱</li>
<li>相机</li>
<li>电视</li>
<li>电脑</li>
<li>电视</li>
<li>电脑</li>
<li>DVD</li>
</ul>
</div>
</body>
</html>
需要用到的背景图片:
运行结果: