【Web前端期末大作业】“弘扬中国传统文化”传统文化类前端网站实现

熹玖

已于 2024-06-10 23:16:16 修改

阅读量2k

点赞数 30

分类专栏： web前端文章标签：前端课程设计

于 2024-06-10 22:59:51 首次发布

本文链接：https://blog.csdn.net/Eternity_Agr2003/article/details/139583196

版权

👨‍🎓学生HTML前端网页制作👩‍🎓，总共七个页面，页面排版干净简洁。使用HTML+CSS+JS页面布局设计,web前端大学生网页设计作业源码。

一、网站题目👨‍🎓

为积极落实中共中央办公厅、国务院办公厅印发的《关于推进实施国家文化数字化战略的意见》，以弘扬中国传统文化为主题，设计并制作一个前端静态网站，集中展现中国传统文化。内容可以包括汉字书法、国画、传统服饰、传统节假日、传统美食、古诗词、建筑、陶瓷、戏曲、音乐、年画、雕刻、泥塑、刺绣、编织、剪纸、皮影、风筝、民间手工艺、围棋、中医、武术等。

二、作品名称与主题 📖

作品名称：民间手工艺
主题：中华传统文化之民间手工艺

三、网站栏目设计✍️

在这里插入图片描述

四、作业源文件获取 ✔️

gitee仓库：
https://gitee.com/Eternity-Agr/web-front-end-website.git

五、网页效果图🌐

1.首页效果图

在这里插入图片描述

2.注册

在这里插入图片描述

3.登录

在这里插入图片描述

4.手艺资讯

在这里插入图片描述

5.手艺好物

在这里插入图片描述

6.手艺人物

在这里插入图片描述

7.小视频

在这里插入图片描述

六、部分源代码

1.首页框架 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>民间手工艺网</title>
    <!-- 引入初始化的css 文件 -->
    <link rel="stylesheet" href="css/css初始化.css">
    <!-- 引入首页的css文件 -->
    <link rel="stylesheet" href="css/style.css">
    <!-- 引入共用的css文件 -->
    <link rel="stylesheet" href="css/common.css">
</head>

