基于html css jquery bootstrap响应式网页制作模板——红色中国文化主题：大美中国

家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】
❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录🌰

一、网页介绍📖
一、网页效果🌌
二、代码展示😈
- 1.HTML结构代码 🧱
- 2.CSS样式代码 🏠
三、个人总结😊
四、更多干货🚀

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- basic -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- mobile metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- site metas -->
    <title>戏曲文化</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- bootstrap css -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- style css -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Responsive-->
    <link rel="stylesheet" href="css/responsive.css">
    <!-- fevicon -->
    <link rel="icon" href="images/fevicon.png" type="image/gif" />
    <!-- Scrollbar Custom CSS -->
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
    <!-- Tweaks for older IEs-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<!-- body -->
<body class="main-layout" style="border: 1px solid #000000; width: 1400px;height: 500px;;margin: 0 auto;">

<!-- loader  -->

<!-- end loader -->
<!-- header -->
<!-- header -->
<header>
    <!-- header inner -->
    <div class="header">
        <div class="container">
            <div class="row">
                <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col logo_section">
                    <div class="full">
                        <div class="center-desk">
                            <div class="logo"> <a href="#"><img src="images/logo-1.png" alt="#"></a> </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-9 col-lg-9 col-md-9 col-sm-9">
                    <div class="menu-area">
                        <div class="limit-box">
                            <nav class="main-menu">
                                <ul class="menu-area-main">
                                    <li> <a href="index_1.html">首页</a> </li>
                                    <li> <a href="culture_h.html">文化</a> </li>
                                    <li><a href="view_h.html">风景</a></li>
                                    <li><a href="technology_h.html">科技</a></li>
                                    <li><a href="food.html">美食</a></li>
                                    <li><a href="echarts.html">可视化界面</a></li>
                                    <li><a href="anniversary.html">建党一百周年</a></li>
                                    <li class="mean-last"> <a href="#"><img src="images/search_icon.png" alt="#" /></a> </li>
                                    <li class="mean-last"> <a href="#"><img src="images/top-icon.png" alt="#" /></a> </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- end header inner -->
</header>
<!-- end header -->
<div class="about-bg">
    <div class="container">
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                <div class="abouttitle">
                    <h2  style="font-family:方正隶书简体;font-size:70px">什&nbsp么&nbsp是&nbsp戏&nbsp曲</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- about -->
<div class="t">
    <div class="container">
        <div class="row">
            <div class="col-md-10 offset-md-1">
                <div class="aboutheading">
                    <h2 style="font-size:40px">中国 <strong class="black">戏曲</strong></h2>

                </div>
            </div>
        </div>
        <div class="row border">
            <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12">
                <div class="about-box">
                    <figure><img src="images/戏曲元素.png" alt="img" /></figure>
                </div>
            </div>
            <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12">
                <div class="about-box">
                    <p> 中国戏曲主要是由民间歌舞、说唱和滑稽戏三种不同艺术形式综合而成。它起源于原始歌舞，是一种历史悠久的综合舞台艺术样式。经过汉、唐到宋、金才形成比较完整的戏曲艺术，它由文学、音乐、舞蹈、美术、武术、杂技以及表演艺术综合而成，约有三百六十多个种类。它的特点是将众多艺术形式以一种标准聚合在一起，在共同具有的性质中体现其各自的个性。 中国的戏曲与希腊悲剧和喜剧、印度梵剧并称为世界三大古老的戏剧文化，经过长期的发展演变，逐步形成了以“京剧、越剧、黄梅戏、评剧、豫剧”五大戏曲剧种为核心的中华戏曲百花苑。</p>
                </div>
            </div>

        </div>
    </div>
</div>


