第九章课后习题-优快云博客

本文链接：https://blog.youkuaiyun.com/2402_87190919/article/details/143952804

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>服务中心</title>
<style>
    .top {
        width: 1000px;
        height: 120px;
        background: url('../img/logo.jpg') no-repeat;
    }
    .menu {
        width: 1000px;
        height: 60px;
    }
    .left {
        width: 200px;
        height: 600px;
        float: left;
        background: url('../img/left-a.jpg'),
                    url('../img/left-b.jpg');
        background-position: 
            left top, 
            left bottom; /* 设置每张图片的位置 */
        background-repeat: 
            no-repeat, 
            no-repeat; /* 设置每张图片是否重复 */
        background-size: 
            200px 300px,
            200px 300px; /* 设置每张图片的大小 */
    }
    .concent {
        width: 800px;
        height: 600px; /* 增加高度以容纳所有内容 */
        float: left;
        position: relative; /* 使子元素可以相对于它定位 */
    }
    .concent > center {
        text-align: center;
        font-weight: bolder;
        font-size: 24px;
        margin-bottom: 20px;
    }
    .concent > h3 {
        font-weight: bolder;
        font-size: 20px;
        margin-top: 20px;
    }
    .concent > p {
        margin-top: 10px;
    }
    .A, .B, .C {
        width: 264px;
        height: 248px;
        border: 1px solid black;
        text-align: center;
        font-weight: bolder;
        font-size: 30px;
        background-color: white;
        position: absolute; /* 使用绝对定位 */
    }
    .A {
        top: 350px; /* 调整位置 */
        left: 0;
    }
    .B {
        top: 350px; /* 调整位置 */
        left: 270px;
    }
    .C {
        top: 350px; /* 调整位置 */
        left: 540px;
    }
    .A img, .B img, .C img {
        width: 100%; 
        height: 100%; 
        object-fit: cover; /* 保持图片的比例并覆盖整个盒子 */
    }
    .footer {
        width: 1000px;
        height: 60px;
        position: absolute;
        bottom: 63px;
        left: 6px;
        background: url('../img/footer.jpg') no-repeat;
        background-size: contain;
    }
	.menu img {
		float: right;
		margin: 5px 10px;
	}
</style>
</head>
<body>
<div class="top">    
</div>
<div class="body">
    <div class="menu">
		<img src="../img/menu-e.jpg" alt="">
		<img src="../img/menu-d.jpg" alt="">
		<img src="../img/menu-c.jpg" alt="">
		<img src="../img/menu-b.jpg" alt="">
		<img src="../img/menu-a.jpg" alt="">
    </div>
    <div class="left">
    </div>
    <div class="concent">
        <center>常见问题汇总</center>
        <h3>一,如何联系客服</h3>
        <p>最近很多用户到咨询中心提问，为什么客服不在线，客服在线不回复，如何联系客服等问题，您可以联系下面的QQ了解详细解答:(QQ)123000000</p>
        <h3>二,我的订单为什么一直在交易中？</h3>
        <p>很多客户在交易过程中会有这样的困惑:为什么订单一直在交易中？如果您的订单一直在交易中，我们建议你可以联系客服了解原因，您可以联系下面的QQ了解详细解答:(QQ)123000000</p>
        <div class="A"><img src="../img/right-a.jpg" alt=""></div>
        <div class="B"><img src="../img/right-b.jpg" alt=""></div>
        <div class="C"><img src="../img/right-c.jpg" alt=""></div>
    </div>
