【HTML】HTML Web Design----Intangible Cultural Heritage Web Design

1 Introduction

Designing end-of-course assignments, nowhere to start course design, too many total web page requirements? Don't have a suitable template? Database, java, python, vue, html jobs are complex and the workload is too large? Bi She has no clue and a series of questions. All the problems you want to solve will be solved in the WeChat public account "coding gas station"

2. Introduction of works

The intangible cultural heritage webpage is implemented with html and css technology, which conforms to the knowledge system learned, and is suitable for common homework and course design. If you need to obtain more works, please pay attention to the WeChat public account: coding gas station, for more information , you can leave a message in the WeChat background. Everyone is welcome to ask questions and exchange learning.

2.1. Introduction to works 

The intangible cultural heritage webpage system is implemented in a conventional way, which meets most of the requirements. There are relevant documents to explain the code configuration. If you need to learn knowledge points from the code, then this work will be your best choice

2.2. Secondary development tools for works

The code of this work is relatively simple, and it is basically completed using the knowledge points learned in the classroom. You only need to modify the relevant introduction text and some pictures, and you can change it into your own unique code. After downloading the web work, you can use any editing software (for example: DW , HBuilder, NotePAD, Vscode, Sublime, Webstorm all editors can be used).

2.3. Technical introduction of the work

Technical aspects of html webpage works: use CSS to make webpage background images, mouse over and selected navigation color change effects, underline and other related technologies to beautify the relevant interface, and some use javascript for verification. Use html5, css3 and other related technologies to complete the technical layout. In this work, common layouts, common floating layouts, and flex layouts will be used. At the same time, html5 and css3 are used in terms of operation, and basic knowledge such as div+css structure, form, hyperlink, floating, absolute positioning, relative positioning, font style, and reference video are used, and some js related knowledge is also used. For example, dom and bom are used to obtain relevant APIs of the browser, and css is used to beautify the style to make the interface more in line with web design

3. Demonstration of works

【Coding Gas Station】HTML Design--Intangible Cultural Heritage Web Design

3.1. Homepage

Relevant code:

<body>
    <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. More institutional interfaces

 Relevant code:

<!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>

Summarize

The above is the whole content of this project. If you need to communicate or get the code, please pay attention to the WeChat public account: coding gas station, get

Guess you like

Origin blog.csdn.net/pandas23/article/details/126794988