HTML作业三

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业三</title>
    <link rel="stylesheet" href="01.css">
</head>

<body>
    <div class="QRCODE"><img src="2.jpg" alt="qecode" width="200px"></div>
    <div class="nav-wrapper">
        <ul class="nav">
            <li><a href="javascript:;">退出</a></li>
            <li><a href="javascript:;">登录</a></li>
            <li><a href="javascript:;">注册</a></li>
        </ul>
    </div>
    <div class="head-wrapper">
        <h1>鼎湖山游记</h1>
        <img src="timg.jpg" alt="" />
    </div>
    <div class="wrapper">
        <div class="left-wrapper">
            <div class="small-title">
                <p>鼎湖山介绍</p>
                <p>
                    鼎湖山位于广东省肇庆市境东北部,距肇庆市区18公里,由10多座山组成,总面积11.33平方公里。主峰海拔1000米,是珠江三角洲地区的最高峰。鼎湖山以其是集风景旅游、科学研究、宗教朝拜于一体的胜地而被称为岭南四大名山之首。
                </p>
            </div>
        </div>
        <div class="mid-wrapper">
            <h2 class="h21">鼎湖山真好玩</h2>
            <p class="p11">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鼎湖山与北岭山的构造基本相同。鼎湖山的走向为北东东—南西西的单斜、褶皱、断裂山地。山地内部山体密集、峰峦重叠,起伏大,断层陡崖发育,层状地貌清楚。有名的鼎湖断裂带自北东向南西横穿山地中部与北岭断裂带相接,为形成山地中的瀑布奇景和险峻壮观的山势提供了良好条件。 [2] 
                在山地中的各山峰坡度多在30°~40°,局部在60°以上,少于15°的很少。从鸡笼山向东南经石仔岭、三宝峰到坑口,直线距离4.4公里,高程由1000.3米降至8米,比降达22.5%。
                山上水蚀地形明显,沟谷深切,山脊狭窄,V型谷深100~300米,沟谷之间的山脊成棱状,最窄处仅有3~5米,剥夷面发育了500、300~400、150~200、80~100米等多级。发源于鸡笼山的山溪有南北两支,均自西北向东南流,横切山地构造走向线,在岩层断裂的地方往往发育成断崖和阶梯状河谷,谷底基岩出露或乱石成尽,从而使溪流发育了众多的激流、瀑布、深潭奇景,南支云溪有老龙潭、三昧潭、水帘洞天等;北支天溪,水流出天湖后,阶梯状河床明显发育,其中落差最大的飞水潭,断崖高达40米。两溪为同向山脊相隔,成为山地自西北向东南的分水岭。
                鼎湖山国家级自然保护区位于广东省肇庆市鼎湖区,距离广州市西南100公里,总面积约1133公顷。
                保护区成立于1956年,是中国第一个自然保护区。保护区是唯一隶属于中国科学院的自然保护区。 [1] 
                保护区主要保护对象为南亚热带地带性森林植被;保护区内生物多样性丰富,是华南地区生物多样性最富集的地区之一,被生物学家称为“物种宝库”和“基因储存库”。
                保护区景观独特,有近400年记录历史的地带性原始森林──南亚热带季风常绿阔叶林和其他多种森林类型保存完好,被誉为北回归沙漠带上绿洲中的“明珠”。山上有著名的佛教圣地--庆云寺。

            </p>
            <h2 class="h22">美丽的鼎湖山</h2>
            <p class="p12">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鼎湖山蕴藏着极为丰富的植物资源,自然保护区面积17000多亩,其中原始森林2000多亩,葱茏茂密,结构复杂,是世界少数的特殊森林类型,被誉为“活的自然博物馆”。
                鼎湖山有野生高等植物1856种,其中珍稀濒危的国家重点保护植物23种;以鼎湖山为原生地的植物有30种。鼎湖山多样的生态和丰富的植物为动物提供了充足的食源和良好的栖息环境。
                郝玉麟《广东通志》卷十二之山川志云:“顶湖山在(肇庆)城东北四十里,
                肇庆市鼎湖山,高千余丈,山顶有湖,四时不竭,山半有白云古刹,绕寺产佳茗。”又卷五十二之物产志云:“顶湖茶:端州之白云山顶有湖,僧人于巖际种茶,烹之作素馨花气,味甘淡而滑,然岁收止石许。
            </p>
        </div>
        <div class="right-wrapper">
            <div class="small-title">
                <p>景点推荐</p>
                <p>鼎湖山自唐代以来就是著名的佛教圣地和旅游胜地。高僧云集,周围建起三十六招提,前来朝拜、游览的香客、游人越来越多。
                    明崇祯年间,即公元1633年,山主梁少川莲花峰建起莲花庵,第二年又迎来高僧栖壑和尚入山奉为主持,重建山门,改莲花庵为庆云寺,到了清代,庆云寺规模越来越大,成为岭南四大名刹之首。 
                </p>
            </div>

        </div>
    </div>
    <div class="foot-wrapper">
        <p>
            广州美丽旅游公司
        </p>
        <p>
            联系方式:<span >020-12345678</span>
        </p>

    </div>
</body>

</html>

CSS

* {
    padding: 0;
    margin: 0;
    text-decoration-line: none;
    
}
li{
    list-style: none;
    
}

.QRCODE {
    position: absolute;
    
}
/* img{
    border-radius: 50%;
} */

.nav-wrapper {
    background-color: gray;
    width: 1000px;
    height: 22px;
    margin: 0 auto;
}

.nav li{
    float: right;
    margin-left:7px ;
}
a{
    display: block;
    color: white;

}

/* 中间主体部分 */
.wrapper {
    position: relative;
    width: 1000px;
    height: 800px;
    /* background-color: chartreuse; */
    margin: 0 auto;
}

.head-wrapper {
    position: relative;
    width: 1000px;
    height: 200px;
    background-color: pink;
    margin: 0 auto;
}
.head-wrapper h1{
    position: absolute;
    /* display: block; */
    margin-left: 350px;
    margin-top: 20px;
}
.head-wrapper img{
    position: absolute;
    width: 200px;
    margin-left: 750px;
    margin-top: 20px;
    border-radius: 50%;
    
}

.left-wrapper {
    position: absolute;
    width: 200px;
    height: 800px;
    background-color: grey;
    margin-left: 0;
    margin-top: 0;
    float: left;
}

.mid-wrapper{
    position: absolute;
    width: 600px;
    height: 800px;
    margin-left: 200px;
    margin-top: 0;
    background-color: white;
}
.left-wrapper p:first-child,
.right-wrapper p:first-child{
    text-align: center;
}

.right-wrapper {
    position: absolute;
    width: 200px;
    height: 800px;
    margin-left: 800px;
    margin-top: 0;
    background-color: grey;
    float: right;
}



.mid-wrapper .h21{
    margin: 20px;
}
.mid-wrapper .h22{
    margin: 20px;
}
.mid-wrapper p{
    margin:  0 20px;
}



/* 最下面部分 */
.foot-wrapper{
    position: relative;
    width: 1000px;
    height: 100px;
    background-color: pink;
    margin: 0 auto;
}

.foot-wrapper p{
    /* position: absolute; */
    text-align: center;
    /* margin: 5px; */
    padding: 15px;
}
.foot-wrapper span{
    text-decoration: underline;
}




.small-title{ 
    width: 180px;
    height: 20px;
    /* background-color: green; */
    background-image: linear-gradient(to right,white,green);
    margin: 5px auto;
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值