<!-- about -->
<div class="u">
    <div class="container">
        <div class="row">
            <div class="col-md-10 offset-md-1">
                <div class="aboutheading">
                    <h2 style="font-size:40px">发展 &nbsp<strong class="black">历程</strong></h2>

                </div>
            </div>
        </div>
        <div class="row border">

            <div class="about-box">
                <p> 先秦（萌芽期）<br>戏曲最早可以追溯到上古时代用来娱神的原始歌舞。从春秋战国到汉代，在娱神的歌舞中逐渐演变出娱人的歌舞。从汉魏到中唐，又先后出现了以竞技为主的“角抵”（即百戏）、以问答方式表演的“参军戏”和扮演生活小故事的歌舞“踏摇娘”等，这些都是萌芽状态的戏剧。<br>唐代中后期（形成期）<br>中唐以后，中国戏剧飞跃发展，戏剧艺术逐渐形成。唐代文学艺术的繁荣，是经济高度发展的结果，促进了戏曲艺术的自立门户，并给戏曲艺术以丰富的营养，诗歌的声律和叙事诗的成熟给了戏曲决定性影响。<br>宋金（发展期）<br>宋代的“杂剧”，金代的“院本”和讲唱形式的“诸宫调”，从乐曲、结构到内容，都为元代杂剧打下了基础。 <br>元代（成熟期）<br>到了元代，“杂剧”就在原有基础上大大发展，成为一种新型的戏剧。它具备了戏剧的基本特点，标志着中国戏剧进入成熟的阶段。<br>明清（繁荣期）<br>戏曲到了明代，传奇发展起来了。明代中叶，传奇作家和剧本大量涌现。明后期的舞台，开始流行以演折子戏为主的风尚。<br>近代（革新期）<br>辛亥革命前后，一批有造诣的戏曲艺术家从事戏曲艺术改良活动，他们为以后的戏曲改良积累了宝资的经验。<br>现代（争辉期）<br></p>

            </div>


        </div>
    </div>
</div>


<!-- about -->
<div class="o">
    <div class="container">
        <div class="row">
            <div class="col-md-10 offset-md-1">
                <div class="aboutheading">
                    <h2 style="font-size:40px"> 艺术特色&nbsp<strong class="black">戏曲剧种<strong class="black"></strong></h2>

                </div>
            </div>
        </div>
        <div class="row border">
            <div class="col-xl-7 col-lg-7 col-md-12 col-sm-12">
                <div class="about-box">
                    <p> 艺术特色<br>综合性、虚拟性、程式性，是中国戏曲的主要艺术特征。这些特征，凝聚着中国传统文化的美学思想精髓，构成了独特的戏剧观，使中国戏曲在世界戏曲文化的大舞台上闪耀着它的独特的艺术光辉。综合性：中国戏曲是一种高度综合的汉族民间艺术；程式性：程式是戏曲反映生活的表现形式。虚拟性：虚拟是戏曲反映生活的基本手法。<br>戏曲剧种<br>中国五大戏曲剧种一般均表述依次为：京剧（有“国剧”之称  ）、越剧（有“中国第二大剧种”、“第二国剧”之称  ）、黄梅戏、评剧、豫剧。   采用如此表述的书籍出版物有数十种，覆盖教育、旅游、戏曲、电影、网络、民俗、文化、电视、国学、艺术、漫画等各领域.</p>

                </div>
            </div>
            <div class="col-xl-5 col-lg-5 col-md-12 col-sm-12">
                <div class="about-box">
                    <figure><img src="images/戏曲1.png" alt="img" /></figure>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- end about -->

<!-- Contact -->
<div class="Con">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="titlepage3">
                    <h2>联系我们</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                <form>
                    <div class="row">
                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
                            <input class="form-control" placeholder="姓名" type="Name">
                        </div>
                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
                            <input class="form-control" placeholder="电话" type="Phone Number">
                        </div>
                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
                            <input class="form-control" placeholder="邮箱" type="Email">
                        </div>
                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12">
                            <textarea class="textarea" placeholder="Message">留言</textarea>
                        </div>
                    </div>
                </form>
            </div>
            <button class="send-btn">发送</button>
        </div>
    </div>
</div>
<!-- end Contact -->
<!-- footer -->
<footer>

    <div class="copyright">
        <div class="container">
            <p>关于我们 &nbsp|&nbsp 版权声明&nbsp|&nbsp联系电话：111111&nbsp|&nbsp邮箱：111111@www.com</p>
            <p>Copyright &copy; 大美中国&nbsp|&nbsp实名认证</p>
        </div>
    </div>
</footer>
<!-- end footer -->
<!-- Javascript files-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/plugin.js"></script>
<!-- sidebar -->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>

