就叫精灵图吧

HTML部<!DOCTYPE html><html>

<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/reading.css"/>
</head>
<body>
<!-- 头部 -->
<div class="">

</div>
<!-- 正文 -->
<div class="content">
<h1>购物须知</h1>
<!-- ul>(li>a{$})*5 -->
<ul>

<!--点击跳转 -->
<li><a href="#type1">预定商品</a></li>
<li><a href="#type2">专辑价格</a></li>
<li><a href="#type3">发货周期</a></li>
<li><a href="#type4">快递</a></li>
<li><a href="#type5">售后相关</a></li>
</ul>

<div class="type" id="type1"></div>

<div class="type" id="type2"></div>

<div class="type" id="type3"></div>

<div class="type" id="type4"></div>

<div class="type" id="type5"></div>

</div>
<!-- 底部 -->
<div class="">

</div>
</body>
</html>

 

CSS部分

.content {
width: 1000px;
margin: 0 auto;

}

.content h1{
text-align: center;
}

.content ul {
padding-left: 0px;
text-align: center;
}

.content ul li {
width: 80px;
height: 80px;
display: inline-block;
background-image: url(../img/buyer/mod_circle.png);
/* 精灵图定位 */
background-position: center 5px;
/* padding: 0 auto; */
background-repeat: no-repeat;

}

.content ul li:hover{
background-position: center 0px;
background-position: 22px -95px;
}

.content ul li a {
color: #333;
text-decoration: none;
font-size: 16px;
padding-top: 40px;
width: 80px;
display: block;
}

.content ul li a:hover{
color: #DE4767;
}

.content h1 {
color: #de4767;
font-size: 44px;
}

.type{
width: 1000px;

height: auto;

border-radius: 30px;

border: 2px solid #ccc;

margin: 0 ;

}

posted @ 2021-10-26 09:13  610鸭  阅读(17)  评论(0)    收藏  举报