Web前端開發(fā)技術(shù) 描述 網(wǎng)頁設(shè)計題材,DIV+CSS 布局制作,HTML+CSS網(wǎng)頁設(shè)計期末課程大作業(yè) | | HTML期末大學(xué)生網(wǎng)頁設(shè)計作業(yè),Web大學(xué)" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > web網(wǎng)頁設(shè)計與開發(fā)____婚紗網(wǎng)站(5頁 漢堡菜單 響應(yīng)式)

web網(wǎng)頁設(shè)計與開發(fā)____婚紗網(wǎng)站(5頁 漢堡菜單 響應(yīng)式)

時間: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)頁
  1. HTML:結(jié)構(gòu)
  2. CSS:樣式 在操作方面上運(yùn)用了html5和css3, 采用了div+css結(jié)構(gòu)、表單、超鏈接、浮動、絕對定位、相對定位、字體樣式、引用視頻等基礎(chǔ)知識
  3. JavaScript:做與用戶的交互行為
@TOC


前端學(xué)習(xí)路線

(1)html文件:其中index.html是首頁、其他html為二級頁面; (2)css文件:css全部頁面樣式,文字滾動, 圖片放大等; (3)js文件:js實(shí)現(xiàn)動態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等(網(wǎng)頁中運(yùn)用到j(luò)s代碼)

網(wǎng)頁基本結(jié)構(gòu)

(1)首頁:進(jìn)入網(wǎng)頁中看到的第一個頁面(LOGO、公司名稱、導(dǎo)航、banner、新聞、相關(guān)信息、底部信息、banner一般是5個   (2)二級頁面:從首頁點(diǎn)擊進(jìn)入之后的頁面叫做二級頁面 (3)三級頁面:從二級頁面點(diǎn)擊進(jìn)入的頁面

網(wǎng)頁html:網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素,是承載各種網(wǎng)站應(yīng)用的平臺。通俗地說,網(wǎng)站就是由網(wǎng)頁組成的 首頁網(wǎng)站:首頁是一個網(wǎng)站的入口網(wǎng)頁,故往往會被編輯得易于了解該網(wǎng)站多數(shù)作為首頁的文件名是index加上擴(kuò)展名 導(dǎo)航菜單:是指位于頁面頂部或者側(cè)邊區(qū)域的,也稱之為導(dǎo)航欄,它起著鏈接站點(diǎn)或者軟件內(nèi)的各個頁面的作用. 網(wǎng)頁頁腳:是網(wǎng)頁中每個頁面的底部的區(qū)域。常用于顯示附加信息。如作者、備案號等。


網(wǎng)頁演示




在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述



HTML結(jié)構(gòu)代碼

<!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>

學(xué)的反而越迷茫

有這種感覺很正常,因?yàn)槟氵€沒有真正去公司里面待過,也不清楚自己到底要學(xué)多少東西才能勝任公司里面給你分配的活。我從你的表述來看,你的基礎(chǔ)應(yīng)該還是很扎實(shí)的。跟著網(wǎng)上那種全套的視頻教程學(xué)肯定沒有問題。

當(dāng)你以后真正進(jìn)入公司,發(fā)現(xiàn)工作的難度和量大約只有你學(xué)習(xí)時期的大約20%,你可能就會發(fā)出一聲嘆息:原來工作也不過如此嘛。

這是很正常的,因?yàn)榇蟛糠止臼钦心氵M(jìn)去去干活的,寫業(yè)務(wù)的,不是讓你一個新人去研發(fā)公司架構(gòu)的。都是現(xiàn)成的東西,你要做的就是在別人的教導(dǎo)下,手把手的指揮下去添磚加瓦。到時候你恐怕要驚呼:就這?

所以,放松心態(tài)吧,好好享受大學(xué)時光 —————————————————


學(xué)習(xí)更多

關(guān)注我 | 點(diǎn)贊博文 | 每天帶你漲知識





在這里插入圖片描述


關(guān)鍵詞:響應(yīng),設(shè)計

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