2.CSS样式代码 🏠


/*---------------------------------------------------------------------
    File Name: nice-select.css
---------------------------------------------------------------------*/

.nice-select {
  background-color: #f6f6f6;
  border-radius: 0;
  box-sizing: border-box;
  clear: both;
  display: block;
  float: left;
  height: auto;
  outline: none;
  padding-left: 20px;
  padding-right: 35px;
  position: relative;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 50%;
  cursor: pointer;
  font-family: inherit;
  font-weight: normal;
  line-height: 50px;
  text-align: left !important;
  white-space: nowrap;
  font-weight: 300;
}

.nice-select:after {
  border-bottom: 2px solid #999;
  border-right: 2px solid #999;
  content: '';
  display: block;
  height: 5px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  -webkit-transform-origin: 66% 66%;
  -ms-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  width: 5px;
}

.nice-select.open:after {
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.nice-select.open .list {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: scale(1) translateY(0);
  -ms-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
}

.nice-select.disabled {
  border-color: #ededed;
  color: #999;
  pointer-events: none;
}

.nice-select.disabled:after {
  border-color: #cccccc;
}

.nice-select.wide {
  width: 100%;
}

.nice-select.wide .list {
  left: 0 !important;
  right: 0 !important;
}

.nice-select.right {
  float: right;
}

.nice-select.right .list {
  left: auto;
  right: 0;
}

.nice-select.small {
  font-size: 12px;
  height: 36px;
  line-height: 34px;
}

.nice-select.small:after {
  height: 4px;
  width: 4px;
}

.nice-select.small .option {
  line-height: 34px;
  min-height: 34px;
}

.nice-select .list {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
  box-sizing: border-box;
  margin-top: 4px;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  -webkit-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transform: scale(0.75) translateY(-21px);
  -ms-transform: scale(0.75) translateY(-21px);
  transform: scale(0.75) translateY(-21px);
  -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  z-index: 9;
}

.nice-select .list:hover .option:not(:hover) {
  background-color: transparent !important;
}

.nice-select .option {
  cursor: pointer;
  font-weight: 400;
  line-height: 40px;
  list-style: none;
  min-height: 40px;
  outline: none;
  padding-left: 18px;
  padding-right: 29px;
  text-align: left;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
  background-color: #f6f6f6;
}

.nice-select .option.selected {
  font-weight: bold;
}

.nice-select .option.disabled {
  background-color: transparent;
  color: #999;
  cursor: default;
}

.no-csspointerevents .nice-select .list {
  display: none;
}

.no-csspointerevents .nice-select.open .list {
  display: block;
}

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

基于html css jquery bootstrap响应式网页制作模板——红色中国文化主题：大美中国

文章目录🌰

一、网页介绍📖

一、网页效果🌌

二、代码展示😈

1.HTML结构代码 🧱

2.CSS样式代码 🏠

三、个人总结😊

四、更多干货🚀

jquery列表顺序倒转排序效果

layui加jQuery实现 web 登录功能（验证码验证）

jquery for循环

WEB文件上传之JQuery ajaxfileupload插件使用（二）

JQuery 基本使用(1)，前端开发要求

27岁学前端开发，jquery绑定事件不生效

jQuery制作一个简单的打地鼠游戏(超详细讲解)

ECharts之饼图外圈Pie -- 旋转动画

echarts根据经纬度在地图上生成标点

vue echarts实现中国地图

前端哥

jquery列表顺序倒转排序效果

layui加jQuery实现 web 登录功能（验证码验证）

jquery for循环

WEB文件上传之JQuery ajaxfileupload插件使用（二）

JQuery 基本使用(1)，前端开发要求

27岁学前端开发，jquery绑定事件不生效

jQuery制作一个简单的打地鼠游戏(超详细讲解)

ECharts之饼图外圈Pie -- 旋转动画

echarts根据经纬度在地图上生成标点

WPF 与echarts绘图控件数据交互

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000

2
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

3
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

4
移动端css布局大全

2024-02-06 15:02:421000

5
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

6
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

7
echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999

8
jQuery事件处理

2024-03-12 01:03:32999

9
HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999

10
成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999