web课程设计网页规划与设计：HTML+CSS美妆设计题材——雅诗兰黛(5页)
生活随笔
收集整理的這篇文章主要介紹了
web课程设计网页规划与设计：HTML+CSS美妆设计题材——雅诗兰黛(5页)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
🎉精彩專欄推薦 💭文末獲取聯系
?? 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術博主
💂 作者主頁: 【主頁——🚀獲取更多優質源碼】
🎓 web前端期末大作業： 【📚畢設項目精品實戰案例 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (110套) 】
🌎超炫酷的Echarts大屏可視化源碼：【🔰 Echarts大屏展示大數據平臺可視化(150套) 】
🔖 HTML+CSS+JS實例代碼： 【🗂?HTML+CSS+JS實例代碼 (炫酷特效網頁代碼) 繼續更新中…】
🎁 免費且實用的WEB前端學習指南： 【📂web前端零基礎到高級學習視頻教程 120G干貨分享】
🥇 關于作者: 💬歷任研發工程師，技術組長，教學總監；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 💪堅持原創，熱衷分享，初心未改，繼往開來！
📂文章目錄
- 一、👨?🎓網站題目
- 二、??網站描述
- 三、📚網站介紹
- 四、🌐網站演示
- 五、?? 網站代碼
- 🧱HTML結構代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多干貨
一、👨?🎓網站題目
💄美妝介紹、👜美妝分享、👒 品牌化妝品官網網站 、等網站的設計與制作。
二、??網站描述
🏷? 網頁中包含：Div+CSS、鼠標滑過特效、Table、導航欄效果、banner、表單、二級三級頁面等，視頻音頻元素，同時設計了logo（源文件），基本期末作業所需的知識點全覆蓋。
🏅 一套優質的💯網頁設計應該包含 (具體可根據個人要求而定)
三、📚網站介紹
📔網站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程序方面：計劃采用最新的網頁編程語言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代碼）。
四、🌐網站演示
五、?? 網站代碼
🧱HTML結構代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="css/all.css" rel="stylesheet" media="all" type="text/css" /> <link rel="stylesheet" href="./css/new.css"> <title>雅詩蘭黛</title> </head> <script type="text/javascript">window.onload = function(){function $(param){if(arguments[1] == true){return document.querySelectorAll(param);}else{return document.querySelector(param);}}var $box = $(".box1");var $box1 = $(".box-1 ul li",true);var $box2 = $(".box-2 ul");var $box3 = $(".box-3");var $length = $box1.length;var str = "";for(var i =0;i<$length;i++){if(i==0){str +="<li class='on'>"+(i+1)+"</li>";}else{str += "<li>"+(i+1)+"</li>";}}$box2.innerHTML = str;var current = 0;var timer;timer = setInterval(go,1000);function go(){for(var j =0;j<$length;j++){$box1[j].style.display = "none";$box2.children[j].className = "";}if($length == current){current = 0;}$box1[current].style.display = "block";$box2.children[current].className = "on";current++;}for(var k=0;k<$length;k++){$box1[k].onmouseover = function(){clearInterval(timer);}$box1[k].onmouseout = function(){timer = setInterval(go,1000);}}for(var p=0;p<$box3.children.length;p++){$box3.children[p].onmouseover = function(){clearInterval(timer);};$box3.children[p].onmouseout = function(){timer = setInterval(go,1000);}}for(var u =0;u<$length;u++){$box2.children[u].index = u;$box2.children[u].onmouseover = function(){clearInterval(timer);for(var j=0;j<$length;j++){$box1[j].style.display = "none";$box2.children[j].className = "";}this.className = "on";$box1[this.index].style.display = "block";current = this.index +1;}$box2.children[u].onmouseout = function(){timer = setInterval(go,1000);}}$box3.children[0].onclick = function(){back();}$box3.children[1].onclick = function(){go();}function back(){for(var j =0;j<$length;j++){$box1[j].style.display = "none";$box2.children[j].className = "";}if(current == 0){current = $length;}$box1[current-1].style.display = "block";$box2.children[current-1].className = "on";current--;}} </script> <body> <header class="logo"> <img src="images/logo.jpg" width="100" /> </header> <nav class="menu"><ul class="center"><li><a href="index.html">首頁</a></li><li><a href="product.html">所有商品</a></li><li><a href="about.html">關于我們</a></li><li><a href="contact.html">聯系我們</a></li></ul> </nav> <div class="box1 banner"><div class="box-1"><ul><li><img src="img/新建文件夾 (2)/口紅.jpg" ></img></li><li><img src="img/新建文件夾 (2)/小棕瓶.jpg"></img></li><li><img src="img/新建文件夾 (2)/粉底液.jpg"></img></li><li><img src="img/新建文件夾 (2)/精華.jpg" ></img></li><li><img src="img/新建文件夾 (2)/面霜.jpg" ></img></li></ul></div><div class="box-2"><ul></ul></div><div class="box-3"><span class="prev"> < </span><span class="next"> > </span></div> </div> <div class="content"><div class="box"><div class="bar"><h3>產品中心</h3></div><div class="list" style="clear:both"><ul><li> <a href="proinfo.html"><img src="images/1.jpg" ></a><p>紅石榴養膚潔顏油 </p></li><li> <a href="proinfo.html"><img src="images/2.jpg" ></a><p>鮮活亮采紅石榴二合一潔面乳 </p></li><li> <a href="proinfo.html"><img src="images/3.jpg" ></a><p>權杖唇霜 </p></li><li> <a href="proinfo.html"><img src="images/4.jpg" ></a><p>膠原霜(乳霜款) </p></li></ul></div><div class="clear"></div></div><div class="bar"><h3>公司介紹</h3></div><div class="box"><div class="pad" align="center"><div><p>雅詩蘭黛公司創立于1946年，技術先進，不斷創新，憑著其研發的各類精致優雅而又奢華的產品而享譽全球。<br>歷經廣泛的研究以及一貫嚴格的產品測試，她旗下的所有產品都秉承高水準的保證。</p><p>雅詩蘭黛產品在各大高檔購物中心以及專賣店有售點擊這里 <br>查找距離您最近的雅詩蘭黛專柜。 </p></div></div><div class="clear"></div></div> </div> <footer class="end"><p>網頁底部</p> </footer> </body> </html>💒CSS樣式代碼
@charset "utf-8"; /* CSS Document */ ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none} img{ max-width:100%} a{ text-decoration: none;} body{ width:1200px; background:#eee; margin:0px auto; line-height:21px} .clear{ clear:both} .menu li{ list-style:none}.logo{ background:#002563}.menu { background:#fff; width:100%; text-align:center; float:left; } .menu li a{ color:#000} .menu li { float:left; margin:2px; padding:15px 30px ; width:134px}.right{ float:right; width:660px; padding:20px} .left{ float:left; width:630px; padding:10px} .content { padding-bottom:20px;font-size:16px; line-height:26px; display:inline-block ; color:#111; width:100%} .box{ margin-top:20px; padding-bottom:10px; } .end{ clear:both; background:#002563; color:#fff; padding:10px 0; text-align:center;} .produce img{ margin:0 20px 20px 0} .produce { line-height:30px} .pad{ padding:20px; line-height:40px; display:block} .pad a{ color: #000;} .pad a:hover{ color: #E1353A;} .pics p{ margin:1px; text-align:center}.imglist{ width:100%; margin:0 auto} .imglist li{ float:left; width:46%; margin:2% ; text-align:center} .list{ margin:10px} .list li{ text-align:center; width:280px;font-size:12px; margin:40px 7px; float:left; } .list li p{ font-size: 18px; color: #000;}.list li img{ padding:2px; border:#ccc solid 1px; width: 90%;}.title{ text-align:center; color:#F00; padding:10px} .fl{ float:left} .js div{ width:100%; clear:both; margin-bottom:20px; float:left}.js div img{ float:left; margin-right:20px} .msg>div{ padding:10px 0} #submit2{ margin-top:30px; padding:10px; background:#993366; color:#fff; border:none; width:100%} .msg{ width:400px; margin:0 auto} .msg div span{ display:block;} .msg div input{ background:#a07ea6; padding:10px 0; width:100%; border:none;} .bar{ margin:0px ;background:#002563; clear:both; font-weight:bold; padding:5px 15px; color:#fff} .bar h3{ color:#fff; font-size:20px;} .bar a{ float:right; color:#fff}.le{ float:left; width:49%;} .ri{ float:right; width:49%;}.txt {line-height: 26px;font-size: 14px;color: #333;width:660px; float:right;margin-top:20px } .txt h2{ font-size:36px; line-height:50px ; font-weight:normal } form {width: 660px;float: right; margin-top:20px; } form p {margin: 10px 0;font-size: 16px;color: #333; } form .phone {width: 100%;height: 36px;padding: 0 10px;box-sizing: border-box;border: 1px solid #ccc; } form textarea {width: 100%;height: 100px; } form .but {background:#002563;border: none;color: #fff;margin: 20px 0;display: block;width: 200px;height: 36px; } .lx_pic {float: left;width: 460px;margin-top:20px; } .lx_pic img {width: 100%; } .newslist li{ border-bottom:#ccc dashed 1px; padding:10px}六、🥇 如何讓學習不再盲目
第一、帶著目標去學習，無論看書報課還是各種線下活動。
首先要明確自己的學習目標是什么，是想解決什么問題，實現怎樣的目標。
第二、學習要建立個人知識體系
知識是學不完的，書籍是浩如煙海的。我們盡情徜徉其中的時候，千萬不要被海水淹死，沒有自我了。在學習過程中，我們會發現每一個知識點都是有她的邊界和背景的，我們要善于歸納整理知識
第三、學到了就要用到
有時，我們一天下來感覺學到了很多干貨，那么我們一定要將這些知識點和實際工作和生活聯系起來。知識和實踐相互聯系靠攏。愛學習是一件好事，但只有會學習的人，才有價值。
七、🎁更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻關注我| 💬獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.
以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻💬總結
以上是生活随笔為你收集整理的web课程设计网页规划与设计：HTML+CSS美妆设计题材——雅诗兰黛(5页)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 94、基于51单片机的无线调频对讲机系统
- 下一篇： 放假在家/异地/无法使用学校局域网-如何