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

coding加油站

已于 2023-02-20 21:26:06 修改

阅读量3k

点赞数 4

分类专栏： web前端作业 Html+Css+JavaScript期末大作业文章标签： html 前端

于 2022-09-10 11:08:32 首次发布

本文链接：https://blog.csdn.net/pandas23/article/details/126794835

版权

web前端作业同时被 2 个专栏收录

58 篇文章 63 订阅

订阅专栏

Html+Css+JavaScript期末大作业

31 篇文章 21 订阅

订阅专栏

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、首页

相关代码：

<div class="main">
    <div class="news center">
        <div class="title clear">
            <h2><span>新闻</span>动态<br><em>THE LATEST DEVELOPMENTS</em></h2>
            <a href="">更多>></a>
        </div>
        <div class="news-lunbo clear">
            <div class="box">
                <ul>
                    <li class="curr"><img src="img/index/news1.png" alt=""></li>
                    <li><img src="img/index/news1.png" alt=""></li>
                    <li><img src="img/index/news1.png" alt=""></li>
                    <li><img src="img/index/news1.png" alt=""></li>
                    <li><img src="img/index/news1.png" alt=""></li>
                    <li><img src="img/index/news1.png" alt=""></li>
                </ul>
                <div class="pageN c">
                    <span>国家艺术基金华北片区</span>
                    <p class="clear">
                        <a class="cur">1</a>
                        <a>2</a>
                        <a>3</a>
                        <a>4</a>
                    </p>
                </div>
                <div class="leftBtn">&#xe67d;</div>
                <div class="rightBtn">&#xe63d;</div>
            </div>
            <!--news详情-->
            <div class="newsDetail">
                <div class="newsDetail-top">
                    <h2>国家艺术基金华北片区资助项目集中巡查监督工作顺利完成 </h2>
                    <p>国家艺术基金管理中心副主任王勇带领监督部、财务部工作人员，在山西省文化厅的配合下  赴太原对山西省河北省天津市内蒙古自....</p>
                </div>
                <ul>
                    <li><a href="">珍惜立项重实施</a></li>
                    <li><a href="">山西省文化厅所属部分事业单位2017年 </a></li>
                    <li><a href="">报名及笔试由山西省人事考试中</a></li>
                    <li><a href="">资格复审由各招聘单位负责，省文化厅指导监督</a></li>
                    <li><a href="">参加资格复审人员应提供笔试准考证、本人供笔试身份证</a></li>
                    <li><a href="">报名及笔试由山西省人事考试中</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!--文化传人-->
    <div class="cultureC center">
        <div class="title clear">
            <h2><span>文化</span>传人<br><em>Intangible cultural heritage</em></h2>
            <a href="">更多>></a>
        </div>
        <ul class="clear">
            <li>
                <div class="p-img">
                    <a href=""><img src="img/index/cultureC1.png" alt=""></a>
                </div>
                <h2>江碧峰</h2>
                <p>木偶雕刻非遗传承人</p>
            </li>
            <li>
                <div class="p-img">
                    <a href=""><img src="img/index/cultureC2.png" alt=""></a>
                </div>
                <h2>王峰</h2>
                <p>彩色陶器非遗传承人</p>
            </li>
            <li>
                <div class="p-img">
                    <a href=""><img src="img/index/cultureC3.png" alt=""></a>
                </div>
                <h2>张艺海</h2>
                <p>木偶雕刻非遗传承人</p>
            </li>

        </ul>
    </div>
    <!--晋善晋美-->
    <div class="cultureJ">
        <div class="box">
            <h2>晋善<span>晋美</span></h2>
            <p>为您的文化项目提供服务于支持</p>
            <a href="">查看详细 >></a>
        </div>
        <div class="lineL"></div>
        <div class="lineR"></div>
    </div>
    <!--文化遗产-->
    <div class="cultureY center">
        <div class="title clear">
            <h2><span>文化</span>遗产<br><em>Cultural heritage</em></h2>
            <a href="">更多>></a>
        </div>
        <ul>
            <li>
                <div class="img1 img">
                    <img src="img/index/cultureY1.png" alt="">
                    <div class="shade">
                        <h2>山西民居砖雕艺术</h2>
                        <p>山西民居砖雕是广泛流传于山西省境内 的的汉族传统砖雕技艺</p>
                        <a href="">详细>></a>
                    </div>
                </div>
            </li>
            <li>
                <div class="img2 img">
                    <img src="img/index/cultureY2.png" alt="">
                    <div class="shade">
                        <h2>山西民居砖雕艺术</h2>
                        <p>山西民居砖雕是广泛流传于山西省境内 的的汉族传统砖雕技艺</p>
                        <a href="">详细>></a>
                    </div>
                </div>
                <div class="img2 img">
                    <img src="img/index/cultureY3.png" alt="">
                    <div class="shade">
                        <h2>山西民居砖雕艺术</h2>
                        <p>山西民居砖雕是广泛流传于山西省境内 的的汉族传统砖雕技艺</p>
                        <a href="">详细>></a>
                    </div>
                </div>
            </li>
            <li>
                <div class="img1 img">
                    <img src="img/index/cultureY4.png" alt="">
                    <div class="shade">
                        <h2>山西民居砖雕艺术</h2>
                        <p>山西民居砖雕是广泛流传于山西省境内 的的汉族传统砖雕技艺</p>
                        <a href="">详细>></a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <!--在线展示-->
    <div class="show center">
        <div class="title clear">
            <h2><span>在线</span>展示<br><em>Online display</em></h2>
            <a href="">更多>></a>
        </div>
    </div>
    <div class="showCulture">
        <div class="shade">
            <div class="center clear">
                <div class="video">
                    <img src="img/index/show1.png" alt="">
                </div>
                <div class="introduce">
                    <h3>文化山西</h3>
                    <p>没有大地相隔离的器物，也没有与人类相分离的器具，这就是在这个世界上为我们服务的生活  用品。若是因故离开了用途，器物便会失去生命。也就没有存在的意义。除非得以“发展”更加适合当今的现代人......</p>
                    <a href="">详细>></a>
                </div>
        </div>
        </div>
    </div>
    <!--文化商城-->
    <div class="cultureS center">
        <div class="title clear">
            <h2><span>在线</span>展示<br><em>Online display</em></h2>
            <a href="">更多>></a>
        </div>
        <ul>
            <li>
                <div class="p-img">
                    <img src="img/index/cultureS1.png" alt="">
                </div>
                <p>木雕技艺</p>
            </li>
            <li>
                <div class="p-img">
                    <img src="img/index/cultureS2.png" alt="">
                </div>
                <p>面食技艺</p>
            </li>
            <li>
                <div class="p-img">
                    <img src="img/index/cultureS3.png" alt="">
                </div>
                <p>手绘技艺</p>
            </li>
        </ul>
    </div>
