第九章习题

最新推荐文章于 2025-05-29 10:17:42 发布

喜欢败给现实

最新推荐文章于 2025-05-29 10:17:42 发布

阅读量268

点赞数 5

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/2301_81053053/article/details/143820760

版权

服务中心

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>服务中心</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.all{
				width: 800px;
				height: 700px;
				margin: 0px auto;
			}
			.top{
				width: 100%;
				height: 100px;
				text-align: center;
				background: url(img/logo2.jpg) no-repeat;
			}
			.menu{
				width: 100%;
				height: 60px;
				text-align: center;
			}
			.menu img{
				float: right;
				width: 120px;
				height: 40px;
				padding: 5px;
			}
			.main{
				width: 100%;
				height: 480px;
			}
			.left{
				width: 200px;
				height: 480px;
				float: left;
			}
			.right{
				width: 600px;
				height: 480px;
				margin-left: 200px;
				line-height: 25px;
			}
			table{
				width: 150px;
				height: 200px;
				margin-top: 80px;
			}
			td img{
				width: 198px;
				height: 200px;	
			}
			.footer{
				width: 100%;
				height: 30px;
				text-align: center;
				background: url(img/footer.jpg);
			}
		</style>		
	</head>
	<body>
		<div class="all">
			<div class="top"></div>
			<div class="menu">
					<img src="img/menu-a.jpg"/>
					<img src="img/menu-b.jpg"/>
					<img src="img/menu-c.jpg"/>
					<img src="img/menu-d.jpg"/>
					<img src="img/menu-e.jpg"/>
			</div>
			<div class="main">
				<div class="left">
					<img src="img/left-a.jpg"/>
					<img src="img/left-b.jpg"/>
				</div>
				<div class="right">
					<h3 align="center">常见问题汇总</h3>
					<h3>一、如何联系客服？</h3>
					<p>最近很多用户到咨询中心提问，为什么客服不在线、客服在线不回复、如何联系客服等问题，您可以联系下面的QQ了解详细解答:(QQ)123000000。</p>
					<h3>二、我的订单为什么一直在交易中？</h3>
					<p>很多客户在交易过程中会有这样的困惑：为什么订单一直在交易中？如果您的订单一直在交易中，我们建议您可以联系奢服了解原因，您可以联系下面的QQ了解详细解答：(QQ)123000000。</p>
					<table>
						<tr>
							<td><img src="img/right-a.jpg"/></td>
							<td><img src="img/right-b.jpg"/></td>
							<td><img src="img/right-c.jpg"/></td>
						</tr>
					</table>
				</div>
			</div>
			<div class="footer">
			</div>
		</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.jpg)
			}
			.header{
				height: 70px;
				background: url(img/header_bg.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.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>