从零开始制作 海南三亚 旅游景点静态网页HTML

制作HTML其实步骤很简单,对于的熟悉的朋友,可能轻车熟路

我们直接上干活

按照以下步骤进行操作:

  1. 创建文件夹:首先,创建一个站点文件夹,用来存放你的网页相关文件。

  2. css存放样式文件,images存放图片文件,html就是我们的网页文件

  3. 接下来开始编写html的网页内容

  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/style.css" rel="stylesheet" />
    <title>海南三亚</title>
    </head>
    
    <body>
    <div class="con">
        <div class="main_right">
            <div class="clear"></div>
            <div class="lunbo">
                <img src="images/banner2.jpg" style="width:880px;height:360px;" />
            </div>
            <div class="clear"></div>
            <div class="info">
                <div>
                    <ul class="uls">
                        <li><a href="index.html">海南三亚</a></li>
                        <li><a href="index2.html">著名景点</a></li>
                        <li><a href="index1.html">在线留言</a></li>
                        <div class="clear"></div>
                    </ul>
                </div>
                <div class="clear"></div>
                <div class=" fr p10"> <img src="images/home.jpg" width="300" /> </div>
                <p>
                    三亚市,是海南省地级市,别称鹿城,地处海南岛的最南端,介于北纬18°09′34″~18°37′27″、东经108°56′30″~109°48′28″之间,东邻陵水黎族自治县,西接乐东黎族自治县,北毗保亭黎族苗族自治县,南临南海,三亚陆地总面积1921平方千米 [92]  ,海域总面积3226平方千米。东西长91.6千米,南北宽51千米,下辖四个区。 [2]  根据第七次人口普查数据,截至2020年11月1日零时,三亚市常住人口为1031396人。 
                </p>
                <p>
                    三亚是具有热带海滨风景特色的国际旅游城市 [3]  ,又被称为“东方夏威夷”。 [4]  2016年6月,中国科学院对外发布《中国宜居城市研究报告》,三亚宜居指数在全国40个城市中位居第三。 [5]  2016年9月,三亚入选“中国地级市民生发展100强”。 [6]  2017年2月,三亚入选第三批国家低碳城市试点之一。三亚也是同时入选中国特色魅力城市200强及世界特色魅力城市200强。2017年中国地级市全面小康指数排名第50 [7]  。2018年12月,入选2018中国最佳旅游目的地城市第15名。 [8-9]  2018年12月13日,入选中国特色农产品优势区名单。 [10]  三亚是“无废城市”建设试点城市。
                </p>
                <p>
                    2019年10月23日,被确定为“第三批城市黑臭水体治理示范城市”。 [12]  2020年11月底至12月初,第六届亚洲沙滩运动会在海南省三亚市举行。
                </p>
                <p>
                    2021年,三亚市地区生产总值(GDP)835.37亿元,按可比价格计算,比2020年增长12.1%。其中,第一产业增加值93.79亿元,增长3.8%;第二产业增加值124.72亿元,增长0.1%;第三产业增加值616.86亿元,增长16.1%。三次产业结构调整为11.2:14.9:73.9。
                </p>
    
                <p>
                    水资源
    三亚市地表水资源多年平均降雨深度604毫米,半径流系数0.43,年总径流量11.5亿立方米,半径深度604毫米,半径流系数0.43,年总径流量11.5亿立方米,丰水年(P=10%)的年径流量18.2亿立方米,平水年(P=50%)的年径流量10.8亿立方米,枯水年(P=90%)的年径流量5.8亿立方米。集雨面积1905平方千米,多年平均降雨量1417毫米。从保亭黎族苗族自治县流入藤桥镇的年径流量为平水年4.576亿立方米,枯水年径流量2.288亿立方米;从乐东黎族自治县、保亭黎族苗族自治县流入崖城镇的年径流量为平水年1.671亿立方米,枯水年年径流量0.794亿立方米。降水量西部比东部少,径流分布自内地向沿海递减。 
                </p>
                <p>
                    
    动物资源
    三亚市境内野生动物资源较丰富,有关调查资料显示,截至2016年底,境内分布的陆生野生动物多达300余种,其中兽类50种,鸟类300余种,属国家重点保护的野生动物有云豹、孔雀雉、海南山鹧鸪、白鹇、蓝背八色鸫、黄嘴白鹭、穿山甲、猕猴、水鹿、黑熊、小灵猫、水獭、海南兔等。 
                </p>
                <p>
                    
    植物资源
    三亚市植物资源较为丰富,截至2016年底,境内有植物种类1838种(含栽培品种516个),其中蕨类有22科72种,裸子植物7科26种,被子植物98科1740种;在被子植物中,有双子叶植物1341种,单子叶植物399种。
    <p>
        矿产资源
        截至2015年底,三亚市境内矿产资源有29种,其中金属矿产11种,非金属矿产14种,能源矿产1种,水气矿产3种,以建材非金属矿产颇具优势。开发利用的矿产有:铁、磷、钛、石灰石、石英砂、大理石、花岗石、水晶、金、建筑石料等10种。其中石灰石、石英砂、花岗岩储量均在亿吨以上,磷、钛、铜、铁等矿品极优,金矿品位最高达每吨12.2克。三亚附近海域蕴藏着丰富的石油资源,南海天然气资源约占全国天然气贮量的1/3,现已探明崖13—1和崖13-2两口高产天然气流井。前井日产天然气120万立方米,后井日产天然气25万立方米。据估计,天然气储量约340-1182亿立方米,可采量519.88亿立方米。井年产量可达50亿立方米,可供气15-30年。 
    </p>
    <p>
        海洋资源
        三亚境内海岸线长度209.1千米,有19个港湾,大小岛屿40个。海洋生物种类繁多,有鱼类1064种,虾类350种,蟹类325种,软体动物700种,其中经济价值较高的有402种,鲨鱼翅、海参、石斑鱼被誉为“崖州三珍”。珊瑚保护区面积85平方千米。
    </p>
                </p>
                <p></p>
                <h2>景区图册</h2>
                <div class="main_list">
                    <ul>
                        <li><a href="#"><img src="images/q3.jpg" /></a></li>
                        <li><a href="#"><img src="images/q4.jpg" /></a></li>
                        <li><a href="#"><img src="images/q5.jpg" /></a></li>
                        <li><a href="#"><img src="images/q1.jpg" /></a></li>
                        <li><a href="#"><img src="images/q2.jpg" /></a></li>
                        <li><a href="#"><img src="images/q6.jpg" /></a></li>
                        <li><a href="#"><img src="images/q7.jpg" /></a></li>
                        <li><a href="#"><img src="images/q8.jpg" /></a></li>
                        <li><a href="#"><img src="images/q9.jpg" /></a></li>
                        <li><a href="#"><img src="images/q1.jpg" /></a></li>
                    </ul>
                </div>
    
                <div class="clear"></div>
    
            </div>
            <div class="clear"></div>
            <div class="foot" id="times" style="font-size:14px;text-align:center;height:40px;line-height:40px;"> 海南三亚风景区 </div>
        </div>
      <div class="clear"></div>
    </div>
    </body>
    </html>
    

    在css文件夹下面创建一个style.css样式文件,编写样式内容

  5. 
     *{  margin:0; padding:0; font-family:Microsoft YaHei;}
    .clear{ clear:both;}
    .fl{ float:left;}
    .fr{ float:right;}
    img{ border:none;}
    a{ text-decoration:none;}
    a:hover{ text-decoration:underline;}
    li{ list-style-type:none;}
    .ofh{overflow:hidden;}
    .center{ text-align:center;}
    .em{ text-indent:2em;}
    .p5{ padding:5px;}
    .p10{ padding:10px;}
    body {
        background: #6a79bc;
    }
    
     .con{ width:1080px; padding:0px; height:auto; margin:10px auto; }
    
    

    在index.html文件里面引入样式内容,保存后

  6. 直接双击index.html文件,浏览器打开。即可看到如下效果

超多的模板素材代码

完整代码下载:设计素材成品网

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜钓星云

如果解决了问题/赏点吧/饿死了

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值