【HTML】HTML网页设计—-非遗网页设计

设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“co d in g加油站”中全部会得到解决

2、作品介绍

非遗网页采用html，css 技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：co d in g加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面

非遗网页系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilde r、Not ePAD 、Vs code 、Sub li m e 、We bs t orm 所有编辑器均可使用）。

2.3、作品技术介绍

html 网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。使用 html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex 布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css 结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

3、作品演示

【co d in g加油站】HTML设计–非遗网页设计

3.1、首页

相关代码：

&lt;body&gt;
    <div class="s-bigblock">
        <div class="s-header">
            <div class="s-first-header">
                <div><img src="img/biaozhi.png" /><span>玩转非遗</span><i>·</i><span>一个你未探索的新世界</span></div>
                <div>
                    <img src="img/消息.png" />
                    <img src="img/sousuo.png" />
                    <span class="data-time">2019-10-19</span>
                    <span class="xingqi">星期六</span>
                </div>
            </div>
            <div class="s-second-header">
                <ul>
                    <li class="boder-line"><span><a href="./index.html" class="whitefont">首页</a></span></li>
                    <li><span><a href="./jigou.html" class="whitefont">机构</a></span></li>
                    <li><span><a class="whitefont" href="http://www.ihchina.cn/zixun">资讯</a></span></li>
                    <li><span><a class="whitefont" href="http://www.ihchina.cn/ziyuan">展览</a></span></li>
                    <li><span><a href="./zhibo.html" class="whitefont">直播秀</a></span></li>
                    <li><span><a href="./shangcheng/index.html" class="whitefont">商城</a></span></li>
                </ul>
            </div>
        </div>
        <div class="s-content-block">
            <div class="silder-block">
                <ul class="imgblock trans">
                    <li class="imglist"><img src="./img/lunbo/3.png" alt="" /></li>
                    <li class="imglist"><img src="./img/lunbo/2.png" alt="" /></li>
                    <li class="imglist"><img src="./img/lunbo/1.png" alt="" /></li>
                    <li class="imglist"><img src="./img/lunbo/4.png" alt="" /></li>
                    <li class="imglist"><img src="./img/lunbo/3.png" alt="" /></li>
                </ul>
                <div class="dian">
                    <div class="diandian"><img src="img/icon/jianzhihong.png" /></div>
                    <div class="diandian"><img src="img/icon/jianzhihong.png""/></div>
                <div class=" diandian"><img src="img/icon/jianzhihong.png""/></div>
                <div class=" diandian"><img src="img/icon/jianzhihong.png""/></div>
            </div>
        </div>
        <div class=" mingce-block">
                        <img src="img/2.jpg" />
                        <div class="mingce-title-block">
                            <span>中国入选联合国教科文组织非物质文化遗产</span>
                            <span>名录（名册）项目</span>
                            <span>共计40项</span>
                            <div class="lookmore"><a href="mingce.html"><span>查看更多</span></a></div>
                        </div>
                    </div>
                    <div class="map-block">
                        <div>
                            <p>部分非物质文化遗产地图</p>
                        </div>
                        <div class="map">
                            <div><span>北京</span>
                                <div><span><a href="./beijin.html">北京</a></span><img src="./img/icon/dingweibai.png" />
                                </div>
                            </div>
                            <div><span>陕西</span>
                                <div><span><a href="./shanxi.html">陕西</a></span><img src="./img/icon/dingweibai.png" />
                                </div>
                            </div>
                            <div><span>四川</span>
                                <div><span><a href="./sichuan.html">四川</a></span><img src="./img/icon/dingweibai.png" />
                                </div>
                            </div>
                            <div><span>贵州</span>
                                <div><span><a href="./guizhou.html">贵州</a></span><img src="./img/icon/dingweibai.png" />
                                </div>
                            </div>
                            <div><span>湖南</span>
                                <div><span><a href="./hunan.html">湖南</a></span><img src="./img/icon/dingweibai.png" />
                                </div>
                            </div>
                            <div><span>湖北</span>
                                <div><span><a href="./hubei.html">湖北</a></span><img src="./img/icon/dingweibai.png" />
                                </div>
                            </div>
                            <div><span>江苏</span>
                                <div><span><a href="./jiangsu.html">江苏</a></span><img src="./img/icon/dingweibai.png" />
                                </div>
                            </div>
                            <div><span>山东</span>
                                <div><span><a href="./shandong.html">山东</a></span><img
                                        src="./img/icon/dingweibai.png" /></div>
                            </div>
                        </div>
                        <div class="chengshijiyi"><button><a class="whitefont" href="./city.html">城市记忆</a></button>
                        </div>
                        <div class="list-block">
                            <h2>【全国】</h2>
                            <div class="top">
                                <ul>
                                    <li class="left_list jinse textend">国家级代表性项目</li>
                                    <li class="left_list textstart">国家及代表性传承人</li>
                                </ul>
                            </div>
                            <div class="bottom-list">
                                <ul>
                                    <li class="list-text"><span>231</span><span>民间文学</span></li>
                                    <li class="list-text"><span>401</span><span>传统音乐</span></li>
                                    <li class="list-text"><span>324</span><span>传统舞蹈</span></li>
                                    <li class="list-text"><span>448</span><span>传统戏剧</span></li>
                                    <li class="list-text"><span>425</span><span>传统体育、游艺与杂技</span></li>
                                    <li class="list-text"><span>361</span><span>传统美术</span></li>
                                    <li class="list-text"><span>193</span><span>曲艺</span></li>
                                    <li class="list-text"><span>507</span><span>传统技艺</span></li>
                                    <li class="list-text"><span>137</span><span>传统医药</span></li>
                                    <li class="list-text"><span>427</span><span>民俗</span></li>
                                </ul>
                            </div>
                            <div class="shuoming-block"><span>说明：数据来自国务院及国家文化和旅游行政主管部门公开
                                    信息，台湾省暂无数据，数据统计截至2018年12月31日 。</span>
                                <div><span>总计：<span>3154</span>项</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="people-block">
                        <ul class="z-s-block">
                            <li>
                                <span>刘兰芳：从艺60周年回眸</span>
                                <img src="./img/shoufengqin/r1.jpg" alt="" />
                            </li>
                            <li>
                                <span>刘魁立：行走田野 问俗追风</span>
                                <img src="./img/shoufengqin/r2.jpg" alt="" />
                            </li>
                            <li>
                                <span>张树萍：初心不改，戏大于天</span>
                                <img src="./img/shoufengqin/r3.jpg" alt="" />
                            </li>
                            <li>
                                <span>姚惠芬：走进威尼斯双年展的中国苏绣大师</span>
                                <img src="./img/shoufengqin/r4.jpg" alt="" />
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="bottom-block">
                    <div>
                        <img src="./img/douyin.jpeg" alt="" />
                        <span>coding加油站</span>
                    </div>
                    <div>
                        <img src="./img/weixin.jpg" alt="" />
                        <span>中国非遗行</span>
                    </div>
                </div>
            </div>
            <!--<div class="cebianlan">-->
            <!--<ul>-->
            <!--<li><img src="img/icon/喇叭(1).png"/><span>通知公告</span></li>-->
            <!--<li><img src="img/icon/图集.png"/><span>图集</span></li>-->
            <!--<li><img src="img/icon/微信.png"/><span>微信</span></li>-->
            <!--<li><img src="img/icon/dingbu.png"/><span>回到顶部</span></li>-->

            <!--</ul>-->
            <!--</div>-->
