第八次前端作业
第八次前端作业，要求结合div和css来做一个小页面，这个工程有许多小细节，特别是在css中，本次采用内部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
list-style: none;
}
.all{
margin: 10px;
padding: 10px;
}
.pic{
border: 2px solid goldenrod;
height: 230px;
width: 1200px;
}
.pic li{
float: left;
margin: 10px;
margin-top: 20px;
/* margin-top是来限定pic下的li的上边距 */
}
.pic li p{
text-align: center;
}
/* .t1{
border: 1px solid goldenrod;
height: 20px;
width: 500px;
position: relative;
}
.ti li{
float: left;
margin: 1px;
} */
.a1{
width: 590px;
height: 250px;
border: 2px solid goldenrod;
/* 设置边框的粗细 */
float: left;
/* 设置这里的div是为了可以多个div并排 */
margin-bottom: 20px;
}
.a1 div{
float: left;
/* 如果不设置float，那么文字就会飘在父级div下方 */
}
.a2{
width: 250px;
height: 280px;
border: 2px solid goldenrod;
float: left;
}
.a2 div{
margin-top: 30px;
margin-left: 15px;
line-height: 16px;
}
.a3{
width: 930px;
height: 280px;
border: 2px solid goldenrod;
float: left;
margin-left: 50px;
}
.a3 div{
margin-left: 15px;
margin-right: 15px;
line-height: 26px;
/* 设置行高，间接设置行间距 */
}
</style>
</head>
<body>
<div class="all">
<div>
<ul class="pic">
<li>
<img src="images/i01.jpg" width="150px">
<p>天街</p>
</li>
<li>
<img src="images/i02.gif" width="216px">
<p>中天门</p>
</li>
<li>
<img src="images/i03.jpg" width="212px">
<p>旭日东升</p>
</li>
<li>
<img src="images/i04.jpg" width="242px">
<p>五岳独尊</p>
</li>
<li>
<img src="images/i05.jpg" width="225px">
<p>云海玉盘</p>
</li>
</ul>
</div>
<br>
<div class="a1">
<p style="position: absolute;margin-left:70px;color:black;">泰山摄影</p>
<img src="images/bg01.gif" width="590px">
<!-- 这里文字内嵌在图片上方，先把文字放在图片前，再加position，设置absolute，注意设置左边距 -->
<div>
<img src="images/caishixi.jpg" style="margin-top: 20px;margin-left:20px">
<p align="center">彩石溪</p>
</div>
<div style="float: left;width:380px;margin-left:10px">
进入桃花峪，行约2公里，溪中流水之下忽如才是铺就，溪底一条条石纹五彩纷呈，
阳光照耀下，分外生动，这就是著名的“彩石溪”。完完全全的溪水就像是被彩石染上了颜色，
也像是一条五彩的飘带，在此流淌得格外精神。动人的彩石时长引得有人驻足，如果你细心，
就可看见水中的赤鳞鱼。
</div>
</div>
<div class="a1" style="margin-left: 50px;">
<p style="position: absolute;margin-left:70px;color:black;">景点推荐</p>
<img src="images/bg02.gif" width="590px">
<div>
<img src="images/shanziya.jpg" style="margin-left:10px;margin-top:20px;">
<p align="center" style="margin-top: 5px;">扇子崖</p>
</div>
<div style="float:left;width:370px;margin-left:10px;">
位于泰山西溪西侧的扇子崖，奇峰突兀，高耸峻峭，形如扇面，故名。
崖上有明人杨博题刻摩崖石刻“仙人掌”。崖西有铁梯，攀援可登崖巅，
北眺龙角山，九女寨历历在目，西望傲徕峰尽收眼底。向东俯视，
龙潭水库宛若镶嵌在西溪的一颗璀璨的明珠，闪闪发光。清人孙宝僮有诗云：
“剑峰怒刺天，积铁拔千仞；俯临鬼谷幽，旁倚丈人峻”，的确写出了扇子崖的风韵。
</div>
</div>
<br>
<br>
<div class="a2">
<img src="images/bg03.gif" width="250px" height="30px" style="position: absolute;z-index: 1;">
<!-- 图片内嵌图片，除了设置position，还要设置z-index，数字越大，越靠近上方 -->
<img src="images/arrow.gif" style="position:absolute;margin-left:10px;z-index:2">
<p style="position:absolute;float: left;margin-left:60px;margin-top:5px;color:black;z-index:3">泰山旅游景点</p>
<div style="margin-top: 40px;font-size:14px;">
<p>岱庙：宋天贶殿 ……</p>
<p>丽区：王母池 ……</p>
<p>幽区：岱宗坊 ……</p>
<p>妙区：南天门 ……</p>
<p>奥区：后石坞 ……</p>
<p>旷区：扇子崖 ……</p>
<p>秀区：桃花峪 ……</p>
<p>奇观：旭日东升 ……</p>
</div>
</div>
<div class="a3">
<p style="position:absolute;margin-left: 70px;margin-top:5px;color:black;font-weight:bolder;">泰山介绍</p>
<img src="images/bg05.gif" width="930px" height="30px">
<div style="margin-top: 5px;">
泰山突兀而立于华北大平原东侧的齐鲁古国，东临浩波无涯的大海，西靠源远流长、奔流到海不复回的黄河，南有汶、泗、淮之水。纵览东部沿海广大区域，泰山踞高临下、凌驾于齐鲁丘群之上，真正成了茫茫原野上的"东天一柱"。这样，古人们便有了泰山为天下之中心的感觉。<br>
泰山除了深厚的文化内涵，还具有丰富的自然美，如果我们把风景自然美的形象特征概括为雄、奇、险、秀、幽、奥、旷的话，那么泰山除了从总体上和宏观上具有雄伟的特征外，还在雄中蕴含着奇、险、秀、幽、奥、旷等美的形象。<br>
泰山风景区内，有山峰156座，崖岭138座，名洞72处，奇石72块，溪谷130条， 瀑潭64处，名泉72眼，古树名木万余株，寺庙58座，古遗址128处，碑碣1239块，摩崖刻石1277处。主要分布在岱阳、岱顶、岱阴及灵岩。<br>
泰山是一座天然的历史、艺术博物馆，仅在泰山的中轴线上就现存有各种石刻1800余处，有的为帝王亲制，有的出自名流之手，大都文辞优美，书体高雅，制作精巧…… </div>
</div>
</div>
<br><br>
</div>
</body>
</html>
最后的效果
