HTML5期末大作业:我的家乡网站设计——我的家乡

如下代码供学习交流,获取完整代码,请关注文后二维码(coding加油站)回复家乡免费获取。

DDR3

1.网页作品简介 :

移动端自动化测试实战

HTML期末大学生网页设计作业,可以替换文字图片满足不同的家乡

小米

2.知识应用:

数据仓库

在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

正则表达式

3. 内容介绍:

新酒

《我的家乡》共有8个页面,分别为

篮球系统

index.html【首页】

设计规范

该页面引用了超链接、div盒子、浮动、轮播图、视频播放等知识将页面能够醒目的呈现出来,同时提供导航栏,提供底部导航。如下演示图:

ssl

集成测试

核心代码:

相册权限

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>主页</title>
        <link rel="stylesheet" href="../css/Index.css" type="text/css">
        <link rel="stylesheet" href="../css/photoC.css" type="text/css">
    </head>
    <body>
        <div id="top">
            <img src="../image/chizhouLogo.png" class="img1">
            <div id="top-right">
                <input type="text" name="search" placeholder="请输入关键字">
                <div id="search">搜索</div>
            </div>
            <div id="top-gov">
                <a href="http://www.cj.gov.cn//">昌吉政府官网</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://www.weather.com.cn/weather1d/101130401.shtml#input">昌吉天气</a>
               
            </div>
        </div>
        <hr style="height:10px;border:none;border-top:10px groove rgb(14,
            143, 194);" />
        <div id="top2">
            <div id="nav">
                <ul>
                    <li><a href="../html/Index.html">首页</a></li>
                    <li><a href="../html/History.html">历史</a></li>
                    <li><a href="../html/Culture.html">人文</a></li>
                  
                    <li><a href="../html/Foods.html">美食</a></li>
                    <li><a href="../html/Views.html">景点</a></li>
                    <li><a href="../html/Traffic.html">交通经济</a></li>
                    <li><a href="../html/Natural.html">自然</a></li>
                    <li><a href="../html/honor.html">荣誉</a></li>
                </ul>
            </div>
        </div>
        <hr style="height:1px;border:none;border-top:1px dashed goldenrod;"
            />
        <div id="top1">
            <div id="flash">
                <img src="../image/view1.jpg" style="display: block">
                <img src="../image/view2.jpg">
                <img src="../image/view3.jpg">
                <img src="../image/view4.jpg">
                <img src="../image/view5.jpg">
                <ul>
                    <li class="li_1"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="span-r">
                    <span>></span>
                </div>
                <div class="span-l">
                    <span><</span>
                    </div>
                </div>
            </div>
            <hr style="height:1px;border:none;border-top:1px dashed
                goldenrod;" />
            <div id="center">
                <p>
                    <img src="../image/mark.png" width="20px"
                        height="20px">
                        昌吉,取“昌盛吉祥”之意。昌吉回族自治州成立于1954年,州域总面积7.39万平方公里,总人口1613585人(不包括五家渠市),生活着汉族、回族、维吾尔族、哈萨克族等42个民族,全州辖5县(玛纳斯县、呼图壁县、吉木萨尔县、奇台县、木垒哈萨克自治县)、2市(昌吉市、阜康市)、3个国家级园区(新疆准东经济技术开发区、昌吉高新技术产业开发区、昌吉国家农业科技园区)。驻有新疆生产建设兵团第六师和第八师部分团场21个。
                </p>
                <p>
                    <img src="../image/mark.png" width="20px"
                        height="20px">
                        区位优势明显。昌吉州从东西北三面环抱首府乌鲁木齐市,地处天山北坡经济带和乌昌石城市群率先发展的核心区域,是建设新疆丝绸之路经济带核心区的重要组成部分。州府昌吉市距乌鲁木齐市中心35公里,距乌鲁木齐国际机场18公里。G312、G216、G7等高速公路贯穿全境,是东联内地、西接中亚和欧洲市场的桥头堡和黄金通道。
                </p>
                <p>
                    <img src="../image/mark.png" width="20px"
                        height="20px">
                        自然资源富集。州内已发现的能源、金属和非金属矿产资源有煤炭、石油、天然气、石灰石、芒硝、铁、铀、金、铜等40种。煤炭资源富集,预测储量5732亿吨,占全疆的26%、全国的12%,其中:准东煤田是目前全国最大的整装煤田,预测资源量3900亿吨,已探明2531亿吨。石油预测储量27亿吨、天然气预测储量6000亿立方米。天然草场9981万亩,森林1231万亩。年日照时数2700—3100小时,无霜期155—180天。
                </p>
                <p>
                    <img src="../image/mark.png" width="20px"
                        height="20px">
                        经济蓬勃发展。昌吉州始终坚持新发展理念,推动经济高质量发展,深化市场化改革,扩大高水平开放,加快建设现代化经济体系,人均生产总值1.2万美元。
                </p>
                <video width="800" height="480" controls>
                    <source src="../video/xcVideo.mp4" type="video/mp4">
                    <source src="../video/xcVideo.ogg" type="video/ogg">
                    <source src="../video/xcVideo.webm" type="video/webm">
                    <object data="../video/xcVideo.mp4" width="800"
                        height="480">
                        <embed src="../video/xcVideo.swf" width="800"
                            height="480">
                    </object>

