第九章习题

于 2024-11-17 13:52:40 发布
阅读量179 收藏
点赞数 1
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_81548910/article/details/143831398
版权

1.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>服务中心--布局</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.all{
				width: 800px;
				height: 670px;
				margin: 0px auto;
				border: 2px solid;
			}
			.top{
				width: 100%;
				height: 100px;
				text-align: center;
				background-color: lightcyan;
			}
			.menu{
				width: 100%;
				height: 60px;
				text-align: center;
				background-color: lightpink;
			}
			.main{
				width: 100%;
				height: 480px;
			}
			.left{
				width: 200px;
				height: 480px;
				text-align: center;
				float: left;
				background-color: lightgoldenrodyellow;
			}
			.right{
				text-align: center;
				width: 600px;
				height: 480px;
				margin-left: 200px;
				background-color: lightgreen;
			}
			table{
				width:600px;
				height: 200px;
				margin-top: 255px;
			}
			td{
				width: 300px;
				height: 200px;
				background-color: aliceblue;
			}
			.footer{
				width: 100%;
				height: 30px;
				text-align: center;
				background-color: lightblue;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top">top</div>
			<div class="menu">menu</div>
			<div class="main">
				<div class="left">left</div>
				<div class="right">right
					<table>
						<tr>
							<td>A</td>
							<td>B</td>
							<td>C</td>
						</tr>
					</table>
				</div>
			</div>
			<div class="footer">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;
			}
			.top{
				width: 100%;
				height: 100px;
				text-align: center;
				background: url(img/服务中心img/logo.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/服务中心img/footer.jpg);
			}
		</style>		
	</head>
	<body>
		<div class="all">
			<div class="top"></div>
			<div class="menu">
					<img src="img/服务中心img/menu-a.jpg"/>
					<img src="img/服务中心img/menu-b.jpg"/>
					<img src="img/服务中心img/menu-c.jpg"/>
					<img src="img/服务中心img/menu-d.jpg"/>
					<img src="img/服务中心img/menu-e.jpg"/>
			</div>
			<div class="main">
				<div class="left">
					<img src="img/服务中心img/left-a.jpg"/>
					<img src="img/服务中心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/服务中心img/right-a.jpg"/></td>
							<td><img src="img/服务中心img/right-b.jpg"/></td>
							<td><img src="img/服务中心img/right-c.jpg"/></td>
						</tr>
					</table>
				</div>
			</div>
			<div class="footer">
			</div>
		</div>		
	</body>
</html>

 

2.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>飞跃岩石--布局</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.header{
				height: 70px;
				background-color: gainsboro;
			}
			.main{
				width: 800px;
				margin-left: auto;
				margin-right: auto;
			}
			.top{
				width: 800px;
				height: 104px;
			}
			.a-left{
				width: 400px;
				height:100px;
				float: left;
				border: 2px solid;
			}
			.a-right{
				width: 400px;
				height:100px;
				margin-left: 400px;
				border: 2px solid;
			}
			.b,.d,.f{
				width: 820px;
				height: 30px;
				background-color: gray;
			}
			.c{
				width: 820px;
				height: 250px;
				border: 2px solid;
			}
			.e{
				width: 800px;
				height: 254px;
			}
			.e-left{
				width: 400px;
				height: 250px;
				float: left;
				border: 2px solid;
			}
			.e-right{
				width: 400px;
				height:250px;
				margin-left: 400px;
				border: 2px solid;
			}
			.g{
				width: 820px;
				height:30px;
				border: 2px solid;
			}
			.bottom{
				height:50px;
				background-color: gainsboro;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="header">hearder</div>
			<div class="main">
				<div class="top">
					<div class="a-left">A-left</div>
					<div class="a-right">A-right</div>
				</div>
				<div class="b">B</div>
				<div class="c">C</div>
				<div class="d">D</div>
				<div class="e">
					<div class="e-left">E-left</div>
					<div class="e-right">E-right</div>
				</div>
				<div class="f">F</div>
				<div class="g">G</div>
			</div>	
			<div class="bottom">bottom</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/飞跃岩石img/bg.jpg)
			}
			.header{
				height: 70px;
				background: url(img/飞跃岩石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/飞跃岩石img/logo.jpg) no-repeat;
			}
			.a-right{
				width: 400px;
				height:100px;
				margin-left: 450px;
			}
			.b,.d,.f{
				width: 820px;
				height: 30px;
				background: url(img/飞跃岩石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/飞跃岩石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/飞跃岩石img/menu1.png"/>
						<img src="img/飞跃岩石img/menu_divider.png"/>
						<img src="img/飞跃岩石img/img_2.jpg"/>
						<img src="img/飞跃岩石img/menu_divider.png"/>
						<img src="img/飞跃岩石img/menu3.png"/>
						<img src="img/飞跃岩石img/menu_divider.png"/>
						<img src="img/飞跃岩石img/menu4.png"/>
					</div>
				</div>
				<div class="b"></div>
				<div class="c">
					<h2>徒手攀岩</h2>
					<img src="img/飞跃岩石img/img_1.jpg" width="200px" height="150px"align="right"/>
					<p>徒手攀岩（rock diming with hands）：利用岩石上的裂隆、湯穴，实起等天然把手拳登陡婚岩壁的运动，攀岩是一项般炼综台素质的运动，不仅可以获得谅人的勇气。过人的力量、极好的柔韧性，更可以提高耐力和判断力，使人在激烈竞争。纷繁意乱的都市生活中应付自如。在岩擎上攀爬时，生活简单得只剩下自己。</p >
					<p>徒手攀岩就是不加辅助学岩工具和保护措施的堅岩运动，因而具有极大的危险性，名列世界十大危检运动之列。但是，徒手攀岩正以具特有的魅力，突出的个性感染着人们，参与攀岩，会让人在与悬崖梢壁的抗衡中学会坚强，在与大山的拥抱中感受宽容，在位服率登路线后享受成功与胜利的喜悦。</p >
					<span>在欧美，前苏联及亚洲的日本、韩国，攀岩运动已相当流行，当今世界攀岩水平数欧美特別是法国与美国品高，法国相对在人工岩壁上占优，美国在自然岩壁称强。在亚洲，日本、韩国水平较高，他们有些选手已达到世界水平。中国大陆、香港及台湾的水平大体相当，同展亚洲中流水平。</span>
					Read More...
				</div>
				<div class="d"></div>
				<div class="e">
					<div class="e-left">
						<img src="img/飞跃岩石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/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>

 

2301_81548910
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值