第9章 DIV+CSS布局作业
1.用DIV+CSS布局技术，制作一个“服务中心”页面。
浏览效果如下：
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>服务中心</title>
<link type="text/css" href="../css/322-1.css" rel="stylesheet"/>
</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>
</html>CSS代码如下：
*{
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;
}2.用用DIV+CSS布局技术，制作一个“飞跃岩石”页面。
浏览效果如下：
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飞跃岩石</title>
<link href="../css/322-2.css" type="text/css" rel="stylesheet"/>
</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">
<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">
<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>版权所有©<a href="#">飞跃岩石</a></center>
</div>
<div class="bottom"></div>
</body>
</html>CSS代码如下：
*{
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;
}