素材图片：
要求结果为：
自己的代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DivTest</title>
<link rel="stylesheet" type="text/css" href="css/divTest.css">
</head>
<body>
<div class="cen">
<div class="tp d1"></div>
<div class="tp"><a href="#">购物车</a></div>
<div class="tp d2"></div>
<div class="tp"><a href="#">帮助中心</a></div>
<div class="tp d3"></div>
<div class="tp"><a href="#">加入收藏</a></div>
<div class="tp d4"></div>
<div class="tp"><a href="#">设为首页</a></div>
<button>登录</button>
<button>注册</button>
</div>
</body>
</html>
/*
* @Author: lenovo
* @Date: 2018-04-14 11:12:55
* @Last Modified by: lenovo
* @Last Modified time: 2018-04-19 00:39:09
*/
.cen{
float:right;
margin-top:20px;
margin-right:100px;
}
.tp{
float:left;
}
.d1{
background: url("F:/HtmlTest/Learn414/images/icon.gif");
background-repeat: no-repeat;
background-position: -2px -2px;
//background-color:green;
//border:1px solid red;
height:23px;
width:23px;
}
.d2{
background-image: url("F:/HtmlTest/Learn414/images/icon.gif");
background-repeat: no-repeat;
background-position: -43px -2px;
//background-color:green;
//border:1px solid red;
height:23px;
width:23px;
}
.d3{
background-image: url("F:/HtmlTest/Learn414/images/icon.gif");
background-repeat: no-repeat;
background-position: -84px -2px;
//background-color:green;
//border:1px solid red;
height:23px;
width:23px;
}
.d4{
background-image: url("F:/HtmlTest/Learn414/images/icon.gif");
background-repeat: no-repeat;
background-position: -125px -2px;
//background-color:green;
//border:1px solid red;
height:23px;
width:23px;
}
完成情况为：
上传的图片不好观察，可以右键选择“在新的窗口打开图片”。
说明：用一个大DIV包住这么些内容，给每个图片和链接也分配一个小DIV，其中，通过左移或者右移（即设置background-position）多次测试出几个小图案之间的横向X轴像素差为41px，再稍加调整就可以了！
首先第一个区别：语义。p标签的语言是段落（paragraph），而div是没有语义的，只是一块用来方便设置样式排版的，<div>和<p>都是块状元素。
第二个区别：就是p标签有默认样式，段落前后都会有一行空白区域，当然你用div自己设置也是可以的。div的添加如果没有什么css修改的话对样式没有影响。
