html代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>服务中心</title><link type="text/css" href="../css/322-1.css" rel="stylesheet"/></head><body><div class="top"></div><div class="menu"><img src="../img/menu-e.jpg"/><img src="../img/menu-d.jpg"/><img src="../img/menu-c.jpg"/><img src="../img/menu-b.jpg"/><img src="../img/menu-a.jpg"/></div><div class="left"></div><div class="left2"></div><div class="content"><div class="content2"><span id="f1">常见问题汇总</span><br /><span id="f2">一、如何联系客服？</span><br /><br /><span id="f3">最近很多用户到咨询中心提问，为什么客服不在线、客服在线不回复、如何联系客服等问题，您可以联系下面的QQ了解详细解答：(QQ)123000000。</span><br /><br /><span id="f2">二、我的订单为什么一直在交易中?</span><br /><br /><span id="f3">很多客户在交易过程中会有这样的困惑；为什么订单一直在交易中?如果您的订单一直在交易中，我们建议您可以联系客服了解原因，您可以联系下面的QQ了解详细解答：(QQ)123000000。</span></div><div id="d1"></div><div id="d2"></div><div id="d3"></div></div><div class="footer"></div></body>
</html>css代码
*{width: 100%;height: 100%;margin: 0;padding: 0;color: #000000;margin-left: 30px;}img{width: 105px;float: right;}.top{width: 800px;height: 100px;background-image: url(../img/logo.jpg);background-repeat: no-repeat;}.left{width: 200px;height: 505px;margin-top: 30px;background-image: url(../img/left-a.jpg);background-repeat: no-repeat;}.left2{width: 200px;height: 190px;margin-top: -200px;background-image: url(../img/left-b.jpg);background-repeat: no-repeat;}.menu{width: 800px;height: 50px;}.content{width: 600px;height: 500px;margin-left: 230px;margin-top: -520px;position: absolute;}.content2{width: 600px;height: 300px;position: absolute;margin-left: -0px;}#d1{width: 195px;height: 200px;margin-top: 300px;margin-left: -0px;position: absolute;background-image: url(../img/right-a.jpg);}#d2{width: 195px;height: 200px;margin-left: 200px;margin-top: 300px;position: absolute;background-image: url(../img/right-b.jpg);}#d3{width: 195px;height: 200px;margin-left: 400px;margin-top: 300px;position: absolute;background-image: url(../img/right-c.jpg);}.footer{width: 800px;height: 50px;background-image: url(../img/footer.jpg);}#f1{padding-left: 200px;font-size: 20px;font-weight: bold;}#f2{font-size: 20px;font-weight: bold;float: left;margin-left: 0;position: absolute;}#f3{font-size: 16px;margin-left: 0;}
html代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>飞跃岩石</title><link href="../css/322-2.css" type="text/css" rel="stylesheet"/></head><body><div class="header"></div><div class="A-left"><span class="f1">飞天岩石</span><img src="../img/logo (2).jpg" /></div><div class="A-right"><div class="image-container"><img src="../img/menu4.png"/><img src="../img/menu3.png"/><img src="../img/menu2.png"/><img src="../img/menu1.png"/></div></div><div class="B"><span class="f2">徒手攀岩</span></div><div class="C">徒手举岩(rock diming with hands)：利用岩石上的裂缝、洞穴、突起等天然把手拳登疑峭岩壁的运动，举岩是一项城炼综合素质的运动<br />，不仅可以获得惊人的勇气、过人的力量、极好的柔韧性，更可以提高耐力和判断力，使人在激烈竞争、纷震激乱的都市生活中应付自如<br />。在岩壁上军爬时，生活简单得只剩下自己。徒手拳岩就是不加辅动学岩工具和保护措施的壑岩运动，因而具有极大的危险性，名列世界<br />十大危险运动之列，但是，徒手举岩正以其持有的感力，突出的个性感染着人们，参与举岩，会让人在与县崖峭壁的抗街中学会坚强，在<br />与大山的拥抱中感受宽容。在征服举登路线后享受成功与胜利的喜悦<br />在欧美、前苏联及亚洲的日本、韩国拳岩运动已相当流行、当今世界攀岩水平数欧美特别是法国与美国最高，法国相对在人工若堂上占优，<br />美国在自然岩院称强。在亚洲，日本、韩国水平较高，他们有些选手已达到世界水平。中国大陆、香港及台湾的水平大体相当，同民业洲<br />中流水平。<a href="#">Read More...</a><div class="image-container2"><img src="../img/img_1.jpg"/></div></div><div class="D"><hr /></div><div class="E-left"> <span class="f3">起源</span><br /><blockquote class="f4">攀岩运动起源于18世纪的欧洲，1970年成为一项独立的运动项目。徒手攀岩是指不依赖任何外在的辅助力量，只靠拳登者的自身力量完成攀登过程，在欧美、前苏联及亚洲的日本、韩国，徒手举岩运动已运动，被全球的举岩迷们称为“销壁上的芭器。相当流行，当今世界参岩水平数欧美特别是法国与美国虽然，近年来举岩已渐渐成为了一种大众化的户外极限最高，法国相对在人工岩壁上占优，美国在自然岩壁称运动，越来越多的人从举岩运动中体验到了独特的乐强，在亚洲，日本、数国水平轮高、他们有些选手已达到世界水平。中国大陆、趣，但是徒手攀岩对人的休能、胆景、身体协调性和柔扬性的要求极高，对于那香港及台湾的水平大体相当，同民亚洲中流水平、</blockquote><div class="image-container3"><img src="../img/img_2.jpg"/></div></div><div class="E-right"> <span class="f3">运动特点</span><br /><blockquote class="f5">徒手举岩要求人们在各种高度及角度的岩壁上，连续转身、引体向上、腾挪甚至获跃等惊险动作，集健身、娱乐<br />、竞技于一身，是一项刺激而不失优美的极限运动，被全球的举岩迷们你为“峭壁上的芭蕾”。虽然，近年来举<br />岩已渐渐成为了一种大众化的户外极限运动，越来越多的人从举岩运动中体验到了独特的乐趣，但是徒手攀岩对人<br />的体能、胆量、身体协调性和柔韧性的要求极高，对于那些没有经过系统的专业训练的初学者来说无疑是危险重重。</blockquote><div class="image-container4"><img src="../img/img_3.jpg"/></div></div><div class="F"><hr /></div><div class="G"><center>版权所有©<a href="#">飞跃岩石</a></center></div><div class="bottom"></div></body>
</html>css代码
*{width: 100%;height: 100%;margin: 0;padding: 0;background-color: #000000;color: white;line-height: 30px;}.all{width: 100%;height: 100%;}.header{width: 100%;height: 80px;background-image: url(../img/header_bg.jpg);}.A-left{width: 550px;height: 100px;margin-left: 70px;position: absolute;}.f1{border: 550px;height: 50px;color: #ffffff;font-size: 20px;left: 130px;bottom: -20px;font-style: italic;position: absolute;background-color: transparent;//去除默认背景色}.f2{color: #D3D3D3;font-size: 25px;background-color: #000000;}.f3{font-size: 25px;color: #D3D3D3;margin-left: 150px;}.f4{font-size: 8px;margin-left: 215px;}.f5{font-size: 8px;margin-left: 215px;}.A-right{width: 550px;height: 100px;margin-left: 620px;margin-top: -0px;position: absolute;}.B{width: 1150px;height: 50px;margin-left: 70px;margin-top: 100px;position: absolute;}.C{width: 1155px;height: 250px;margin-left: 70px;margin-top: 150px;position: absolute;}.D{width: 1150px;height: 40px;margin-left: 70px;margin-top: 400px;position: absolute;}.E-left{width: 550px;height: 200px;margin-left: 70px;margin-top: 450px;position: absolute;}.E-right{width: 550px;height: 200px;margin-left: 620px;margin-top: 450px;position: absolute;}.F{width: 1200px;height: 20px;margin-left: 70px;margin-top: 660px;position: absolute;}.G{width: 1150px;height: 50px;margin-left: 80px;margin-top: 700px;position: absolute;}.bottom{width: 100%;height: 50px;margin-top: 750px;position: absolute;background-image: url(../img/bottom_bg.jpg);}.image-container {margin-left: 10px;display: flex;flex-direction: row;}.image-container img {padding-left: 30px;margin-right: 20px; /* 根据实际需求调整间距值 */}.image-container2{margin-left: 10px;}.image-container2 img{width: 200px;height: auto;border: 1px solid #ffffff;margin-top: -240px;margin-left: 900px;float: right;}.image-container3{margin-left: 10px;}.image-container3 img{width: 200px;height: 200px;border: 1px solid #ffffff;margin-top: -250px;float: left;}.image-container4{margin-left: 10px;}.image-container4 img{width: 200px;height: 200px;border: 1px solid #ffffff;margin-top: -250px;float: left;}hr{border-bottom: 1px;border-left: none;border-right: none;}
