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

    1、引言

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

    2、作品介绍

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

    2.1、作品简介方面 

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

    2.2、作品二次开发工具

    此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。

    2.3、作品技术介绍

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

    3、作品演示

    【coding加油站】HTML设计--非遗网页设计

    3.1、首页

    相关代码：

    1. <body>
    2.     <div class="s-bigblock">
    3.         <div class="s-header">
    4.             <div class="s-first-header">
    5.                 <div><img src="img/biaozhi.png" /><span>玩转非遗span><i>·i><span>一个你未探索的新世界span>div>
    6.                 <div>
    7.                     <img src="img/消息.png" />
    8.                     <img src="img/sousuo.png" />
    9.                     <span class="data-time">2019-10-19span>
    10.                     <span class="xingqi">星期六span>
    11.                 div>
    12.             div>
    13.             <div class="s-second-header">
    14.                 <ul>
    15.                     <li class="boder-line"><span><a href="./index.html" class="whitefont">首页a>span>li>
    16.                     <li><span><a href="./jigou.html" class="whitefont">机构a>span>li>
    17.                     <li><span><a class="whitefont" href="http://www.ihchina.cn/zixun">资讯a>span>li>
    18.                     <li><span><a class="whitefont" href="http://www.ihchina.cn/ziyuan">展览a>span>li>
    19.                     <li><span><a href="./zhibo.html" class="whitefont">直播秀a>span>li>
    20.                     <li><span><a href="./shangcheng/index.html" class="whitefont">商城a>span>li>
    21.                 ul>
    22.             div>
    23.         div>
    24.         <div class="s-content-block">
    25.             <div class="silder-block">
    26.                 <ul class="imgblock trans">
    27.                     <li class="imglist"><img src="./img/lunbo/3.png" alt="" />li>
    28.                     <li class="imglist"><img src="./img/lunbo/2.png" alt="" />li>
    29.                     <li class="imglist"><img src="./img/lunbo/1.png" alt="" />li>
    30.                     <li class="imglist"><img src="./img/lunbo/4.png" alt="" />li>
    31.                     <li class="imglist"><img src="./img/lunbo/3.png" alt="" />li>
    32.                 ul>
    33.                 <div class="dian">
    34.                     <div class="diandian"><img src="img/icon/jianzhihong.png" />div>
    35.                     <div class="diandian"><img src="img/icon/jianzhihong.png""/>div>
    36.                 <div class=" diandian"><img src="img/icon/jianzhihong.png""/>div>
    37.                 <div class=" diandian"><img src="img/icon/jianzhihong.png""/>div>
    38.             div>
    39.         div>
    40.         <div class=" mingce-block">
    41.                         <img src="img/2.jpg" />
    42.                         <div class="mingce-title-block">
    43.                             <span>中国入选联合国教科文组织非物质文化遗产span>
    44.                             <span>名录（名册）项目span>
    45.                             <span>共计40项span>
    46.                             <div class="lookmore"><a href="mingce.html"><span>查看更多span>a>div>
    47.                         div>
    48.                     div>
    49.                     <div class="map-block">
    50.                         <div>
    51.                             <p>部分非物质文化遗产地图p>
    52.                         div>
    53.                         <div class="map">
    54.                             <div><span>北京span>
    55.                                 <div><span><a href="./beijin.html">北京a>span><img src="./img/icon/dingweibai.png" />
    56.                                 div>
    57.                             div>
    58.                             <div><span>陕西span>
    59.                                 <div><span><a href="./shanxi.html">陕西a>span><img src="./img/icon/dingweibai.png" />
    60.                                 div>
    61.                             div>
    62.                             <div><span>四川span>
    63.                                 <div><span><a href="./sichuan.html">四川a>span><img src="./img/icon/dingweibai.png" />
    64.                                 div>
    65.                             div>
    66.                             <div><span>贵州span>
    67.                                 <div><span><a href="./guizhou.html">贵州a>span><img src="./img/icon/dingweibai.png" />
    68.                                 div>
    69.                             div>
    70.                             <div><span>湖南span>
    71.                                 <div><span><a href="./hunan.html">湖南a>span><img src="./img/icon/dingweibai.png" />
    72.                                 div>
    73.                             div>
    74.                             <div><span>湖北span>
    75.                                 <div><span><a href="./hubei.html">湖北a>span><img src="./img/icon/dingweibai.png" />
    76.                                 div>
    77.                             div>
    78.                             <div><span>江苏span>
    79.                                 <div><span><a href="./jiangsu.html">江苏a>span><img src="./img/icon/dingweibai.png" />
    80.                                 div>
    81.                             div>
    82.                             <div><span>山东span>
    83.                                 <div><span><a href="./shandong.html">山东a>span><img
    84.                                         src="./img/icon/dingweibai.png" />div>
    85.                             div>
    86.                         div>
    87.                         <div class="chengshijiyi"><button><a class="whitefont" href="./city.html">城市记忆a>button>
    88.                         div>
    89.                         <div class="list-block">
    90.                             <h2>【全国】h2>
    91.                             <div class="top">
    92.                                 <ul>
    93.                                     <li class="left_list jinse textend">国家级代表性项目li>
    94.                                     <li class="left_list textstart">国家及代表性传承人li>
    95.                                 ul>
    96.                             div>
    97.                             <div class="bottom-list">
    98.                                 <ul>
    99.                                     <li class="list-text"><span>231span><span>民间文学span>li>
    100.                                     <li class="list-text"><span>401span><span>传统音乐span>li>
    101.                                     <li class="list-text"><span>324span><span>传统舞蹈span>li>
    102.                                     <li class="list-text"><span>448span><span>传统戏剧span>li>
    103.                                     <li class="list-text"><span>425span><span>传统体育、游艺与杂技span>li>
    104.                                     <li class="list-text"><span>361span><span>传统美术span>li>
    105.                                     <li class="list-text"><span>193span><span>曲艺span>li>
    106.                                     <li class="list-text"><span>507span><span>传统技艺span>li>
    107.                                     <li class="list-text"><span>137span><span>传统医药span>li>
    108.                                     <li class="list-text"><span>427span><span>民俗span>li>
    109.                                 ul>
    110.                             div>
    111.                             <div class="shuoming-block"><span>说明：数据来自国务院及国家文化和旅游行政主管部门公开
    112.                                     信息，台湾省暂无数据，数据统计截至2018年12月31日 。span>
    113.                                 <div><span>总计：<span>3154span>项span>div>
    114.                             div>
    115.                         div>
    116.                     div>
    117.                     <div class="people-block">
    118.                         <ul class="z-s-block">
    119.                             <li>
    120.                                 <span>刘兰芳：从艺60周年回眸span>
    121.                                 <img src="./img/shoufengqin/r1.jpg" alt="" />
    122.                             li>
    123.                             <li>
    124.                                 <span>刘魁立：行走田野 问俗追风span>
    125.                                 <img src="./img/shoufengqin/r2.jpg" alt="" />
    126.                             li>
    127.                             <li>
    128.                                 <span>张树萍：初心不改，戏大于天span>
    129.                                 <img src="./img/shoufengqin/r3.jpg" alt="" />
    130.                             li>
    131.                             <li>
    132.                                 <span>姚惠芬：走进威尼斯双年展的中国苏绣大师span>
    133.                                 <img src="./img/shoufengqin/r4.jpg" alt="" />
    134.                             li>
    135.                         ul>
    136.                     div>
    137.                 div>
    138.                 <div class="bottom-block">
    139.                     <div>
    140.                         <img src="./img/douyin.jpeg" alt="" />
    141.                         <span>coding加油站span>
    142.                     div>
    143.                     <div>
    144.                         <img src="./img/weixin.jpg" alt="" />
    145.                         <span>中国非遗行span>
    146.                     div>
    147.                 div>
    148.             div>
    149.             
    150.             
    151.             
    152.             
    153.             
    154.             
    155.  
    156.             
    157.             
    158. body>

    3.2、更多机构界面

     相关代码：

    1. html>
    2. <html>
    3. <head lang="en">
    4.     <meta charset="UTF-8">
    5.     <title>title>
    6.     <link rel="stylesheet" href="css/index.css">
    7.     <script src="./js/jquery-1.9.1.js">script>
    8.     <script src="js/jquery-3.4.1.min.js">script>
    9.     <script src="js/index.js">script>
    10. head>
    11. <body>
    12. <div class="j-bigblock">
    13.     <div class="s-header whitebackground">
    14.         <div class="s-first-header blackline">
    15.             <div><img src="img/biaozhi.png"/><span class="blackfont">玩转非遗span><i class="blackfont">·i><span class="blackfont">一个你未探索的新世界span>div>
    16.             <div>
    17.                 <img src="img/icon/消息.png"/>
    18.                 <img src="img/icon/搜索.png"/>
    19.                 <span class="data-time blackfont">2019-10-19span>
    20.                 <span class="blackfont xingqi">星期六span>
    21.  
    22.             div>
    23.         div>
    24.         <div class="s-second-header">
    25.             <ul>
    26.                 <li><span  class="blackfont"><a href="index.html">首页a>span>li>
    27.                 <li  class="boder-line"><span  class="blackfont"><a href="./jigou.html">机构a>span>li>
    28.                 <li><span  class="blackfont"><a href="http://www.ihchina.cn/zixun">资讯a>span>li>
    29.                 <li><span  class="blackfont"><a href="http://www.ihchina.cn/ziyuan">展览a>span>li>
    30.                 <li><span  class="blackfont"><a href="./zhibo.html">直播秀a>span>li>
    31.                 <li><span  class="blackfont"><a href="./shangcheng/index.html">商场a>span>li>
    32.             ul>
    33.         div>
    34.     div>
    35.     <div class="j-content-block">
    36.         <div class="j-title-block"><p>机构p>div>
    37.         <div class="line-silver">div>
    38.         <h2>国内机构h2>
    39.         <ul class="j-list-block">
    40.             <li>
    41.                 <div><span>行政机构span>div>
    42.                 <div><span>中华人民共和国文化和旅游部span><p>中华人民共和国文化和旅游部是国务院组成部门，为正部级。 非物质文化遗产司是文化和旅游部业务司局之一，也是我国非物质文化遗产保护工作的主管业务司局，其主要职责是：拟订非物质文化遗产保护政策和规划并组织实施。组织开展非物质文化遗产保护工作。指导非物质文化遗产调查、记录、确认和建立名录。组织非物质文化遗产研究、宣传和传播等工作。p>div>
    43.             li>
    44.             <li>
    45.                 <div><span>专业机构span>div>
    46.                 <div><span>中国非物质文化遗产保护中心 span><p>中国非物质文化遗产保护中心于2006年9月14日在中国艺术研究院挂牌成立。该机构是经中央机构编制委员会办公室批准成立的国家级非物质文化遗产保护的专业机构。中心承担着全国非物质文化遗产保护的相关具体工作，履行非物质文化遗产保护工作的政策咨询；组织全国范围普查工作的开展；指导保护计划的实施；进行非物质文化遗产保护的理论研究；举办学术、展览（演）及公益活动，交流、推介、宣传保护工作的成果和经验；组织实施研究成果的发表和人才培训等工作职能。 p>div>
    47.             li>
    48.             <li>
    49.                 <div><span>社会团体span>div>
    50.                 <div><span>中国非物质文化遗产保护协会 span><p>中国非物质文化遗产保护协会，经文化部（现文化和旅游部）2012年4月12日文办函〔2012〕507号、民政部2012年11月12日民函〔2012〕379号批复，于2013年11月份在北京成立，是由从事非物质文化遗产保护工作的企业、事业单位、社会组织和个人自愿结成的全国性、行业性、非盈利社会组织，其上级单位为文化和旅游部。 p>div>
    51.             li>
    52.         ul>
    53.         <h2>国际组织或机构h2>
    54.         <ul class="j-list-block">
    55.             <li>
    56.                 <div><span>国际组织span>div>
    57.                 <div><span>联合国教科文组织span><p>联合国教育、科学与文化组织（以下简称“教科文组织”）成立于1945年11月6日，拥有195个会员国和8个准会员，由大会和执行局理事，由总干事领导的秘书处执行这两个机构的决定。教科文组织在全世界各地拥有超过50个总部外办事处，总部位于法国巴黎。 p>div>
    58.             li>
    59.             <li>
    60.                 <div><span>国际组织下设秘书处span>div>
    61.                 <div><span>中华人民共和国文化和旅游部span><p>联合国教科文组织非物质文化遗产处是联合国教科文组织内设部门之一，承担了《保护非物质文化遗产公约》秘书处的职能，秘书处的工作在总干事的授权下，依照联合国教科文组织大会已核准的方案和预算进行。 p>div>
    62.             li>
    63.             <li>
    64.                 <div><span>二类中心span>div>
    65.                 <div><span>联合国教科文组织二类中心（亚太地区） span><p>作为联合国教科文组织支持下的非物质文化遗产领域的区域性和国际性组织与协调机构，该中心通过开展非物质文化遗产领域的国际培训，积极搭建区域性及国际性交流与合作平台，参与实施联合国教科文组织针对《保护非物质文化遗产公约》缔约国开展的履约能力建设战略，为亚太地区乃至全球的非物质文化遗产保护事业做出贡献。p>div>
    66.             li>
    67.             <li>
    68.                 <div><span>派出机构span>div>
    69.                 <div><span>联合国教科文组织北京办事处（联合国驻华代表处）span><p>联合国驻华代表处成立于1984年。驻华代表处系多国办事处，负责教科文组织在朝鲜民主主义人民共和国、日本国、蒙古国、中华人民共和国和大韩民国的项目及相关工作。驻华代表处所负责地区的人口占全球总人口的大约1/5，其经济产出约占全球的25%，并且拥有超过5000年的悠久历史和丰富文化。p>div>
    70.             li>
    71.             <li>
    72.                 <div><span>公约的有关机关span>div>
    73.                 <div><span> 公约的有关机关 span><p>政府间保护非物质文化遗产委员会在《保护非物质文化遗产公约》依照第三十四条的规定生效之后，委员会由参加大会之缔约国选出的18个缔约国的代表组成。在《保护非物质文化遗产公约》缔约国的数目达到50个之后，委员会委员国的数目将增至24个。  p>div>
    74.             li>
    75.         ul>
    76.     div>
    77. div>
    78. <div class="cebianlan">
    79. <ul>
    80. <li><img src="img/icon/喇叭(1).png"/><span>通知公告span>li>
    81. <li><img src="img/icon/图集.png"/><span>图集span>li>
    82. <li><img src="img/icon/微信.png"/><span>微信span>li>
    83. <li><img src="img/icon/dingbu.png"/><span>回到顶部span>li>
    84.  
    85. ul>
    86. div>
    87. body>
    88. html>

    总结

    以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站，获取

  • 相关阅读:
    什么是运放的虚短和虚断
    区块链技术在金融领域的应用场景
    阿里云云安全中心有必要买吗？ 这些功能值得吗？
    如何在多版本C#工程上添加程序集
    又发现了一个Jupyter Notebook的黑科技，Visual Python支持无代码开发！
    如何解决Blender装配中常见问题，修复角色的绑定问题？
    qt qml中listview出现卡顿情况时的常用处理方法
    基于ssm的图书（借阅）管理系统
    文生图的最新进展：从一致性模型CMs、LCM、SDXL到Stable Diffusion3、SDXL-Lightning
    06-linux下的软件包管理 RPM YUM
  • 原文地址：https://blog.csdn.net/pandas23/article/details/126794988