🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍
三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

Z01JP 非物质文化遗产坝漆国漆 2页响应式

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html><head lang="zh-CN"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="keywords" content=""><meta name="description" content=""><meta name="author" content=""><title>index</title><!-- 引入bootstrap --><link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"><!-- 引入css --><link rel="stylesheet" href="css/animate.min.css" type="text/css"><link rel="stylesheet" href="css/style.css" type="text/css"></head><body><!-- 页面开始 --><nav id="mainNav" class="navbar navbar-default navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navMenu"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand page-scroll animated swing" href="#page-top">坝漆<span>国漆</span></a></div><div class="collapse navbar-collapse" id="navMenu"><ul class="nav navbar-nav navbar-right"><li><a class="page-scroll" href="">首页</a></li><li><a class="page-scroll" href="#about">大师传承</a></li><li><a class="page-scroll" href="#portfolio">国漆产品</a></li><li><a class="page-scroll" href="#contact">联系我们</a></li><li><a class="page-scroll" href="login.html">更多展示</a></li></ul></div></div></nav><!-- 标题结束 --><!-- 头部开始 --><header id="page-top"><div class="header-content"><div class="header-content-inner fadeInDown wow"><h2>坝漆产品展示</h2><p>指产于湖北省恩施自治州的天然生漆，现在主要有利川毛坝坝漆和咸丰小村坝漆</p><a href="#about" class="btn btn-primary btn-lg page-scroll">about</a></div></div></header><!-- 头部结束 --><!-- 关于开始 --><section id="about"><div class="container"><div class="row"><div class="col-lg-8 col-lg-offset-2 text-center fadeInLeft wow"><h2 class="section-heading">大师传承</h2><hr><p>环保健康入木三分，手工工艺，大师传承复兴非遗坝漆文化，助力恩施乡村旅游</p><p>好漆似清油，照见美人头，摇起虎斑色，提起钓鱼头。</p><a href="#portfolio" class="btn btn-primary page-scroll wow tada">portfolio</a></div></div></div></section><!-- 关于结束 --><!-- 人生如戏开始 --><section id="portfolio" class="bg-gray no-padding-bottom"><div class="container"><div class="row"><div class="col-lg-12 text-center"><h2 class="section-heading">国漆产品</h2><hr></div></div></div><div class="container"><div class="row"><div class="col-lg-3 col-md-6 text-center"><div class="service-box"><!-- <i class="icon-tr wow bounceIn text-primary"></i> --><img src="picture/2.jpg" alt=""><h3 class="wow fadeInUp">自然环保</h3><p class="text-muted wow fadeInUp">无需华丽的辞藻，一声问候，一句调侃，一个笑话，足矣淡定心安</p></div></div><div class="col-lg-3 col-md-6 text-center"><div class="service-box"><img src="picture/3.jpg" alt=""><h3 class="wow fadeInUp">底蕴深厚</h3><p class="text-muted wow fadeInUp">周恩来总理曾经这样赞誉利川毛坝的生漆：“坝漆清如油，照见美人头，摇动琥珀色，提起钓鱼钩。</p></div></div><div class="col-lg-3 col-md-6 text-center"><div class="service-box"><img src="picture/4.jpg" alt=""><h3 class="wow fadeInUp">非遗</h3><p class="text-muted wow fadeInUp">坝漆历史悠久，最早记载见于清初的1684年。据史料记载，清代改土归流时，现在的利川市毛坝乡隶属于当时的咸丰唐崖土司</p></div></div><div class="col-lg-3 col-md-6 text-center"><div class="service-box"><img src="picture/5.jpg" alt=""><h3 class="wow fadeInUp">恩施坝漆</h3><p class="text-muted wow fadeInUp">1952年，中华人民共和国政务院授予“咸丰坝漆名冠全球”的锦旗一面，咸丰成为“全国生漆生产基地县”</p></div></div></div></div></section><section class="no-padding"><aside class="bg-gray"><div class="container text-center"><div class="call-to-action"><p class="wow fadeInUp text-muted">坝漆又称国漆，指产于湖北省恩施自治州的天然生漆，现在主要有利川毛坝坝漆和咸丰小村坝漆。</p><a class="btn btn-primary wow tada">register</a></div></div></aside></section><!-- 人生如戏结束 --><!-- strat contact 开始--><section id="contact"><div class="container"><div class="row"><div class="col-lg-8 col-lg-offset-2 text-center"><h2 class="section-heading">联系我们</h2></div></div></div></section><!-- end contact 结束--><section class="page-signup fadeInRight animated"><div class="signin-header"><div class="logo text-center"><a href="#">联系我们</a></div></div><!-- 注册开始 --><div class="signup-body"><div class="container"><div class="form-container"><!-- frome表单开始 --><form class="form-horizontal text-center"><div class="form-group"><span class="glyphicon glyphicon-user"></span><input type="text" class="form-control input-lg text-center" placeholder="用户名"></div><div class="form-group"><span class="glyphicon glyphicon-envelope"></span><input type="email" class="form-control input-lg text-center" placeholder="Email"></div><div class="form-group"><span class="glyphicon glyphicon-lock"></span><input type="password" class="form-control input-lg text-center" placeholder="留言"></div><div class="form-group"><a href="#" class="btn btn-primary btn-block btn-lg">确认</a></div></form><!-- frome结束 --><section><p class="text-center text-muted">上传您的观点，让我们做更好的改进</p></section></div></div></div><!-- 注册结束 --></section><!-- 底部开始 --><footer class="bg-footer"><div class="container"><div class="row"><div class="col-lg-12 text-center"><p>坝漆</p></div></div></div></footer><!-- 底部结束 --></body></html>

