html+css基礎例項原始碼
//=========================================================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>購物須知</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>如預定商品為全款預定金商品，那麼商品正式發行後，則會直接發貨；</p>
<p>如預定商品為定額預定金商品（眾籌預定），那麼商品正式發行後，則需再補充支付尾款。如若不支付尾款，預定金則不予以退還。</p>
<p>*預定金是指商品正式發行前夕，預定購買時所支付的一定數額的金錢作為擔保。</p>
<p>預定商品的預定金分為全款預定金和定額預定金兩種形式。</p>
</div>
</div>
<div class="type" id="type2">
<h3></h3>
<div class="text">
<p>商城發售的海外專輯的全款價格內包含專輯定價+國際郵費+關稅+增值稅+審批費用，不含國內郵費。</p>
<p>如專輯為眾籌預定商品，則專輯發行後會簡訊通知補款，補款成功後同步計入專輯銷量（韓國專輯計入Hanteo Chart銷量榜）。</p>
</div>
</div>
<div class="type" id="type3">
<h3></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" id="type4">
<h3></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" id="type5">
<h3></h3>
<div class="text">
<p>商品售出後，如無質量問題不予退換，<span>不接受如不喜歡、和想象的不一樣、有色差</span>等主觀因素的退換要求。</p>
<p>快遞簽收後7日內，如出現非人為因素的損壞，或密封包裝內的商品有缺失等質量問題，需提供電子訂單，商品和快遞外包裝完整圖片，聯絡音悅商城售後客服進行退、換貨。</p>
<p>如因商城的原因出現少發、漏發等情況，可聯絡商城客服憑商城購物訂單號確認後進行補發；如出現發錯件的情況，可在保持專輯包裝完好、不影響二次銷售的狀態下，進行更換，已拆封的音像製品將無法受理退、換貨，請您諒解。</p>
<p><span style="color: #DE4767;">缺失商品的補發、損壞商品換貨的郵費</span>均由商城承擔。</p>
<p class="t"><span>要進行退、換貨時，需將退、換商品寄回，請您先墊付寄回運費，後聯絡商城客服進行退郵費。寄回商品時請發普通快遞，不要使用順豐到付，否則將拒收，退郵費上限為15元，超出部分將由您自己承擔，敬請諒解</p>
<p>請您一定要當快遞員的面拆件檢查貨品是否完好後再行簽收。如有破損請不要簽收，並交與快遞員原件退回。</span></p>
<p>如未檢查就簽收包裹而引發問題，商城將無法為您向快遞索賠，造成的損失將由買方承擔。</p>
<p><span>請您一定保證收貨資訊正確，聯絡電話暢通。如因買家原因，快遞公司人員未能與買家聯絡到，導致無法正常收貨或貨品退回出現的商城二次發貨，需要買家補款二次郵費。</span></p>
</div>
</div>
<div class="jio">
</div>
</div>
<!-- 內容結束 -->
</body>
</html>
//=================================================css
.content{
width: 1000px;
margin:0 auto;
/* background: aqua; */
}
.content h1{
color: #de4767;
text-align: center;
font-size: 44px;
font-weight: normal;
}
.content ul{
list-style: none;
padding: 0px;
text-align: center;
}
.content ul li{
display: inline-block;
background: url(../img/buyer/mod_circle.png);
background-repeat: no-repeat;
background-position:center 0;
margin: auto;
width: 100px;
height: 40px;
}
.content ul li:hover{
background-position:center -95px;
}
.content ul li a{
text-decoration: none;
padding-top: 40px;
display: block;
color: #333;
}
.content ul li a:hover{
color: #DE4767;
}
.content .type h3{
background: url(../img/buyer/mod_title.png);
background-position:0px -190px;
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{
text-align: left;
font-size: 14px;
text-indent: 2em;
line-height: 2em;
margin: 0px;
}
.content #type2 h3{
background: url(../img/buyer/mod_title.png);
background-position:0px 0px;
background-repeat: no-repeat;
width: 300px;
height: 50px;
}
.content #type3 h3{
background: url(../img/buyer/mod_title.png);
background-position:0px -83px;
background-repeat: no-repeat;
width: 300px;
height: 50px;
}
.content #type4 h3{
background: url(../img/buyer/mod_title.png);
background-position:0px -280px;
background-repeat: no-repeat;
width: 300px;
height: 50px;
}
.content .type .text img{
margin: 30px;
}
.content #type5 h3{
background: url(../img/buyer/mod_title.png);
background-position:0px -589px;
background-repeat: no-repeat;
width: 300px;
height: 50px;
}
.content #type5 .t{
color: aliceblue;
background: #DE4767;
margin: 5px;
}
.content #type5 span{
font-weight: bold;
}
.content .jio {
margin-top: 40px;
background: url(../img/footer_v180123.png);
background-position:-80px 0px;
background-repeat: no-repeat;
width: 1100px;
height: 60px;
}