<body>
    <!-- 公告栏 -->
    <div id="notice">
        <!-- 左侧公告标题 -->
        <div id="notice-title">公告</div>
        <!-- 公告内容区 -->
        <ul class="notice">
            <li> &nbsp;&nbsp;&nbsp;传承人徐文浩：做鞋不单是一门技术 更是一种责任</li>
            <li> &nbsp;&nbsp;&nbsp;【非遗活动】首届“振兴传统工艺·鲁班杯”大赛公告</li>
            <li> &nbsp;&nbsp;&nbsp;文化和旅游部 教育部 科技部 工业和信息化部 国家民委 财政部 人力资源社会保障部 商务部 知识产权局 乡村振兴局关于推动传统工艺 高质量传承发展的通知</li>
            <li> &nbsp;&nbsp;&nbsp;关于开展非遗传统手工艺（苗族刺绣）进校园的项目采购公告</li>
        </ul>
        <!-- 公告手动翻页按钮 -->
        <div id="nav-arrows">
            <span id="nav-arrows-left">&lt;</span>
            <span id="nav-arrows-right">&gt;</span>
        </div>
    </div>
    <!-- 头部部分 -->
    <div class="head clearfix">
        <!-- logo部分 -->
        <div class="logo">
            <img src="img/logo.png" alt="logo">
        </div>
        <!-- 导航栏部分 -->
        <div class="nav">
            <ul class="clearfix">
                <li style="margin-left: 120px;"> <a href="#">首页</a> </li>
                <li> <a href="subpage/news.html" target="_blank">手艺资讯</a> </li>
                <li> <a href="#" target="_blank">手艺视界</a> </li>
                <li> <a href="subpage/works.html" target="_blank">手艺好物</a> </li>
                <li> <a href="subpage/character.html" target="_blank">手艺人物</a> </li>
                <li> <a href="#" target="_blank">传承活动</a> </li>
                <i style="float: right;  padding: 37px 35px;;"> <a href="subpage/register.html"
                        style="font-size: 14px; color: #fff" target="_blank">注册/</a><a href="subpage/login.html"
                        style="font-size: 14px; color: #fff" target="_blank">登录</a>
                </i>
            </ul>
        </div>

    </div>
    <div class="banner">
        <img src="img/banner.png" alt="">
    </div>
    <!-- 主体部分 -->
    <div class="main clearfix">
        <!-- 轮播图开始 -->
        <div class="carousel" id="carousel">
            <div class="carousel-inner">
                <div class="item">
                    <a href="#" class="ai-banner-contain" target="_blank">
                        <img src="img/banner1.jpg">
                    </a>
                </div>

                <div class="item">
                    <a href="#" class="ai-banner-contain" target="_blank">
                        <img src="img/banner2.jpg">
                    </a>
                </div>

                <div class="item">
                    <a href="#" class="ai-banner-contain" target="_blank">
                        <img src="img/banner3.jpeg">
                    </a>
                </div>

                <div class="item">
                    <a href="#" class="ai-banner-contain" target="_blank">
                        <img src="img/banner4.png">
                    </a>
                </div>

                <div class="carousel-indicators">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </div>

                <div class="carousel-control left">
                    <img src="img/prev.png" alt="左箭头">
                </div>
                <div class="carousel-control right">
                    <img src="img/next.png" alt="右箭头">
                </div>
            </div>
        </div>
        <!-- 轮播图结束 -->
        <!-- 热门资讯开始 -->
        <div class="clearfix">
            <div class="news clearfix">
                <div class="title clearfix">
                    <span class="top">
                        <a href="#"><span>热点</span>资讯</a>
                    </span>
                    <span class="clearfix">
                        <a href="subpage/news.html">更多</a>
                    </span>
                </div>
                <div class="content">
                    <p>
                        <i></i>
                        <a href="https://www.accweb.cn/news/2022080114512421346.html" title="浙江省非物质文化遗产保护协会生产性保护专业委员会成立"
                            target="_blank">浙江省非物质文化遗产保护协会生产性保护专业委员会成立</a>
                    </p>
                    <p>
                        <i></i>
                        <a href="https://www.accweb.cn/news/2022073109203221345.html" title="相遇·匠心·传承”国际手工艺发展论坛成功举办"
                            target="_blank">相遇·匠心·传承”国际手工艺发展论坛成功举办</a>
                    </p>
                    <p>
                        <i></i>
                        <a href="https://www.accweb.cn/news/2022071709534021342.html" title="中国工艺美术学会五届三次理事会在杭州召开"
                            target="_blank">中国工艺美术学会五届三次理事会在杭州召开</a>
                    </p>
                    <p>
                        <i></i>
                        <a href="https://www.accweb.cn/news/2022071509034921341.html" title="“匠心传承——工艺美术大师精品展”在中国美术馆开幕"
                            target="_blank">“匠心传承——工艺美术大师精品展”在中国美术馆开幕</a>
                    </p>
                    <p>
                        <i></i>
                        <a href="https://www.accweb.cn/news/2022070514340521340.html" title="中国工艺美术大师林东传承展"
                            target="_blank">中国工艺美术大师林东传承展</a>
                    </p>
                    <p>
                        <i></i>
                        <a href="https://www.accweb.cn/news/2022070514340521340.html" title="广东工艺美术大师“创作谈”系列"
                            target="_blank">广东工艺美术大师“创作谈”系列</a>
                    </p>
                </div>
            </div>
        </div>
        <!-- 热门资讯结束 -->
        <!-- 手艺人物开始 -->
        <div class="character">
            <div class="character_header">
                <h3>
                    <strong>手艺人物</strong>
                </h3>
                <span>
                    <a href="subpage/character.html">
                        更多
                        <img src="img/more.png" alt="更多">
                    </a>
                </span>
            </div>
            <div class="character_content">
                <ul>
                    <li>
                        <img src="img/character1.jpg" alt="苏永军">
                        <div class="character_1">
                            <h4>苏永军</h4>
                            <p>53岁的苏永军是苏氏琉璃的第八代传人，祖祖辈辈传下来的老手艺如
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="img/character2.jpg" alt="商浩洋">
                        <div class="character_2">
                            <h4>商浩洋</h4>
                            <p>“这个字读shan不读yan,‘剡’就是现在的嵊州，这个纸也只有我们
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="img/character3.jpg" alt="魏达荣">
                        <div class="character_3">
                            <h4>魏达荣</h4>
                            <p>推门走进魏达荣的工作室，玄关的架子上，几盆形象逼真的假山一下
                            </p>
                        </div>
                    </li>
                    <li>
                        <img src="img/character4.jpg" alt="喇兵玛扎实">
                        <div class="character_4">
                            <h4>喇兵玛扎实</h4>
                            <p>“摩梭绘画的表现手法不仅注重原始的点线面的绘画，还重视色彩的
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 手艺人物结束 -->

        <!-- 小视频开始 -->
        <div class="medias" style="width: 540px; margin-top: 28px;">
            <div class="medias_header">
                <h3>
                    <strong>小视频</strong>
                </h3>
                <span class="more">
                    <a href="subpage/media.html">
                        更多
                        <img src="img/more.png" alt="更多">
                    </a>
                </span>
            </div>
            <div class="medias_content clearfix">
                <div class="video_1">
                    <video src="media/1.mp4" controls poster="img/media1.png"></video>
                </div>
            </div>
        </div>
        <!-- 小视频结束 -->
        <!-- 聚艺视点开始 -->
        <div class="art_view">
            <div class="art_head">
                <h3>
                    <strong> 聚艺视点</strong>
                </h3>
                <span class="more">
                    <a href="#" style="color: #bebcbc;">
                        更多
                        <img src="img/more.png" alt="更多">
                    </a>
                </span>
                <div class="art_content">
                    <ul>
                        <li>
                            <h4>
                                <a href="#" target="_blank">2023年“文化和自然遗产日”非遗宣传展示活动启动</a>
                            </h4>
                            <p>2023年6月10日是“文化和自然遗产日”。6月9日，2023年“文化和自然遗产日”非遗宣传展示活动</p>
                        </li>
                        <li>
                            <h4>
                                <a href="#" target="_blank">广东增城：非遗走进荔枝园 赋能乡村振兴</a>
                            </h4>
                            <p>6月17日至18日，广州市增城区举办全国百项非遗进增城活动，组织来自全国各地的非遗项目代表性传承人走进增城荔枝果园</p>
                        </li>
                        <li>
                            <h4>
                                <a href="#" target="_blank">文化和旅游部非遗司司长王晨阳：全面推进非物质文化遗产系统性保护</a>
                            </h4>
                            <p>非物质文化遗产是中华优秀传统文化的重要组成部分，是中华文明多元一体、绵延传承的生动见证。</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 聚艺视点结束 -->
        <!-- 手艺好物开始 -->
        <div class="opus clearfix">
            <h3>
                <img src="img/h3_bg03.png" alt="">
            </h3>
            <div class="opus_nav">
                <ul class="tab_list clearfix">
                    <li class="opus_current