</body>

3.2、更多机构界面

相关代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css">
    <script src="./js/jquery-1.9.1.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<div class="j-bigblock">
    <div class="s-header whitebackground">
        <div class="s-first-header blackline">
            <div><img src="img/biaozhi.png"/><span class="blackfont">玩转非遗</span><i class="blackfont">·</i><span class="blackfont">一个你未探索的新世界</span></div>
            <div>
                <img src="img/icon/消息.png"/>
                <img src="img/icon/搜索.png"/>
                <span class="data-time blackfont">2019-10-19</span>
                <span class="blackfont xingqi">星期六</span>

            </div>
        </div>
        <div class="s-second-header">
            <ul>
                <li><span  class="blackfont"><a href="index.html">首页</a></span></li>
                <li  class="boder-line"><span  class="blackfont"><a href="./jigou.html">机构</a></span></li>
                <li><span  class="blackfont"><a href="http://www.ihchina.cn/zixun">资讯</a></span></li>
                <li><span  class="blackfont"><a href="http://www.ihchina.cn/ziyuan">展览</a></span></li>
                <li><span  class="blackfont"><a href="./zhibo.html">直播秀</a></span></li>
                <li><span  class="blackfont"><a href="./shangcheng/index.html">商场</a></span></li>
            </ul>
        </div>
    </div>
    <div class="j-content-block">
        <div class="j-title-block"><p>机构</p></div>
        <div class="line-silver"></div>
        <h2>国内机构</h2>
        <ul class="j-list-block">
            <li>
                <div><span>行政机构</span></div>
                <div><span>中华人民共和国文化和旅游部</span><p>中华人民共和国文化和旅游部是国务院组成部门，为正部级。 非物质文化遗产司是文化和旅游部业务司局之一，也是我国非物质文化遗产保护工作的主管业务司局，其主要职责是：拟订非物质文化遗产保护政策和规划并组织实施。组织开展非物质文化遗产保护工作。指导非物质文化遗产调查、记录、确认和建立名录。组织非物质文化遗产研究、宣传和传播等工作。</p></div>
            </li>
            <li>
                <div><span>专业机构</span></div>
                <div><span>中国非物质文化遗产保护中心 </span><p>中国非物质文化遗产保护中心于2006年9月14日在中国艺术研究院挂牌成立。该机构是经中央机构编制委员会办公室批准成立的国家级非物质文化遗产保护的专业机构。中心承担着全国非物质文化遗产保护的相关具体工作，履行非物质文化遗产保护工作的政策咨询；组织全国范围普查工作的开展；指导保护计划的实施；进行非物质文化遗产保护的理论研究；举办学术、展览（演）及公益活动，交流、推介、宣传保护工作的成果和经验；组织实施研究成果的发表和人才培训等工作职能。 </p></div>
            </li>
            <li>
                <div><span>社会团体</span></div>
                <div><span>中国非物质文化遗产保护协会 </span><p>中国非物质文化遗产保护协会，经文化部（现文化和旅游部）2012年4月12日文办函〔2012〕507号、民政部2012年11月12日民函〔2012〕379号批复，于2013年11月份在北京成立，是由从事非物质文化遗产保护工作的企业、事业单位、社会组织和个人自愿结成的全国性、行业性、非盈利社会组织，其上级单位为文化和旅游部。 </p></div>
            </li>
        </ul>
        <h2>国际组织或机构</h2>
        <ul class="j-list-block">
            <li>
                <div><span>国际组织</span></div>
                <div><span>联合国教科文组织</span><p>联合国教育、科学与文化组织（以下简称“教科文组织”）成立于1945年11月6日，拥有195个会员国和8个准会员，由大会和执行局理事，由总干事领导的秘书处执行这两个机构的决定。教科文组织在全世界各地拥有超过50个总部外办事处，总部位于法国巴黎。 </p></div>
            </li>
            <li>
                <div><span>国际组织下设秘书处</span></div>
                <div><span>中华人民共和国文化和旅游部</span><p>联合国教科文组织非物质文化遗产处是联合国教科文组织内设部门之一，承担了《保护非物质文化遗产公约》秘书处的职能，秘书处的工作在总干事的授权下，依照联合国教科文组织大会已核准的方案和预算进行。 </p></div>
            </li>
            <li>
                <div><span>二类中心</span></div>
                <div><span>联合国教科文组织二类中心（亚太地区） </span><p>作为联合国教科文组织支持下的非物质文化遗产领域的区域性和国际性组织与协调机构，该中心通过开展非物质文化遗产领域的国际培训，积极搭建区域性及国际性交流与合作平台，参与实施联合国教科文组织针对《保护非物质文化遗产公约》缔约国开展的履约能力建设战略，为亚太地区乃至全球的非物质文化遗产保护事业做出贡献。</p></div>
            </li>
            <li>
                <div><span>派出机构</span></div>
                <div><span>联合国教科文组织北京办事处（联合国驻华代表处）</span><p>联合国驻华代表处成立于1984年。驻华代表处系多国办事处，负责教科文组织在朝鲜民主主义人民共和国、日本国、蒙古国、中华人民共和国和大韩民国的项目及相关工作。驻华代表处所负责地区的人口占全球总人口的大约1/5，其经济产出约占全球的25%，并且拥有超过5000年的悠久历史和丰富文化。</p></div>
            </li>
            <li>
                <div><span>公约的有关机关</span></div>
                <div><span> 公约的有关机关 </span><p>政府间保护非物质文化遗产委员会在《保护非物质文化遗产公约》依照第三十四条的规定生效之后，委员会由参加大会之缔约国选出的18个缔约国的代表组成。在《保护非物质文化遗产公约》缔约国的数目达到50个之后，委员会委员国的数目将增至24个。  </p></div>
            </li>
        </ul>
    </div>
</div>
<div class="cebianlan">
<ul>
<li><img src="img/icon/喇叭(1).png"/><span>通知公告</span></li>
<li><img src="img/icon/图集.png"/><span>图集</span></li>
<li><img src="img/icon/微信.png"/><span>微信</span></li>
<li><img src="img/icon/dingbu.png"/><span>回到顶部</span></li>

</ul>
</div>
</body>
</html>