第一个项目/页面1总结

转载

mb5fdb1365b75a0 2021-10-25 20:02:00

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;
}