第九章习题

最新推荐文章于 2025-04-11 17:35:50 发布

asleep701

最新推荐文章于 2025-04-11 17:35:50 发布

阅读量170

点赞数 2

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/2402_83277711/article/details/143926618

版权

习题一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>服务中心</title>
		<style type="text/css">
			*{
				margin: 0px auto;
			}
			.all{
				width: 700px;
				height: 600px;
				background-color: antiquewhite;
			}
			.top{
				width: 700px;
				height: 100px;
				background-color: aquamarine;
			}
			.menu{
				width: 700px;
				height: 50px;
				background-color: aqua;
			}
			.left{
				width: 250px;
				height: 400px;
				float: left;
				background-color: beige;
			}
			.concent{
				width: 450px;
				height: 400px;
				float: left;
				background-color: blanchedalmond;
			}
			.footer{
				width: 700px;
				height: 50px;
				
				background-color: aquamarine;
			}
			table{
				width: 450px;
				height: 150px;
				position: fixed;
				bottom: 180px;
				background-color: aliceblue;
			}
			td{
				width: 120px;
				border: 2px solid black;
			}
		</style>
	</head>
	<body>
	<div class="all">
		<div class="top"></div>
		<div class="menu"></div>
		<div class="left"></div>
		<div class="concent">
			<table>
				<tr>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</div>
		<div class="footer"></div>
	</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>服务中心</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.all{
				width: 800px;
				height: 700px;
				margin: 0px auto;
			}
			
			.menu{
				width: 100%;
				height: 60px;
				text-align: center;
			}
			.menu img{
				float: right;
				width: 120px;
				height: 40px;
				padding: 5px;
			}
			table{
				width: 150px;
				height: 200px;
				margin-top: 80px;
			}
			td img{
				width: 198px;
				height: 200px;	
			}
			.main{
				width: 100%;
				height: 480px;
			}
			.top{
				width: 100%;
				height: 100px;
				text-align: center;
				background: url(img/logo2.jpg) no-repeat;
			}
			.left{
				width: 200px;
				height: 480px;
				float: left;
			}
			.right{
				width: 600px;
				height: 480px;
				margin-left: 200px;
				line-height: 25px;
			}
			
			.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>
			*{
				margin: 0px auto;
			}
			.all{
				width: 800px;
				height: 700px;
				background: url(img/bg.jpg);
			}
			.hander{
				width: 800px;
				height: 100px;
				background: url(img/header_bg.jpg);
			}
			.top{
				width: 750px;
				height: 100px;
			}
			.one{
				width: 350px;
				height: 100px;
				float: left;
				border: 2px solid black;
			}
			.two{
				width: 350px;
				height: 100px;
				float: left;
				border: 2px solid black;
			}
			.menu,.menu2,.menu3{
				width: 725px;
				height: 5px;
				margin-top: 5px;
				margin-left: 25px;
				background: url(img/h_line.png)no-repeat;
			}
			.main{
				width: 720px;
				height: 200px;
				margin-left: 25px;
				border: 2px solid black;
			}
			.center{
				width: 750px;
				height: 200px;
			}
			.left{
				width: 350px;
				height: 200px;
				float: left;
				border: 2px solid black;
			}
			.right{
				width: 350px;
				height: 200px;
				float: left;
				border: 2px solid black;
			}
			.footer{
				width: 700px;
				height: 30px;
				margin-left: 25px;
				border: 2px solid black;
				text-align: center;
			}
			.bottom{
				width: 800px;
				height: 30px;
				margin-left: 0px;
				background: url(img/bottom_bg.jpg);
			}
			p{
				font-size: 20px;
				color: gray;
				font-weight: bold;
			}
			span{
				font-size: 10px;
				color: white;
				font-weight: bold;
			}
			a{
				font-size: 10px;
				color: white;
			}
			.one span{
				font-size: 20px;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="hander"></div>
			<div class="top">
				<div class="one">
					<img src="img/logo.jpg"  width="350px" height="80px"/>
					<span>飞跃岩石</span>
				</div>
				<div class="two">
					<img src="img/menu1.png" width="70px" height="100px"/>
					<img src="img/menu_divider.png" height="100px"/>
					<img src="img/menu2.png" width="70px" height="100px"/>
					<img src="img/menu_divider.png" height="100px"/>
					<img src="img/menu3.png" width="70px" height="100px"/>
					<img src="img/menu_divider.png" height="100px"/>
					<img src="img/menu4.png" width="70px" height="100px"/>
				</div>
			</div>
			<div class="menu"></div>
			<div class="main">
				<p>徒手攀岩</p>
				<img src="img/img_1.jpg" align="right" width="100px" height="100px"/>
				<span>徒手攀岩(rock chming with hands)：利用岩石上的裂缝、洞穴、突起等天然把手举登疑峰岩壁的运动。拳岩是一项炼综合素质的运动，不仅可以获得惊人的勇气、过人的力量、极好的柔韧性，更可以提高耐力和判断力，使人在激烈竞争、纷默新乱的都市生活中应付自姆。在岩壁上攀爬时，生活简单得只剩下自己。</span>
				<span>徒手举岩就是不加辅助举岩工具和保护措施的举岩运动，因而具有极大的危险性，名列世界十大危险运动之列。但是，徒手季若正以其特有的魅力，突出的个性感染着人们，参与攀岩，会让人在与悬崖峭壁的抗衡中学会坚强，在与大山的拥把中感受宽容在征服攀登路线后享受成功与胜利的喜悦。</span>
				<span>在欧美、前苏联及亚洲的日本、韩国，攀岩运动已相当流行，当今世界攀岩水平数欧美特别是法国与美国最高，法国相对在人了若学上占优，美国在自然岩壁称强、在亚洲，日本、韩国水平较高，他们有些选手已达到世界水平。中国大陆、香港及合湾的水平大体相当，同属亚洲中流水平。</span>
				<a href="#">Read More...</a>
			</div>
			<div class="menu2"></div>
			<div class="center">
				<div class="left">
					<img src="img/img_2.jpg" align="left" width="100px" height="100px"/>
					<p>起源</p>
					<span>攀岩运动起源于18世纪的欧洲，1970年成为一项独立的运动项目，徒手攀岩是指不依赖任何辅助力量，只靠攀岩者的自身力量完成攀岩过程。</span><br />
					<span>在欧美，前苏联及亚洲的日本，韩国，徒手攀岩运动已相当流行，当今世界攀岩水平数欧美特别是法国和美国最高，法国相对在人工岩壁上占优，美国在自然岩壁最强。在亚洲，日本，韩国水平较高，他们有些选手已经达到世界水平，中国大陆，香港及台湾的水平大体相当，同属亚洲中流水平。</span>
				</div>
				<div class="right">
					<img src="img/img_3.jpg" align="left" width="100px" height="100px"/>
					<p>运动特点</p>
					<span>徒手攀岩要求人们在各种高度及角度的岩壁上，连续完成转身，引体向上，腾挪甚至跳跃等各种惊险动作，集健身，娱乐，竞技于一身，是一项刺激且不失优雅的极限运动，被全球的攀岩迷们称为"峭壁上的芭蕾"。</span><br />
					<span>虽然，近年来攀岩已渐渐成为一种大众化的户外极限运动，越来越多的人从攀岩运动中体验到独特的乐趣，但是徒手攀岩对人的体能，胆量，身体协调性和柔韧性的要求极高，对于那些没有经过系统的专业训练的初学者来说无疑是危机重重。</span>
				</div>
			</div>
			<div class="menu3"></div>
			<div class="footer"><span>版权所有&copy;<a href="#">飞跃岩石</div>
			<div class="bottom"></div>
		</div>
	</body>
</html>