第一個專案/頁面1
CSS部分：
.content{
width:1000px;
margin: 0 auto;
}
.content h1{
color: #de4767;
text-align: center;
font-size: 44px;
font-weight: normal;
}
.content ul{
padding-left: 0px;
text-align: center;
}
.content ul li{
display: inline-block;/*放在一行*/
background-image: url(../img/buyer/mod_circle.png);/*圖片*/
background-repeat: no-repeat;/*不重複*/
background-position: center 5px;/*區域*/
width: 80px;
height: 30px;
}
.content ul li:hover{
background-position: center -95px;/*向下 向右移動為正 向左 向上為負*/
}
.content ul li a{
padding-top: 40px;
display: block;
text-decoration: none;
color: #333;
}
.content ul li a:hover{
color: #de4767;
}
/*.li{
text-align: -webkit-match-parent;
}*/
.content .type h3{
background-image: url(../img/buyer/mod_title.png);
background-repeat: no-repeat;/*不重複*/
/*background-position: 0px -190px;/*區域*/
width: 300px;
height: 50px;
}
.c1{background-position: 0px -190px;}
.c2{background-position: 0px 5px;}
.c3{background-position: 0px -88px;}
.c4{background-position: 0px -282px;}
.c5{background-position: 0px -586px;}
.content .type .text{
border: 2px solid #ccc;
border-radius: 10px;
padding: 25px 20px;
text-align: center;
}
.content .type .text p{
text-align: left;
font-size: 14px;
text-indent: 2em;
line-height: 2em;
margin: 0;
}
.b{
font-size: 16px;
font-weight: bold;
}
.d{
color: #D34462;
}
.y{
display: block;
background-color:#d34462;
color: azure;
}
.h img{
margin-left: -89px;
margin-top: 40px;
}
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/gouwuxuzhi%20.css"/>
</head>
<body>
<!-- 內容開始 -->
<!-- div.content -->
<div class="content">
<h1>購物須知</h1>
<!-- ul>(li>a{$})*5 按Tab -->
<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 class="c1"></h3>
<!-- div.text 按Tab-->
<div class="text">
<p>非現貨的商品，為確保供貨數量以及避免過量囤積，因此將通過收取預定金的形式進行把控，
且無論是哪種形式的預定商品，預定金一旦支付成功，均不予以退還，敬請周知。</p>
<p>如預定商品為全款預定金商品，那麼商品正式發行後，則會直接發貨；</p>
<p>如預定商品為定額預定金商品（眾籌預定），那麼商品正式發行後，則需再補充支付尾款。
如若不支付尾款，預定金則不予以退還。</p>
<p>預定金是指商品正式發行前夕，預定購買時所支付的一定數額的金錢作為擔保。</p>
<p>預定商品的預定金分為全款預定金和定額預定金兩種形式。</p>
</div>
</div>
<div class="type" id="type2">
<h3 class="c2"></h3>
<!-- div.text 按Tab-->
<div class="text">
<p>商城發售的海外專輯的全款價格內包含專輯定價+國際郵費+關稅+增值稅+審批費用，不含國內郵費。</p>
<p>如專輯為眾籌預定商品，則專輯發行後會簡訊通知補款，補款成功後同步計入專輯銷量
（韓國專輯計入Hanteo Chart銷量榜）。</p>
</div>
</div>
<div class="type" id="type3">
<h3 class="c3"></h3>
<!-- div.text 按Tab-->
<div class="text">
<p><img src="img/buyer/1.jpg" ></p>
<p>補充說明：</p>
<p>商城發售的海外進口專輯均為預售專輯；</p>
<p>進口外文原版專輯需要報批稽核，並加貼「國家專用進口防偽標識」貼紙。稽核週期約為20個工作日，
因需用實體專輯報批，所以在專輯正式發行後才可遞交報批材料。</p>
<p>另外，國際運輸+中國海關開箱驗貨+通關週期約為2周左右。</p>
<p>預售海外專輯預計將於專輯正式發售後40個工作日內發貨。當專輯發行時間與法定假日衝撞時，
則會進行順延，具體時間將根據當時情況另行通知。</p>
</div>
</div>
<div class="type" id="type4">
<h3 class="c4"></h3>
<!-- div.text 按Tab-->
<div class="text">
<p>訂購眾籌商品時暫不需要支付郵費，商品補款時支付國內郵費。</p>
<p>全款預定訂單下單時支付國內運費。</p>
<p>郵費計算說明：</p>
<p><img src="img/buyer/2.jpg" ></p>
<p>商城委託第三方快遞公司為客戶提供送貨服務，客戶無須向快遞公司支付額外的費
用。客戶可在商城“我的訂單”查詢貨物配送資訊，也可以登入第三方快遞網站查詢快遞資訊。</p>
<p>注意：港澳臺地區的使用者下單後需聯絡商城QQ客服補運費後才能正常發貨。</p>
<p>
下單時請在留言區備註可以聯絡上的QQ，若沒有QQ，請留下郵箱地址，以便工作人員與您取得聯絡。</p>
</div>
</div>
<div class="type" id="type5">
<h3 class="c5"></h3>
<!-- div.text 按Tab-->
<div class="text">
<p>商品售出後，如無質量問題不予退換，不接受如<span class="b">不喜歡、和想象的不一樣、有色差</span>等主觀因素的退換要求。</p>
<p>快遞簽收後7日內，如出現非人為因素的損壞，或密封包裝內的商品有缺失等質量問題，需提供電子訂單，
商品和快遞外包裝完整圖片，聯絡音悅商城售後客服進行退、換貨。</p>
<p>如因商城的原因出現少發、漏發等情況，可聯絡商城客服憑商城購物訂單號確認後進行補發；如出現發錯件
的情況，可在保持專輯包裝完好、不影響二次銷售的狀態下，進行更換，已拆封的音像製品將無法受理退、換貨，請您諒解。</p>
<p><span class="d">缺失商品的補發、損壞商品換貨的郵費</span>均由商城承擔。</p>
<p class="y">要進行退、換貨時，需將退、換商品寄回，請您先墊付寄回運費，後聯絡商城客服進行退郵費。寄回商品時請發普通快遞，
不要使用順豐到付，否則將拒收，退郵費上限為15元，超出部分將由您自己承擔，敬請諒解</p>
<p>請您一定要當快遞員的面拆件檢查貨品是否完好後再行簽收。如有破損請不要簽收，並交與快遞員原件退回。</p>
<p>如未檢查就簽收包裹而引發問題，商城將無法為您向快遞索賠，造成的損失將由買方承擔。</p>
<p>請您一定保證收貨資訊正確，聯絡電話暢通。如因買家原因，快遞公司人員未能與買家聯絡到，導致無法正
常收貨或貨品退回出現的商城二次發貨，需要買家補款二次郵費。</p>
</div>
</div>
<div class="h">
<img src="img/footer_v180123.png" >
</div>
</div>
<!-- 內容結束 -->
</body>
</html>