时间：2023-07-24 21:45:02 | 来源：网站运营
时间：2023-07-24 21:45:02 来源：网站运营
web网页设计与开发____婚纱网站(5页 汉堡菜单 响应式)：> ⛵ 源码获取 文末联系 ✈Web前端开发技术 描述 网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | | HTML期末大学生网页设计作业，Web大学生网页
在线咨询
<!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>关键词：响应,设计
