页面和css分开写，使代码页面更加整齐，也方便以后的修改。
首先写出大致框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>音乐</title>
<link rel="stylesheet" type="text/css" href="css/reading.css"/>
</head>
<body>
<!--头部-->
<div class="content">
<h1>购物须知</h1>
<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">
<h3></h3>
<div class="text">
<p></p>
</div>
</div>
<div class="type" id="type2">
<h3></h3>
<div class="text">
<p></p>
</div>
</div>
<div class="type" id="type3">
<h3></h3>
<div class="text">
<p style="text-align: center;"><img src="img/buyer/1.jpg"/></p>
<p></p>
</div>
</div>
<div class="type" id="type4">
<h3></h3>
<div class="text">
<p style="text-align: center;"><img src="img/buyer/2.jpg" style="margin: auto;"/></p>
</div>
</div>
<div class="type" id="type5">
<h3></h3>
<div class="text">
<p></p>
</div>
</div>
</div>
<div id="di" style="text-align: center;">
<img src="img/footer_v180123.png"/>
</div>
<!--尾部-->
</body>
</html>
css代码
.content {
width: 1000px;
margin: 0 auto;
}
.content h1 {
font-size: 44px;
color: #de4767;
text-align: center;
font-weight: normal;
}
.content ul {
text-align: center;
padding-left: 0px;
}
.content ul li {
display: inline-block;
background-image: url(../img/buyer/mod_circle.png);
background-repeat: no-repeat;
background-position: center -95px;
}
.content ul li :hover{
background-position: center -95px;
}
.content ul li a {
padding-top: 40px;
display: block;
text-decoration: none;
color: #333;
width: 100px;
}
.content ul li a:hover{
color: #de4767;
}
.content #type1 h3 {
background-image: url(../img/buyer/mod_title.png);
background-repeat: no-repeat;
background-position: 0px -190px;
height: 50px;
}
.content #type2 h3 {
background-image: url(../img/buyer/mod_title.png);
background-repeat: no-repeat;
background-position: 0px 5px;
height: 50px;
}
.content #type3 h3 {
background-image: url(../img/buyer/mod_title.png);
background-repeat: no-repeat;
background-position: 0px -90px;
height: 50px;
}
.content #type4 h3 {
background-image: url(../img/buyer/mod_title.png);
background-repeat: no-repeat;
background-position: 0px -285px;
height: 50px;
}
.content #type5 h3 {
background-image: url(../img/buyer/mod_title.png);
background-repeat: no-repeat;
background-position: 0px -590px;
height: 50px;
}
.content .type .text {
border: 2px solid #cccc;
border-radius: 10px;
padding: 20px 25px;
font-size: 14px;
}
.content .type .text p{
text-indent: 2em;
line-height: 2em;
margin: 0;
}
1.空格 内部所有元素
2.大于号 内部第一代元素
3.本身所有的元素
