第一個專案/頁面1總結
html部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="reading.css"/>
</head>
<body>
<!-- 內容開始 -->
<div class="content">
<h1>購物須知</h1>
<ul>
<li><a href="">預定商品</a></li>
<li><a href="">專輯價格</a></li>
<li><a href="">發貨週期</a></li>
<li><a href="">快遞</a></li>
<li><a href="">售後相關</a></li>
</ul>
<div class="type">
<h3 class="t1"></h3>
<div class="text">
<p>預定商品：非現貨的商品，為確保供貨數量以及避免過量囤積，因此將通過收取預定金的形式進行把控，且無論是哪種形式的預定商品，預定金一旦支付成功，均不予以退還，敬請周知。</p>
<p>如預定商品為全款預定金商品，那麼商品正式發行後，則會直接發貨；</p>
<p>如預定商品為定額預定金商品（眾籌預定），那麼商品正式發行後，則需再補充支付尾款。如若不支付尾款，預定金則不予以退還。</p>
<p>*預定金是指商品正式發行前夕，預定購買時所支付的一定數額的金錢作為擔保。</p>
<p>預定商品的預定金分為全款預定金和定額預定金兩種形式。</p>
</div>
</div>
<div class="type">
<h3 class="t2"></h3>
<div class="text">
<p>商城發售的海外專輯的全款價格內包含專輯定價+國際郵費+關稅+增值稅+審批費用，不含國內郵費。</p>
<p>如專輯為眾籌預定商品，則專輯發行後會簡訊通知補款，補款成功後同步計入專輯銷量（韓國專輯計入Hanteo Chart銷量榜）。</p>
</div>
</div>
<div class="type">
<h3 class="t3"></h3>
<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="type">
<h3 class="t4"></h3>
<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="type">
<h3 class="t5"></h3>
<div class="text">
<p>商品售出後，如無質量問題不予退換，不接受如<span class="f1">不喜歡、和想象的不一樣、有色差</span>等主觀因素的退換要求。</p>
<p>快遞簽收後7日內，如出現非人為因素的損壞，或密封包裝內的商品有缺失等質量問題，需提供電子訂單，商品和快遞外包裝完整圖片，聯絡音悅商城售後客服進行退、換貨。</p>
<p>如因商城的原因出現少發、漏發等情況，可聯絡商城客服憑商城購物訂單號確認後進行補發；如出現發錯件的情況，可在保持專輯包裝完好、不影響二次銷售的狀態下，進行更換，已拆封的音像製品將無法受理退、換貨，請您諒解。</p>
<p><span class="f2">缺失商品的補發、損壞商品換貨的郵費</span>均由商城承擔。</p>
<p class="f3">要進行退、換貨時，需將退、換商品寄回，請您先墊付寄回運費，後聯絡商城客服進行退郵費。寄回商品時請發普通快遞，不要使用順豐到付，否則將拒收，退郵費上限為15元，超出部分將由您自己承擔，敬請諒解</p>
<p>請您一定要當快遞員的面拆件檢查貨品是否完好後再行簽收。如有破損請不要簽收，並交與快遞員原件退回。</p>
<p>如未檢查就簽收包裹而引發問題，商城將無法為您向快遞索賠，造成的損失將由買方承擔。</p>
<p>請您一定保證收貨資訊正確，聯絡電話暢通。如因買家原因，快遞公司人員未能與買家聯絡到，導致無法正常收貨或貨品退回出現的商城二次發貨，需要買家補款二次郵費。</p>
</div>
</div>
<div class="img">
<img src="img/footer_v180123.png" >
</div>
</div>
<!-- 內容結尾 -->
</body>
</html>
css部分：
.content{
width: 1000px;
margin: 0 auto;
}
.content h1{
color: #de4767;
font-size: 44px;
font-weight: normal;
/* font-weight: normal; 字型粗細 */
text-align: center;
}
.content ul{
list-style: none;
text-align: center;
padding-left: 0px;
margin-top: 20px;
}
.content ul li{
/* display: inline-block;顯示在一行 */
display: inline-block;
background-image: url(img/buyer/mod_circle.png);
/* background-position: center 5px;背景的位置 */
background-position: center 5px;
background-repeat: no-repeat;
width: 80px;
height: 30px;
}
.content ul li a{
/* text-decoration: none; 清除a標籤下劃線 */
text-decoration: none;
/* display: block; 讓a標籤具有塊狀標籤的特性 */
display: block;
padding-top: 40px;
color: #333;
}
.content ul li:hover{
background-position: center -95px;
}
.content ul li a:hover{
color: #de4767;
}
.content .type .t1{
background-image: url(img/buyer/mod_title.png);
background-position: 0px -189px;
background-repeat: no-repeat;
width: 300px;
height: 50px;
}
.content .type .t2{
background-image: url(img/buyer/mod_title.png);
background-position: 0px 5px;
background-repeat: no-repeat;
width: 300px;
height: 50px;
}
.content .type .t3{
background-image: url(img/buyer/mod_title.png);
background-position: 0px -88px;
background-repeat: no-repeat;
width: 300px;
height: 50px;
}
.content .type .t4{
background-image: url(img/buyer/mod_title.png);
background-position: 0px -282px;
background-repeat: no-repeat;
width: 300px;
height: 50px;
}
.content .type .t5{
background-image: url(img/buyer/mod_title.png);
background-position: 0px -586px;
background-repeat: no-repeat;
width: 300px;
height: 50px;
}
.content .type .text{
border: 2px solid #ccc;
border-radius: 10px;
padding: 15px 20px;
text-align: center;
}
.content .type .text p{
font-size: 14px;
text-indent: 2em;
line-height: 2em;
margin: 0px;
text-align: left;
color: #333;
}
.content .type .text .f1{
font-size: 16px;
color: black;
font-weight: bold;
}
.content .type .text .f2{
color: #de4767;
}
.content .type .text .f3{
display: block;
background: #d34462;
color: white;
/* text-indent: 3em; 首行縮排3個字元 */
text-indent: 3em;
padding: 10px;
margin-bottom: 20px;
}
.img img{
margin-left: -90px;
margin-top: 40px;
}