History.html【家乡历史介绍】

ubisoft

该页面使用背景图进行背景绘制、使用h2标签将文字进行排版,使页面整洁,充分利用外来资源,引入相关资料。

android驱动教程

Culture.html【家乡人文】

ECO

以图片和文字的形式展现出家乡的人文特征。

CA

pyqt5

核心代码:

行为树

 <div id="C1-center" style="background: url(image/culture-bc.jpg);
            background-size: cover;">
            <br><br>
            <p>
                昌吉州有艺术表演团体7个;公共文化馆 8 个;公共图书馆 8 个;博物馆 9 所。已探明文物点 642 处,被公布为各级文物保护单位的有 169 处,世界文化遗产 1 处、其中国家级 4 处、自治区级 53处、县市级 111 处,全州有馆藏文物 12600 多件,其中国家珍贵文物 223 件(套),反映地方民族特色的民俗实物近 2000 件,其它藏品 10000 多件。
            </p>
            <p>
                州级广播电视台 1 座,全州广播人口综合覆盖率 99.68%;县级广播电视台 7 座。
            </p>
            <img src="../image/culture-poem.jpg">
            <p>
                昌吉州旅游文化资源独具特色。“新疆天山”成功申报为世界自然遗产、“北庭故城”成功申报为世界文化遗产,是新疆唯一同时拥有“双世界遗产”的地州。州域内有奇台汉代疏勒城、吉木萨尔北庭故城、车师古道、呼图壁康家石门子生殖崇拜岩画等400多处历史遗迹,奇台硅化木·恐龙沟国家地质公园、魔鬼城等地质遗迹,国家5A级风景名胜区——天山天池、国家森林公园——江布拉克等自然景观,新疆曲子、美食小吃等民间艺术和风味饮食。
            </p>
            <img src="../image/culture-god.jpg">
            <p>
                根据第七次全国人口普查结果,现将2020年11月1日零时我州常住人口的基本情况公布如下:
            </p>
            <img src="../image/culture-Opera.jpg">
            <p>
                全州常住人口为1613585人(不包含五家渠市),与2010年第六次全国人口普查的1428587人相比,增加184998人,增长12.95%,年平均增长率为1.22%。分别比全国平均水平高出7.57个百分点和0.69个百分点,分别比全区平均水平低5.57个百分点和0.49个百分点。
            </p>
            <img src="../image/culture-hd.jpg">
        </div>

Foods.html【家乡美食】

测试

以图片和文字的形式展现出家乡的美景,添加a标签超级链接,跳转到相关介绍界面。如下是实现图:

图形学

基础IO

核心代码:

架构

 <div id="F-center">
            <div id="leftF" style="background: url(../image/food-choutofu.jpg);
                background-size: cover;">
                <div>
                    <p class="p1">大盘鸡</p>
                    <p class="p2">
                        大盘鸡色彩鲜艳,有爽滑麻辣的鸡肉和软糯甜润的土豆,辣中有香,粗中带细,而且经济实惠,亲朋聚会食用尚家
                    </p>
                </div>
            </div>
            <div id="leftF" style="background: url(../image/food-doujiao.jpg);
                background-size: cover;">
                <div>
                    <p class="p1">香酥羊腿</p>
                    <p class="p2">
                        羊肉性温味甘,既可食补,又可食疗,为优良的强壮祛疾食品,有益气补虚,温中暖下,补肾壮阳,生肌健力,抵御风寒之功效。
                    </p>
                </div>
            </div>
            <div id="leftF" style="background: url(../image/food-duck.jpg);
                background-size: cover;">
                <div>
                    <p class="p1">黄面</p>
                    <p class="p2">
                        在昌吉市、奇台县、米泉市等地的回族人中间,多有出名的拉黄面师傅,拉出的面细如游丝,柔韧耐嚼。

