哇塞塞！今天的一個頁面啊。（HTML+CSS）10.25哇！
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="content">
<!-- h1預設大小32px -->
<h1>購物須知</h1>
<!-- ul>(li>a{$})*5 直接生成五個內容 -->
<ul>
<li><a href="#catagory1">預定商品</a></li>
<li><a href="#catagory2">專輯價格</a></li>
<li><a href="#catagory3">發貨週期</a></li>
<li><a href="#catagory4">快遞</a></li>
<li><a href="#catagory5">售後相關</a></li>
</ul>
<div class="catagory" id="catagory1"> <!-- catagory--類目同type -->
<h3 class="h31"></h3>
<!-- div.text 直接形成 -->
<div class="text">
<!-- 正文、 -->
<p>預定商品：非現貨的商品，為確保提供貨數量以及避免過量囤積，因此將通過收取預定金的形式進行把控，且無論是那種形式的預定商品，預定金一旦支付成功，均不予以退還，敬請周知。</p>
<p>如預定商品為全款預定金商品，那麼商品正式發行後，則會直接發貨；</p>
<p>如預定商品為定額預定金商品（眾籌預定），那麼商品正式發行後，則需要再補充支付尾款。如若不支付尾款，預定金則不予以退還。</p>
<p>*預定金是指商品正式發行前夕，預定購買時所支付的一定數額的金錢作為擔保。</p>
<p>預定商品的預定金分為全款預定金和定額預定金</p>
</div>
</div>
<div class="catagory" id="catagory2"> <!-- catagory--類目同type -->
<h3 class="h32"></h3>
<!-- div.text 直接形成 -->
<div class="text">
<!-- 正文、 -->
<p>商城發售的海外專輯的全款價格內包含專輯定價+國際郵費+關稅+增值稅+審批費用，不含國內郵費。。</p>
<p>如專輯為眾籌預定商品，則專輯發行後會簡訊通知補款，補款成功後同步計入專輯銷量（韓國專輯計入Hanteo Chart銷量榜）。</p>
</div>
</div>
<div class="catagory" id="catagory3"> <!-- catagory--類目同type -->
<h3 class="h33"></h3>
<!-- div.text 直接形成 -->
<div class="text">
<!-- 正文、 -->
<img src="img/buyer/1.jpg" >
<p>補充說明：</p>
<p>商城發售的海外進口專輯均為預售專輯；</p>
<p>進口外文原版專輯需要報批稽核，並加貼「國家專用進口防偽標識」貼紙。稽核週期約為20個工作日，因需用實體專輯報批，所以在專輯正式發行後才可遞交報批材料。</p>
<p>另外，國際運輸+中國海關開箱驗貨+通關週期約為2周左右。</p>
<p>預售海外專輯預計將於專輯正式發售後40個工作日內發貨。當專輯發行時間與法定假日衝撞時，則會進行順延，具體時間將根據當時情況另行通知。</p>
<p>（此為參考時間，發貨時間以實際情況為準）</p>
</div>
</div>
<div class="catagory" id="catagory4"> <!-- catagory--類目同type -->
<h3 class="h34"></h3>
<!-- div.text 直接形成 -->
<div class="text">
<!-- 正文、 -->
<p>訂購眾籌商品時暫不需要支付郵費，商品補款時支付國內郵費。</p>
<p>全款預定訂單下單時支付國內運費。</p>
<p>郵費計算說明：</p>
<img src="img/buyer/2.jpg" >
<p>商城委託第三方快遞公司為客戶提供送貨服務，客戶無須向快遞公司支付額外的費用。客戶可在商城“我的訂單”查詢貨物配送資訊，也可以登入第三方快遞網站查詢快遞資訊。</p>
<p>注意：港澳臺地區的使用者下單後需聯絡商城QQ客服補運費後才能正常發貨。</p>
<p>下單時請在留言區備註可以聯絡上的QQ，若沒有QQ，請留下郵箱地址，以便工作人員與您取得聯絡。</p>
</div>
</div>
<div class="catagory" id="catagory5"> <!-- catagory--類目同type -->
<h3 class="h35"></h3>
<!-- div.text 直接形成 -->
<div class="text">
<!-- 正文、 -->
<p>商品售出後，如無質量問題不予退換，不接受如 <b>不喜歡、和想象的不一樣、有色差</b>等主觀因素的退換要求。</p>
<p>快遞簽收後7日內，如出現非人為因素的損壞，或密封包裝內的商品有缺失等質量問題，需提供電子訂單，商品和快遞外包裝完整圖片，聯絡音悅商城售後客服進行退、換貨。</p>
<p>如因商城的原因出現少發、漏發等情況，可聯絡商城客服憑商城購物訂單號確認後進行補發；如出現發錯件的情況，可在保持專輯包裝完好、不影響二次銷售的狀態下，進行更換，已拆封的音像製品將無法受理退、換貨，請您諒解。</p>
<p> <span style="color: orangered;">缺失商品的補發、損壞商品換貨的郵費 </span> 均由商城承擔。</p>
<p class="pp">要進行退、換貨時，需將退、換商品寄回，請您先墊付寄回運費，後聯絡商城客服進行退郵費。寄回商品時請發普通快遞，不要使用順豐到付，否則將拒收，退郵費上限為15元，超出部分將由您自己承擔，敬請諒解!</p>
<p>請您一定要當快遞員的面拆件檢查貨品是否完好後再行簽收。如有破損請不要簽收，並交與快遞員原件退回。</p>
<p>如未檢查就簽收包裹而引發問題，商城將無法為您向快遞索賠，造成的損失將由買方承擔。</p>
<p class="zhp">請您一定保證收貨資訊正確，聯絡電話暢通。如因買家原因，快遞公司人員未能與買家聯絡到，導致無法正常收貨或貨品退回出現的商城二次發貨，需要買家補款二次郵費。</p>
</div>
</div>
<div class="tp">
<img src="img/footer_v180123.png" >
</div>
</div>
<!-- 內容結束 -->
<!-- 底部 -->
</body>
</html>
CSS內容部分：
.content{
width: 1000px;
margin: 0 auto;/* margin 元素本身居中 */
}
.content h1{
color: #de4767;/* #de4767--字型顏色效果 */
text-align: center; /* 元素內部:文字居中 */
font-size: 44px;
font-weight: normal; /* 改成正常字型 */
}
/* 浮動容易造成坍塌 可以使用：display */
/* 可以直接使用開發者工具 最直觀的是在介面上更改 */
.content ul{
padding-left: 0px;
text-align: center;
}
.content ul li{
display: inline-block;
/* display: inline; 在一行 */
background-image: url(../img/buyer/mod_circle.png);
background-position: center 5px;
background-repeat: no-repeat;
width: 80px;
height: 40px;
/* 寬高相當於盒子的大小 固定盒子的大小不會出現問題 ---精靈圖的作用 */
}
.content ul li:hover{
background-position: center -95px;
}
.content ul li a{
padding-top: 35px;
display: block;
text-decoration: none;
color: #333;
}
.content ul li a:hover{
color: #DE4767; /* 浮動時字型顏色改變 */
}
/* .catagory{
} */
/* 1 */
.content .catagory .h31{
background-image: url(../img/buyer/mod_title.png);
background-position: 0px -190px;
background-repeat: no-repeat;
width: 300px;
height: 50px;
}
.content .catagory .text{
border: 2px solid #ccc;
border-radius: 10px;
padding: 25px 20px;
text-align: center;
}
.content .catagory .text p {
font-size: 14px;
text-indent: 2em;
/* text-indent: 2em; 首行縮排兩個字元 */
line-height: 2em;
/* 行與行之間的高度 */
margin: 0;
text-align: left;/* 左對齊 */
}
/* .content .catagory .text img{
text-align: center;
} */
/* 2 */
.content .catagory .h32{
background-image: url(../img/buyer/mod_title.png);
background-position: 0px 0px;
background-repeat: no-repeat;
width: 300px;
height: 50px;
}
/* 3 */
.content .catagory .h33{
background-image: url(../img/buyer/mod_title.png);
background-position: 0px -90px;
background-repeat: no-repeat;
width: 300px;
height: 50px;
}
/* 4 */
.content .catagory .h34{
background-image: url(../img/buyer/mod_title.png);
background-position: 0px -285px;
background-repeat: no-repeat;
width: 300px;
height: 50px;
}
/* 5 */
.content .catagory .h35{
background-image: url(../img/buyer/mod_title.png);
background-position: 0px -590px;
background-repeat: no-repeat;
width: 300px;
height: 50px;
}
.content .catagory .text .pp{
background: #DE4767;
color: #fff;
line-height: 2.3em;
margin: 0px;
}
.content .catagory .text .zhp{
/* font-size: 14px; */
/* color: #333333; */
font-weight: bold;
line-height: 2em;
}
.content .tp img{
margin-top: 50px;
margin-left: -90px;
}