</div>

3.2、文化遗产界面

相关代码：

<div class="main center clear">
    <div class="mainL">
        <h2>文化<i>精英</i>
            <span>Cultural elite</span>
        </h2>
        <div class="tab">
            <a href="">文化研究专家</a>
            <a href="" class="cur">文化传承人</a>
            <a href="">文化创意人</a>
        </div>

    </div>
    <div class="mainR">
        <div class="content">
            <div class="title clear">
                <h2>文化精英<span>Intangible Cultural Heritage</span></h2>
                <p>当前位置：
                    <a href="index.html">网站首页</a>>
                    <a href="list_cultureJ.html">文化精英</a>>
                    <a href="">文化传承人</a>
                </p>
            </div>
            <div class="immateriality">
                <ul class="clear">
                    <li>
                        <div class="p-img">
                            <img src="img/cultureY/cultureY1.png" alt="">
                        </div>
                        <p>山西民居砖雕艺术</p>
                    </li>
                    <li>
                        <div class="p-img">
                            <img src="img/cultureY/cultureY2.png" alt="">
                        </div>
                        <p>山西彩陶艺术</p>
                    </li>
                    <li>
                        <div class="p-img">
                            <img src="img/cultureY/cultureY3.png" alt="">
                        </div>
                        <p>山西民居砖雕艺术</p>
                    </li>
                    <li>
                        <div class="p-img">
                            <img src="img/cultureY/cultureY4.png" alt="">
                        </div>
                        <p>山西彩陶艺术</p>
                    </li>
                    <li>
                        <div class="p-img">
                            <img src="img/cultureY/cultureY5.png" alt="">
                        </div>
                        <p>山西民居砖雕艺术</p>
                    </li>
                    <li>
                        <div class="p-img">
                            <img src="img/cultureY/cultureY6.png" alt="">
                        </div>
                        <p>山西彩陶艺术</p>
                    </li>
                </ul>
            </div>
            <div class="btn">
                <button>上一页</button>
                <a>1</a>
                <a class="cur">2</a>
                <a>3</a>
                <button>下一页</button>
            </div>
        </div>
    </div>
</div>

总结

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