再加上配料精致独到,蒜、醋、辣味俱全,深受群众欢迎。而昌吉州流行的“烤肉拌凉面”的独特吃法,更是受到外地来客的青睐。
                    </p>
                </div>
            </div>
            <div id="leftF" style="background: url(../image/food-ggtofu.jpg);
                background-size: cover;">
                <div>
                    <p class="p1">烤包子</p>
                    <p class="p2">
                        烤包子(维语叫“撒木萨”)和薄皮包子(维语叫“皮特尔曼它”)是维吾尔族同胞喜爱的食品之一。

城乡巴扎的饭馆、食摊多销售这种食品。烤包子主要是在馕坑烤制。包子皮用死面擀薄,四边折合成方形。包子馅用羊肉丁、羊尾巴油丁、洋葱、孜然粉、精盐和胡椒粉等原料,加入少量水,拌匀而成。
                    </p>
                </div>
            </div>
            <div id="leftF" style="background: url(../image/food-mijiao.jpg);
                background-size: cover;">
                <div>
                    <p class="p1">馕焖肉</p>
                    <p class="p2">
                        食时一边吃馕,一边吃肉。因这种食品兼有主食和菜肴的功能,所以不用另加主食即可饱腹。加之其味浓郁醇香,所以深受食者喜爱。
                    </p>
                </div>
            </div>
            <div id="leftF" style="background: url(../image/food-subin.jpg);
                background-size: cover;">
                <div>
                    <p class="p1">烤全羊</p>
                    <p class="p2">
                        烤全羊不仅是街头的风味小吃,而且也是维吾尔人招待贵客的上等佳肴,现在也成为高级筵席中的一道佳品,倍受中外客人的青睐。
                    </p>
                </div>
            </div>

Traffic.html 【交通经济】

Date

嵌入百度地图图片,通过按钮点击可以直接跳转到百度界面显示家乡的位置,使用hover来控制动画效果

以太坊

 效果图:

物体检测

学习方法

多元回归

核心代码:

wx.saveFile

 <div id="T-center">
            <div id="T-text1">
                <p style="font-size: 30px;">公路</p>
                <p>
                    昌吉回族自治州州府昌吉市距乌鲁木齐市中心35公里,距乌鲁木齐国际机场18公里。
                </p>
                <p style="font-size: 20px; line-height: 35px">
                    北疆铁路、312国道、216国道、115省道、吐乌大高等级公路贯穿全境。 
                    2017年,昌吉回族自治州客运量2767万人,同比下降9.0%,客运周转量218142万人公里,同比下降26.2%;货运量13410万吨,同比增长14.8%,货物周转量2817876万吨公里,同比增长18.5%。
                    截至2017年底,昌吉回族自治州民用汽车保有量为32.7万辆(包括三轮汽车和低速货车)。其中,私人汽车保有量19.4万辆
                </p>
            </div>
            <div id="T-map">
                <div id="down">
                    <a
                        href="https://map.baidu.com/search/%E6%98%8C%E5%90%89%E5%B8%82/@9575494.05779743,5471499.88,8.88z?querytype=s&da_src=shareurl&wd=%E6%98%8C%E5%90%89&c=299&src=0&pn=0&sug=0&l=14&b=(13068126,3563552.25;13092702,3575104.25)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&device_ratio=2">
                        点击跳转至百度地图
                    </a>
                </div>
                <img src="../image/map.png" width="100%"
                    height="560px">
            </div>
            <div id="T-text2">
                <p style="font-size: 30px;">经济综述</p>
                <p>
                    2020年昌吉州全地域(含兵团)地区生产总值(GDP)1387.25亿元,按可比价格计算,同比增长5.3%,增速位居全疆第四位,经济实现平稳增长。其中,第一产业增加值242.45亿元,同比增长4.5%;第二产业增加值581.28亿元,增长12.4%;第三产业增加值563.51亿元,下降1.1%,三次产业结构为17.5:41.9:40.6,第三产业虽然遭到两次疫情重创,但占GDP的比重依然达到40%以上,总体结构基本保持稳定
                </p>
                <p>
                    2017年,昌吉回族自治州地区生产总值1220.0亿元,按可比价格计算,比上年增长7.0%。其中,第一产业增加值242.0亿元,增长4.0%;第二产业增加值577.0亿元,增长6.0%;第三产业增加值401.0亿元,增长10.4%。三次产业分别拉动经济增长1.0、2.6、和3.4个百分点。三次产业结构为19.8:47.3:32.9。实现地域工业增加值444.1亿元,增长4.7%,拉动经济增长1.8个百分点。人均生产总值76097元,同比增长6.4%。按当年平均汇率折合11271美元。城镇居民家庭人均可支配收入30201元,同比增长8.0%。农村居民人均可支配收入17316元,同比增长5.3%。
                </p>
     
                <p>
                    2017年,昌吉回族自治州城镇新增就业28853人,其中:就业困难人员实现再就业3666人,实名登记高校毕业生实现就业4929人,城镇登记失业人员期末实有人数3369人。城镇登记失业率2.2%,“零就业家庭”24小时动态清零成果继续巩固。居民消费价格比上年上涨2.6%,其中,食品烟酒类价格上涨1.4%。商品零售价格比上年上涨2.9%。
                </p>
               
                <p>
                    2017年,昌吉回族自治州全社会完成固定资产投资1800.0亿元(不含农户、不含跨地区项目,计划总投资达到500万以上项目),同比增长20.0%。从产业投向看,第一产业投资99.8亿元,同比增长111.4%;第二产业投资644.1亿元,下降17.6%,其中工业投资643.0亿元,下降17.7%;第三产业投资1056.2亿元,增长56.0%。三次产业投资构成5.5:35.8:58.7。
                </p>
            </div>
        </div>

