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