🏠CSS样式代码

html,
body {width: 100%;height: 100%;
}.icon-wechart {display: block;width: 120px;height: 120px;margin: 0 auto;background-image: url(http://www.ylcp.shop/files/files/1653379456693/img/wechart_icon.png);background-position: center;background-size: cover;
}/** footer end**//**start login and register**/.page-signin .signin-header,
.page-signup .signin-header,
.page-forgot .signin-header {margin-top: 50px;
}@media (min-width: 768px) {.page-signin .signin-header,.page-signup .signin-header,.page-forgot .signin-header {margin-top: 150px;}
}.page-signin .logo,
.page-signup .logo,
.page-forgot .logo {font-size: 26px;font-weight: normal;text-transform: uppercase;
}.page-signin .logo a:hover,
.page-signup .logo a:hover,
.page-forgot .logo a:hover {text-decoration: none;
}.page-signin .logo a:focus,
.page-signup .logo a:focus,
.page-forgot .logo a:focus {text-decoration: none;
}.page-signin .info,
.page-signup .info,
.page-forgot .info {max-width: 420px;margin: 0 auto 20px;padding: 20px 0 0;
}.page-signin .info h2,
.page-signup .info h2,
.page-forgot .info h2 {font-size: 18px;color: #242633;
}.page-signin .signin-body,
.page-signin .signup-body,
.page-signup .signin-body,
.page-signup .signup-body,
.page-forgot .signin-body,
.page-forgot .signup-body {padding: 20px 10px;
}.page-signin .form-container,
.page-signup .form-container,
.page-forgot .form-container {max-width: 420px;margin: 10px auto;
}.page-signin .form-group,
.page-signup .form-group,
.page-forgot .form-group {position: relative;
}.page-signin .form-group>.glyphicon,
.page-signup .form-group>.glyphicon,
.page-forgot .form-group>.glyphicon {position: absolute;top: 16px;left: 12px;color: #aaa;
}.page-signin .form-group .input-lg,
.page-signin .form-group .input-group-lg>.form-control,
.page-signin .form-group .input-group-lg>.input-group-addon,
.page-signin .form-group .input-group-lg>.input-group-btn>.btn,
.page-signup .form-group .input-lg,
.page-signup .form-group .input-group-lg>.form-control,
.page-signup .form-group .input-group-lg>.input-group-addon,
.page-signup .form-group .input-group-lg>.input-group-btn>.btn,
.page-forgot .form-group .input-lg,
.page-forgot .form-group .input-group-lg>.form-control,
.page-forgot .form-group .input-group-lg>.input-group-addon,
.page-forgot .form-group .input-group-lg>.input-group-btn>.btn {padding: 10px 30px;
}section.page-signup a.btn,
section.page-signin a.btn {font-size: 18px;margin-top: 0;
}section.page-signin,
.page-signin section,
section.page-signup,
.page-signup section {padding: 0;
}section.page-signin p,
section.page-signup p {font-size: 14px;
}