📂文章目录
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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.视频演示
Q52JP 婚纱网站 5页 带js 汉堡菜单 响应式
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style4.css">
<link rel="stylesheet" href="css/style-m4.css">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/swiper-3.4.2.min.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div class="content">
<!-- 1.头部开始 -->
<div class="header">
<div class="header-c PC">
<a href="#" class="logo">
<img src="picture/logo-1.png" alt="" class="logo1">
<img src="picture/logo-2.png" alt="" class="logo2">
</a>
<ul class="nav">
<li class="nav-item active">
<a href="#">首页</a>
</li>
<li class="nav-item">
<a href="index1.html">婚纱礼服</a>
</li>
<li class="nav-item">
<a href="index2.html">珠宝配饰</a>
<span class="line"></span>
</li>
<li class="nav-item">
<a href="index3.html">最新活动</a>
</li>
<li class="nav-item">
<a href="index4.html">关于我们</a>
</li>
</ul>
</div>
</div>
<div class="header header-m">
<div class="header-c">
<a href="#" class="logo">
<img src="picture/logo-1.png" alt="" class="logo1">
<img src="picture/logo-2.png" alt="" class="logo2">
</a>
<div class="btn icon-caidan"></div>
<ul class="nav">
<li class="nav-item active">
<a href="#">首页</a>
</li>
<li class="nav-item">
<a href="index1.html">婚纱礼服</a>
</li>
<li class="nav-item">
<a href="index2.html">珠宝配饰</a>
<span class="line"></span>
</li>
<li class="nav-item">
<a href="index4.html">最新活动</a>
</li>
<li class="nav-item">
<a href="index4.html">关于我们</a>
</li>
</ul>
</div>
</div>
<div class="containner">
<!-- 2.banner -->
<div class="banner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="picture/banner11.jpg" alt="" class="logo">
</div>
<div class="swiper-slide">
<img src="picture/banner2.jpg" alt="">
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<!-- 3.内容板块 -->
<div class="main">
<div class="main-c">
<!-- 3.1 婚纱礼服 -->
<div class="wedding">
<!-- 标题 -->
<div class="title">
<h3>婚纱礼服</h3>
<span class="eng">Wedding Dress</span>
</div>
<!-- 轮播 -->
<div class="swiper-contai">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="picture/wedding2.jpg" alt="" class="logo">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<div class="swiper-slide">
<img src="picture/WeddingDress-2.jpg" alt="">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<div class="swiper-slide">
<img src="picture/WeddingDress-3.jpg" alt="">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<div class="swiper-slide">
<img src="picture/WeddingDress-4.jpg" alt="">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<div class="swiper-slide">
<img src="picture/wedding2.jpg" alt="" class="logo">
</div>
<div class="swiper-slide">
<img src="picture/WeddingDress-2.jpg" alt="">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<div class="swiper-slide">
<img src="picture/WeddingDress-3.jpg" alt="">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<div class="swiper-slide">
<img src="picture/WeddingDress-4.jpg" alt="">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<div class="swiper-slide">
<img src="picture/wedding2.jpg" alt="">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<div class="swiper-slide">
<img src="picture/WeddingDress-2.jpg" alt="">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<div class="swiper-slide">
<img src="picture/WeddingDress-3.jpg" alt="">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<div class="swiper-slide">
<img src="picture/WeddingDress-4.jpg" alt="">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<div class="swiper-slide">
<img src="picture/wedding2.jpg" alt="" class="logo">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<div class="swiper-slide">
<img src="picture/WeddingDress-2.jpg" alt="">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<div class="swiper-slide">
<img src="picture/WeddingDress-3.jpg" alt="">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<div class="swiper-slide">
<img src="picture/WeddingDress-4.jpg" alt="">
<div class="mask">
<h3>HER STYLE / 一字肩拖尾主纱</h3>
<p>$5389.00</p>
<p>白色 / M / VK2531</p>
</div>
</div>
<!-- Add Pagination -->
</div>
<div class="swiper-pagination"></div>
</div>
<!-- 轮播---M端 -->
<div class="swiper-contai swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="picture/wedding2.jpg" alt="">
<img src="picture/WeddingDress-2.jpg" alt="">
<img src="picture/WeddingDress-3.jpg" alt="">
<img src="picture/WeddingDress-4.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="picture/wedding2.jpg" alt="">
<img src="picture/WeddingDress-2.jpg" alt="">
<img src="picture/WeddingDress-3.jpg" alt="">
<img src="picture/WeddingDress-4.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="picture/wedding2.jpg" alt="">
<img src="picture/WeddingDress-2.jpg" alt="">
<img src="picture/WeddingDress-3.jpg" alt="">
<img src="picture/WeddingDress-4.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="picture/wedding2.jpg" alt="" class="logo">
<img src="picture/WeddingDress-2.jpg" alt="">
<img src="picture/WeddingDress-3.jpg" alt="">
<img src="picture/WeddingDress-4.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- 更多 -->
<div class="more">
<a href="#">MORE</a>
</div>
</div>
</div>
<!--3.2 珠宝 -->
<div class="jewelry">
<div class="jewelry-c">
<div class="title">
<h3>珠宝配饰</h3>
<span class="eng">Jewelry Show</span>
</div>
<ul class="nav">
<li class="nav-item">
<img src="picture/jewelry1.jpg" alt="">
<div class="mask">
<h4>传世之作，经典重现</h4>
<p>蒂芙尼倾情呈现“斑斓之境”（The Extraordinary Colors of
Tiffany）古董珍藏库系列作品，以此纪念品牌在彩色宝石和稀有宝石领域的成就，并完美呈现蒂芙尼的至臻匠心工艺与奇异宝石的瑰丽之美。</p>
</div>
</li>
<li class="nav-item">
<img src="picture/jewelry2.jpg" alt="">
<div class="mask">
<h4>传世之作，经典重现</h4>
<p>蒂芙尼倾情呈现“斑斓之境”（The Extraordinary Colors of
Tiffany）古董珍藏库系列作品，以此纪念品牌在彩色宝石和稀有宝石领域的成就，并完美呈现蒂芙尼的至臻匠心工艺与奇异宝石的瑰丽之美。</p>
</div>
</li>
<li class="nav-item">
<img src="picture/jewelry.jpg" alt="">
<div class="mask">
<h4>传世之作，经典重现</h4>
<p>蒂芙尼倾情呈现“斑斓之境”（The Extraordinary Colors of
Tiffany）古董珍藏库系列作品，以此纪念品牌在彩色宝石和稀有宝石领域的成就，并完美呈现蒂芙尼的至臻匠心工艺与奇异宝石的瑰丽之美。</p>
</div>
</li>
<li class="nav-item">
<img src="picture/jewelry4.jpg" alt="">
<div class="mask">
<h4>传世之作，经典重现</h4>
<p>蒂芙尼倾情呈现“斑斓之境”（The Extraordinary Colors of
Tiffany）古董珍藏库系列作品，以此纪念品牌在彩色宝石和稀有宝石领域的成就，并完美呈现蒂芙尼的至臻匠心工艺与奇异宝石的瑰丽之美。</p>
</div>
</li>
</ul>
<div class="more">
<a href="#">MORE</a>
</div>
</div>
</div>
<!-- 3.3 最新活动 -->
<div class="activvities">
<div class="activvities-c">
<div class="title">
<h3>最新活动</h3>
<span class="eng">Latest Activities</span>
</div>
<ul class="nav">
<li class="nav-item">
<img src="picture/activities-1.jpg" alt="">
<div class="border"></div>
<div class="mask">
<h3>06-18 <span>2021</span>
</h3>
<h4>新品发布会</h4>
<p>伴随着T台两侧色彩趋势报告的发布， VERONICA2021婚纱新品发布会正在准备进行中</p>
<a href="#">more <span>></span></a>
</div>
</li>
<li class="nav-item">
<img src="picture/wedding2.jpg" alt="">
<div class="border"></div>
<div class="mask">
<h3>12-24 <span>2021</span>
</h3>
<h4>圣诞高级定制发布会</h4>
<p>《金字塔铭文》中有这样的话：“天空
把自己的光芒伸向你，以便你可以去到任何</p>
<a href="#">more <span>></span></a>
</div>
</li>
<li class="nav-item">
<img src="picture/WeddingDress-3.jpg" alt="">
<div class="border"></div>
<div class="mask">
<h3>06-21 <span>2021</span>
</h3>
<h4>夏季新品发布会</h4>
<p>“我非常欣赏并且热爱美国。因为
这里是我获得成功的地方。也许你什么都没有</p>
<a href="#">more <span>></span></a>
</div>
</li>
<li class="nav-item">
<img src="picture/WeddingDress-6.jpg" alt="">
<div class="border"></div>
<div class="mask">
<h3>06-18 <span>2021</span>
</h3>
<h4>新品发布会</h4>
<p>伴随着T台两侧色彩趋势报告的发布， VERONICA2021婚纱新品发布会正在准备进行中</p>
<a href="#">more <span>></span></a>
</div>
</li>
</ul>
<!-- Swiper -->
<div class="swiper-about">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="picture/activities-1.jpg" alt="">
<div class="mask">
<h3>06-18 <span>2021</span>
</h3>
<h4>新品发布会</h4>
<p>伴随着T台两侧色彩趋势报告的发布， VERONICA2021婚纱新品发布会正在准备进行中</p>
<a href="#">more <span>></span></a>
</div>
</div>
<div class="swiper-slide">
<img src="picture/wedding2.jpg" alt="">
<div class="mask">
<h3>12-24 <span>2021</span>
</h3>
<h4>圣诞高级定制发布会</h4>
<p>《金字塔铭文》中有这样的话：“天空
把自己的光芒伸向你，以便你可以去到任何</p>
<a href="#">more <span>></span></a>
</div>
</div>
<div class="swiper-slide">
<img src="picture/WeddingDress-6.jpg" alt="">
<div class="mask">
<h3>06-18 <span>2021</span>
</h3>
<h4>新品发布会</h4>
<p>伴随着T台两侧色彩趋势报告的发布， VERONICA2021婚纱新品发布会正在准备进行中</p>
<a href="#">more <span>></span></a>
</div>
</div>
<div class="swiper-slide">
<img src="picture/WeddingDress-3.jpg" alt="">
<div class="mask">
<h3>06-21 <span>2021</span>
</h3>
<h4>夏季新品发布会</h4>
<p>“我非常欣赏并且热爱美国。因为
这里是我获得成功的地方。也许你什么都没有</p>
<a href="#">more <span>></span></a>
</div>
</div>
</div>
</div>
<div class="more">
<a href="#">MORE</a>
</div>
</div>
</div>
<!-- 3.4 设计师 -->
<div class="designers">
<div class="designers-c">
<div class="title">
<h3>设计师</h3>
<span class="eng">Designers</span>
</div>
<ui class="nav">
<li class="nav-item">
<img src="picture/sign1jpg.jpg" alt="">
<div class="text">
<h3>Jason . W</h3>
<span>首席设计师</span>
<p>法国时装设计师，VERONICA品牌创始人之一，设计总监，2016福布斯最具影响力的设计师,最受欢迎设计大师,确实非常厉害的;</p>
<a href="#"> MORE</a>
</div>
</li>
<li class="nav-item">
<img src="picture/designers2.png" alt="">
<div class="text">
<h3>颜澈</h3>
<span>资深设计师</span>
<p>法国时装设计师，设计界的“设计鬼才”从题材到表现方式都引起了极大
的福布斯中国最具潜力，每一个产品都是我们精...</p>
<a href="#"> MORE</a>
</div>
</li>
<li class="nav-item">
<img src="picture/designers3.png" alt="">
<div class="text">
<h3>Katherine .J </h3>
<span>运营总监</span>
<p>The world's leading electronic design journal
NEWWEBPICK recommended the designer electronic design journal </p>
<a href="#"> MORE</a>
</div>
</li>
</ui>
</div>
</div>
<!-- 4.底部 -->
<div class="footer">
<div class="footer-c">
<div class="left">
<p>网站备案号：豫ICP备110121210号</p>
<span>增值电信业务经营许可证号：豫B2-20100033</span>
</div>
<div class="right">
<p>
© 2021 VERONICA
</p>
<a href="#">
联系我们
</a>
<a href="#">
加入我们
</a>
</div>
</div>
</div>
<!-- 5.广告跟随 -->
<div class="toup" id="advance">
<a href="#" class="animated bounceIn"></a>
<a href="#" class="animated bounceIn"></a>
</div>
</div>
</div>
<script src="js/swiper.min.js"></script>
<script src="js/main4.js"></script>
</div></body>
</html>
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
