第九章DIV+CSS布局作业

京

于 2024-11-17 21:09:54 发布

阅读量107

点赞数 2

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/2303_77563779/article/details/143838493

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>服务中心</title>
		<style>
			*{
							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;
		</style>
	</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>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>飞跃岩石</title>
		<style>
			*{
							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;
						 }
		</style>
	</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">
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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">
			&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;
			&nbsp;&nbsp;&nbsp;&nbsp;<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>版权所有&copy;<a href="#">飞跃岩石</a></center>
		</div>
		<div class="bottom"></div>
	</body>
</html>