哇塞塞！今天的一个页面啊。（HTML+CSS）10.25哇！reading
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默认大小32px --> <h1>购物须知</h1> <!-- ul>(li>a{$})*5 直接生成五个内容 --> <ul> <li><a href="#catagory1">预定商品</a></li> <li><a href="#catagory2">专辑价格</a></li> <li><a href="#catagory3">发货周期</a></li> <li><a href="#catagory4">快递</a></li> <li><a href="#catagory5">售后相关</a></li> </ul> <div class="catagory" id="catagory1"> <!-- catagory--类目同type --> <h3 class="h31"></h3> <!-- div.text 直接形成 --> <div class="text"> <!-- 正文、 --> <p>预定商品：非现货的商品，为确保提供货数量以及避免过量囤积，因此将通过收取预定金的形式进行把控，且无论是那种形式的预定商品，预定金一旦支付成功，均不予以退还，敬请周知。</p> <p>如预定商品为全款预定金商品，那么商品正式发行后，则会直接发货；</p> <p>如预定商品为定额预定金商品（众筹预定），那么商品正式发行后，则需要再补充支付尾款。如若不支付尾款，预定金则不予以退还。</p> <p>*预定金是指商品正式发行前夕，预定购买时所支付的一定数额的金钱作为担保。</p> <p>预定商品的预定金分为全款预定金和定额预定金</p> </div> </div> <div class="catagory" id="catagory2"> <!-- catagory--类目同type --> <h3 class="h32"></h3> <!-- div.text 直接形成 --> <div class="text"> <!-- 正文、 --> <p>商城发售的海外专辑的全款价格内包含专辑定价+国际邮费+关税+增值税+审批费用，不含国内邮费。。</p> <p>如专辑为众筹预定商品，则专辑发行后会短信通知补款，补款成功后同步计入专辑销量（韩国专辑计入Hanteo Chart销量榜）。</p> </div> </div> <div class="catagory" id="catagory3"> <!-- catagory--类目同type --> <h3 class="h33"></h3> <!-- div.text 直接形成 --> <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="catagory" id="catagory4"> <!-- catagory--类目同type --> <h3 class="h34"></h3> <!-- div.text 直接形成 --> <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="catagory" id="catagory5"> <!-- catagory--类目同type --> <h3 class="h35"></h3> <!-- div.text 直接形成 --> <div class="text"> <!-- 正文、 --> <p>商品售出后，如无质量问题不予退换，不接受如 <b>不喜欢、和想象的不一样、有色差</b>等主观因素的退换要求。</p> <p>快递签收后7日内，如出现非人为因素的损坏，或密封包装内的商品有缺失等质量问题，需提供电子订单，商品和快递外包装完整图片，联系音悦商城售后客服进行退、换货。</p> <p>如因商城的原因出现少发、漏发等情况，可联系商城客服凭商城购物订单号确认后进行补发；如出现发错件的情况，可在保持专辑包装完好、不影响二次销售的状态下，进行更换，已拆封的音像制品将无法受理退、换货，请您谅解。</p> <p> <span style="color: orangered;">缺失商品的补发、损坏商品换货的邮费 </span> 均由商城承担。</p> <p class="pp">要进行退、换货时，需将退、换商品寄回，请您先垫付寄回运费，后联系商城客服进行退邮费。寄回商品时请发普通快递，不要使用顺丰到付，否则将拒收，退邮费上限为15元，超出部分将由您自己承担，敬请谅解!</p> <p>请您一定要当快递员的面拆件检查货品是否完好后再行签收。如有破损请不要签收，并交与快递员原件退回。</p> <p>如未检查就签收包裹而引发问题，商城将无法为您向快递索赔，造成的损失将由买方承担。</p> <p class="zhp">请您一定保证收货信息正确，联系电话畅通。如因买家原因，快递公司人员未能与买家联系到，导致无法正常收货或货品退回出现的商城二次发货，需要买家补款二次邮费。</p> </div> </div> <div class="tp"> <img src="img/footer_v180123.png" > </div> </div> <!-- 内容结束 --> <!-- 底部 --> </body> </html>
CSS内容部分：
.content{ width: 1000px; margin: 0 auto;/* margin 元素本身居中 */ } .content h1{ color: #de4767;/* #de4767--字体颜色效果 */ text-align: center; /* 元素内部:文本居中 */ font-size: 44px; font-weight: normal; /* 改成正常字体 */ } /* 浮动容易造成坍塌 可以使用：display */ /* 可以直接使用开发者工具 最直观的是在界面上更改 */ .content ul{ padding-left: 0px; text-align: center; } .content ul li{ display: inline-block; /* display: inline; 在一行 */ background-image: url(../img/buyer/mod_circle.png); background-position: center 5px; background-repeat: no-repeat; width: 80px; height: 40px; /* 宽高相当于盒子的大小 固定盒子的大小不会出现问题 ---精灵图的作用 */ } .content ul li:hover{ background-position: center -95px; } .content ul li a{ padding-top: 35px; display: block; text-decoration: none; color: #333; } .content ul li a:hover{ color: #DE4767; /* 浮动时字体颜色改变 */ } /* .catagory{ } */ /* 1 */ .content .catagory .h31{ background-image: url(../img/buyer/mod_title.png); background-position: 0px -190px; background-repeat: no-repeat; width: 300px; height: 50px; } .content .catagory .text{ border: 2px solid #ccc; border-radius: 10px; padding: 25px 20px; text-align: center; } .content .catagory .text p { font-size: 14px; text-indent: 2em; /* text-indent: 2em; 首行缩进两个字符 */ line-height: 2em; /* 行与行之间的高度 */ margin: 0; text-align: left;/* 左对齐 */ } /* .content .catagory .text img{ text-align: center; } */ /* 2 */ .content .catagory .h32{ background-image: url(../img/buyer/mod_title.png); background-position: 0px 0px; background-repeat: no-repeat; width: 300px; height: 50px; } /* 3 */ .content .catagory .h33{ background-image: url(../img/buyer/mod_title.png); background-position: 0px -90px; background-repeat: no-repeat; width: 300px; height: 50px; } /* 4 */ .content .catagory .h34{ background-image: url(../img/buyer/mod_title.png); background-position: 0px -285px; background-repeat: no-repeat; width: 300px; height: 50px; } /* 5 */ .content .catagory .h35{ background-image: url(../img/buyer/mod_title.png); background-position: 0px -590px; background-repeat: no-repeat; width: 300px; height: 50px; } .content .catagory .text .pp{ background: #DE4767; color: #fff; line-height: 2.3em; margin: 0px; } .content .catagory .text .zhp{ /* font-size: 14px; */ /* color: #333333; */ font-weight: bold; line-height: 2em; } .content .tp img{ margin-top: 50px; margin-left: -90px; }
开心，学到了一招。