</div>
<div class="footer">    
</div>
</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>飞跃岩石</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.all{
				background:url('../img/bg (2).jpg')
			}
			.header{
				height: 70px;
				background: url('../img/header_bg (2).jpg');
			}
			.main{
				width: 800px;
				margin-left: auto;
				margin-right: auto;
			}
			.top{
				width: 800px;
				height: 104px;
			}
			.a-left{
				width: 400px;
				height:100px;
				float: left;
				background: url('../img/logo (2).jpg') no-repeat;
			}
			.a-right{
				width: 400px;
				height:100px;
				margin-left: 450px;
			}
			.b,.d,.f{
				width: 820px;
				height: 30px;
				background: url('../img/h_line.png') no-repeat center;
			}
			.c{
				width: 820px;
				height: 260px;
			}
			.e{
				width: 800px;
				height: 304px;
			}
			.e-left{
				width: 400px;
				height: 300px;
				float: left;
			}
			.e-right{
				width: 400px;
				height:300px;
				margin-left: 400px;
			}
			.g{
				width: 820px;
				height:30px;
				text-align: center;
			}
			.bottom{
				height:50px;
				background-color: gainsboro;
				background: url('../img/bottom_bg.jpg');
			}
			.a-left p{
				font-family: '宋体';
				font-style: italic; 
				color: white; 
				margin-top: 55px;
				margin-left: 120px; 
				font-size: 24px;
			}
			h2{
				color: darkgray;
				font-size: 30px;
				font-family: '宋体';
			}
			p,span{
				color: white;
				font-weight: bold;
			}
			a{
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="header"></div>
			<div class="main">
				<div class="top">
					<div class="a-left">
						<p>飞跃岩石</p>	
					</div>
					<div class="a-right">
						<img src="../img/menu1.png"/>
						<img src="../img/menu_divider.png"/>
						<img src="../img/menu2.png"/>
						<img src="../img/menu_divider.png"/>
						<img src="../img/menu3.png"/>
						<img src="../img/menu_divider.png"/>
						<img src="../img/menu4.png"/>
					</div>
				</div>
				<div class="b"></div>
				<div class="c">
					<h2>徒手攀岩</h2>
					<img src="../img/img_1.jpg" width="200px" height="150px"align="right"/>
					<p>徒手攀岩（rock diming with hands）：利用岩石上的裂隆、湯穴，实起等天然把手拳登陡婚岩壁的运动，攀岩是一项般炼综台素质的运动，不仅可以获得谅人的勇气。过人的力量、极好的柔韧性，更可以提高耐力和判断力，使人在激烈竞争。纷繁意乱的都市生活中应付自如。在岩擎上攀爬时，生活简单得只剩下自己。</p>
					<p>徒手攀岩就是不加辅助学岩工具和保护措施的堅岩运动，因而具有极大的危险性，名列世界十大危检运动之列。但是，徒手攀岩正以具特有的魅力，突出的个性感染着人们，参与攀岩，会让人在与悬崖梢壁的抗衡中学会坚强，在与大山的拥抱中感受宽容，在位服率登路线后享受成功与胜利的喜悦。</p>
					<span>在欧美，前苏联及亚洲的日本、韩国，攀岩运动已相当流行，当今世界攀岩水平数欧美特別是法国与美国品高，法国相对在人工岩壁上占优，美国在自然岩壁称强。在亚洲，日本、韩国水平较高，他们有些选手已达到世界水平。中国大陆、香港及台湾的水平大体相当，同展亚洲中流水平。</span>
					<a href="#">Read More...</a>
				</div>
				<div class="d"></div>
				<div class="e">
					<div class="e-left">
						<img src="../img/img_2.jpg" width="150px" height="200px" align="left"/>
						<h2>起源</h2>
						<p>翠岩运动起源于18世纪的欧洲，1970年成第一项独立的运动项目。徒手學岩是指不依義任何外在的辅助力量，只肇攀登者的自身力量完成拳登过程。</p>
						<p>在欧美、前苏联及亚洲的日本、韩国，徒手攀岩运动已相当流行，当今世界攀岩水平数欧美待别是法国与美国最高，法国相对在人工岩壁上占优，美国在自然岩壁称强。在亚洲，日本、韩国水乎较高，他们有些选手已达到世界水平，中国大陆、香港及台湾的水平大体相当，同展亚洲中流水平。</p>
					</div>
					<div class="e-right">
						<img src="../img/img_3.jpg" width="150px" height="200px" align="left"/>
						<h2>运动特点</h2>
						<p>徒手不岩要求人们在各种高度及角度的岩壁上，连续完成转身、引体向上、腾徽基至洗跃等该险动作，集健息、娱乐、竞技于一具，是一顶刺激而不失优美的极限运动，校全球的不岩送们你为”请提上的芭查。</p>
						<p>虽然，近年来攀岩已渐渐成为了一种大众化的户外议限运动，越来越多的人从攀岩运动中体验到了独特的乐趣，但是徒手攀岩对人的体能、胆量、身体协调性和染初性的要求极高，对于那些没有经过系统的专业训练的初学者来说无凝是危险重重。</p>
					</div>
				</div>
				<div class="f"></div>
				<div class="g">
					<span>版权所有&copy;</span><a href="#">飞跃岩石
				</div>
			</div>	
			<div class="bottom"></div>
		</div>
	</body>
</html>