時間:2023-07-24 21:45:02 | 來源:網(wǎng)站運(yùn)營
時間:2023-07-24 21:45:02 來源:網(wǎng)站運(yùn)營
web網(wǎng)頁設(shè)計與開發(fā)____婚紗網(wǎng)站(5頁 漢堡菜單 響應(yīng)式):?> ? 源碼獲取 文末聯(lián)系 ?Web前端開發(fā)技術(shù) 描述 網(wǎng)頁設(shè)計題材,DIV+CSS 布局制作,HTML+CSS網(wǎng)頁設(shè)計期末課程大作業(yè) | | HTML期末大學(xué)生網(wǎng)頁設(shè)計作業(yè),Web大學(xué)生網(wǎng)頁
<!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">關(guān)于我們</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">關(guān)于我們</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.內(nèi)容板塊 --> <div class="main"> <div class="main-c"> <!-- 3.1 婚紗禮服 --> <div class="wedding"> <!-- 標(biāo)題 --> <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>傳世之作,經(jīng)典重現(xiàn)</h4> <p>蒂芙尼傾情呈現(xiàn)“斑斕之境”(The Extraordinary Colors of Tiffany)古董珍藏庫系列作品,以此紀(jì)念品牌在彩色寶石和稀有寶石領(lǐng)域的成就,并完美呈現(xiàn)蒂芙尼的至臻匠心工藝與奇異寶石的瑰麗之美。</p> </div> </li> <li class="nav-item"> <img src="picture/jewelry2.jpg" alt=""> <div class="mask"> <h4>傳世之作,經(jīng)典重現(xiàn)</h4> <p>蒂芙尼傾情呈現(xiàn)“斑斕之境”(The Extraordinary Colors of Tiffany)古董珍藏庫系列作品,以此紀(jì)念品牌在彩色寶石和稀有寶石領(lǐng)域的成就,并完美呈現(xiàn)蒂芙尼的至臻匠心工藝與奇異寶石的瑰麗之美。</p> </div> </li> <li class="nav-item"> <img src="picture/jewelry.jpg" alt=""> <div class="mask"> <h4>傳世之作,經(jīng)典重現(xiàn)</h4> <p>蒂芙尼傾情呈現(xiàn)“斑斕之境”(The Extraordinary Colors of Tiffany)古董珍藏庫系列作品,以此紀(jì)念品牌在彩色寶石和稀有寶石領(lǐng)域的成就,并完美呈現(xiàn)蒂芙尼的至臻匠心工藝與奇異寶石的瑰麗之美。</p> </div> </li> <li class="nav-item"> <img src="picture/jewelry4.jpg" alt=""> <div class="mask"> <h4>傳世之作,經(jīng)典重現(xiàn)</h4> <p>蒂芙尼傾情呈現(xiàn)“斑斕之境”(The Extraordinary Colors of Tiffany)古董珍藏庫系列作品,以此紀(jì)念品牌在彩色寶石和稀有寶石領(lǐng)域的成就,并完美呈現(xiàn)蒂芙尼的至臻匠心工藝與奇異寶石的瑰麗之美。</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>新品發(fā)布會</h4> <p>伴隨著T臺兩側(cè)色彩趨勢報告的發(fā)布, VERONICA2021婚紗新品發(fā)布會正在準(zhǔn)備進(jìn)行中</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>圣誕高級定制發(fā)布會</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>夏季新品發(fā)布會</h4> <p>“我非常欣賞并且熱愛美國。因?yàn)? 這里是我獲得成功的地方。也許你什么都沒有</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>新品發(fā)布會</h4> <p>伴隨著T臺兩側(cè)色彩趨勢報告的發(fā)布, VERONICA2021婚紗新品發(fā)布會正在準(zhǔn)備進(jìn)行中</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>新品發(fā)布會</h4> <p>伴隨著T臺兩側(cè)色彩趨勢報告的發(fā)布, VERONICA2021婚紗新品發(fā)布會正在準(zhǔn)備進(jìn)行中</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>圣誕高級定制發(fā)布會</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>新品發(fā)布會</h4> <p>伴隨著T臺兩側(cè)色彩趨勢報告的發(fā)布, VERONICA2021婚紗新品發(fā)布會正在準(zhǔn)備進(jìn)行中</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>夏季新品發(fā)布會</h4> <p>“我非常欣賞并且熱愛美國。因?yàn)? 這里是我獲得成功的地方。也許你什么都沒有</p> <a href="#">more <span>></span></a> </div> </div> </div> </div> <div class="more"> <a href="#">MORE</a> </div> </div> </div> <!-- 3.4 設(shè)計師 --> <div class="designers"> <div class="designers-c"> <div class="title"> <h3>設(shè)計師</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>首席設(shè)計師</span> <p>法國時裝設(shè)計師,VERONICA品牌創(chuàng)始人之一,設(shè)計總監(jiān),2016福布斯最具影響力的設(shè)計師,最受歡迎設(shè)計大師,確實(shí)非常厲害的;</p> <a href="#"> MORE</a> </div> </li> <li class="nav-item"> <img src="picture/designers2.png" alt=""> <div class="text"> <h3>顏澈</h3> <span>資深設(shè)計師</span> <p>法國時裝設(shè)計師,設(shè)計界的“設(shè)計鬼才”從題材到表現(xiàn)方式都引起了極大 的福布斯中國最具潛力,每一個產(chǎn)品都是我們精...</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>運(yùn)營總監(jiān)</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>網(wǎng)站備案號:豫ICP備110121210號</p> <span>增值電信業(yè)務(wù)經(jīng)營許可證號:豫B2-20100033</span> </div> <div class="right"> <p> ? 2021 VERONICA </p> <a href="#"> 聯(lián)系我們 </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>
關(guān)鍵詞:響應(yīng),設(shè)計
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。