Natural.html【家乡自然景点】

需求

使用js添加左侧栏目点击事件,切换看板的显示,让不同的按钮展示不同的文字。效果图如下:

音乐播放器

电机驱动

核心代码:

<div id="N-center">
            <div class="left">
                <ul>
                    <li><img src="../image/water.png">气候                    </li>
                    <li><img src="../image/Mine.png">地缘特点

                    </li>
                    <li><img src="../image/Ecological.png">资源情况

                    </li>
                    <li><img src="../image/Land.png">地貌</li>
                </ul>
            </div>
            <div class="right">
                <p>
                    昌吉市属中温带区,为典型的大陆性干旱气候,具有冬季寒冷、夏季炎热、昼夜温差大的特点。由于地形条件的影响,由南向北气候差异较大,南部夏季降水较多;北部沙漠性气候特征显著。昌吉州日照充足,年日照时数为2700小时;热量条件也较为充足,年≥10℃积温为3450℃,年平均气温6.8℃,1月份平均气温为-15.6℃,7月份平均气温为24.5℃;年平均降水量为190毫米,夏季降水量明显多于冬季;年无霜期为160-190天。
                </p>
                <p>
                    昌吉州是建设新疆丝绸之路经济带核心区的重要组成部分,是天山北坡经济带和乌昌石城市群率先发展的核心区域,从东西北三面环抱首府乌鲁木齐市,具有与乌鲁木齐市同城一体化发展的区位优势,州府昌吉市距乌鲁木齐市中心35公里,距乌鲁木齐国际机场18公里。北疆铁路、312国道、216国道、115省道、吐乌大高等级公路贯穿全境,是东联内地、西接中亚和欧洲市场的桥头堡和黄金通道。
                </p>
                <p>
                    昌吉州内已发现的能源、金属和非金属矿产资源有煤炭、石油、天然气、石灰石、芒硝、铁、铀、金、铜等50多种。煤炭资源富集,预测储量5732亿吨,占全疆的26%、全国的12%,其中:准东煤田是目前全国最大的整装煤田,预测资源量3900亿吨,已探明2136亿吨。石油预测储量27亿吨、天然气预测储量6000亿立方米。水土光热资源丰富,常年耕种面积800万亩左右,人均耕地10亩左右,盛产棉花、小麦、大麦、玉米、制酱番茄等50多种高效优质农作物,是全国重要的商品粮、商品棉、制酱番茄、酿酒葡萄生产基地。
                </p>
                <p>
                    昌吉自治州地势南高北低,由东南向西北倾斜,南部是天山山地,中部为广袤的冲积平原,北部为浩瀚的沙漠盆地,此区域为横亘南部的天山的北坡,习惯称之为“天山北坡”。
                </p>
            </div>
        </div>

 适合大多数我的家乡标题的作业,改改其中部分图片以及简洁即可,免费获取代码关注公众号(coding加油站)回复家乡领取。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注