宠物之家网站大学生网页制作教程 学生HTML静态宠物网页设计作业成品 DIV布局简单动物网页制作代码
生活随笔
收集整理的這篇文章主要介紹了
宠物之家网站大学生网页制作教程 学生HTML静态宠物网页设计作业成品 DIV布局简单动物网页制作代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
📂文章目錄
- 一、👨?🎓網站題目
- 二、??網站描述
- 三、📚網站介紹
- 四、💠網站演示
- 五、?? 網站代碼
- 🧱HTML結構代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多干貨
一、👨?🎓網站題目
🐕 寵物網頁設計 、🐼保護動物網頁、🐋鯨魚海豚主題、🐘保護大象、等網站的設計與制作。
二、??網站描述
🏷?HTML寵物網頁設計，采用DIV+CSS布局，共有多個頁面，排版整潔，內容豐富，主題鮮明，首頁使用CSS排版比較豐富，色彩鮮明有活力，導航與正文字體分別設置不同字號大小。導航區域設置了背景圖。子頁面有純文字頁面和圖文并茂頁面。
🏅 一套優質的💯網頁設計應該包含 (具體可根據個人要求而定)
三、📚網站介紹
📔網站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程序方面：計劃采用最新的網頁編程語言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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>寵物之家</title> <link href="css/public.css" rel="stylesheet" type="text/css" /> <link href="css/index.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="js/denglu.js"></script> </head><body> <!-----Header開始-------> <div class="Header"> <div class="top"> <a href="index.html"><img src="images/logo.jpg" /></a> </div> <!---nav開始----> <div class="daohang"> <div id="nav"> <ul> <li><a href="index.html">首頁</a></li> <li><a href="about.html">關于寵物</a></li> <li><a href="chongwu.html">寵物貓狗</a></li> <li><a href="news.html">寵物新聞</a></li> <li><a href="lianxi.html">聯系我們</a></li> <li><a href="denglu.html">會員登錄</a></li> <li><a href="zhuce.html">會員注冊</a></li> </ul> </div> </div> <!---nav結束----> <!-----banner-------> <div class="ban"><img src="images/ban.jpg" /></div> </div> <!-----Header結束-------><!-----main開始-------> <div class="main"> <div class="left"> <div class="title"> <p>Member login</p> <p>會員登錄</p> </div> <div class="denglu"> <div class="delk"> <div class="tit">歡迎會員登錄</div> <form method="post" action=""> <div class="one"> <label for="username">用戶名：</label> <input type="text" id="username" class="a1" /> </div> <div class="one"> <label for="passwowd">密碼：</label> <input type="password" id="password" class="a1" /> </div><div class="two"> <input type="submit" class="btn" id="send" value="提交" /> <input type="reset" class="btn" id="res" value="重置" /> </div> </form> </div> <img src="images/huys.png" /> </div> </div> <div class="right"> <div class="box1"> <div class="wen"> <a href="about.html"><h1>關于寵物</h1></a> <p>以前寵物只是單指人們為了消除孤寂或出于娛樂目的而豢養的動物。現今寵物定義為，出于非經濟目的而豢養的動植物。寵物是為了精神的目的而豢養的動植物。一般為了消除孤寂，或娛樂而豢養，以前的寵物一般是哺乳綱或鳥綱的動物，因為這些動物腦子比較發達，容易和人交流。如今，除了廣為人知的活體寵物外，還有諸多的虛擬寵物。 </p> </div> <img src="images/ri01.jpg" /> </div> <div class="box2"> <img src="images/ri02.jpg" /> <div class="wen"> <a href="chongwu.html"><h1>寵物貓狗</h1></a> <p>寵物是人類最忠實的朋友，他們會一生陪伴你，保護你，直至死去。狗是可塑性非常強的動物。通過科學合理的訓練，完全可以成為倍受歡迎的家庭成員。<p>寵物貓不是十分好動，同時不介意寵物冷落自己的孩子，因為貓經常都是喜歡獨處的。很多人都喜歡貓，特別是小女孩。貓的身體毛茸茸的，而且叫聲比較溫柔，所以養貓也是比較舒適的。</p> </p> </div> </div></div></div><!-----main結束-------> <!-----Footer開始-------> <div class="Footer"> <div class=" daoh"> Copyright @ 2000-2019 寵物之家 All Rights </div> <img src="images/logo.jpg" /> </div><!-----Footer結束-------> </body> </html>💒CSS樣式代碼
@charset "utf-8"; /* CSS Document */ .main{ width:1366px; height:590px; margin:0 auto; } .left{ width:380px; height:570px; float:left; margin-right:15px; } .left .title{ width:370px; padding-left:10px; height:76px; padding-top:20px; background:#f8f8f8; margin-bottom:5px; } .left .title p{ font-size:18px; color:#3c3c3c;} .denglu{width: 380px; height: 474px; background: #f8f8f8; margin-top: 20px;} .delk{width: 380px; height: 210px; padding-top:20px; } .tit{ height: 70px; width: 100%; text-align: center; line-height: 70px; font-size: 30px; font-weight: bolder; } .one{margin:10px 0} .one label{width:100px;float:left;text-align:right;height:20px;line-height:40px} .one input{border:1px solid #ccc;height:20px}.two{padding-left:100px} .reda{color:red}.a2{width:100px;margin-left:5px;padding:2px;background:#ccc} .error{background:#ccc url(../images/error.gif) no-repeat;padding-left:25px;padding-right:3px} .righta{background:#ccc url(../images/righta.gif) no-repeat;padding-left:25px;padding-right:3px} .btn{background: #ffb72f; width: 50px; border: none; padding: 3px; color: #fff;} .di span{ color:#00aaef} .right{ width:921px; padding:25px; height:540px; float:left; background:#f8f8f8} .right .box1{ width:921px; height:250px; } .right .box1 img{ width:440px; height:248px; float:right; margin-left:30px;} .box1 .wen{ width:450px; float:left;} .box1 h1{ color: #3c3c3c; font-size: 24px; width: 100%; margin-bottom:20px;} .box1 p{ display: block; font-size: 16px; width: 100%; line-height:27px; text-indent:2em; }.right .box2{ width:921px; height:257px; margin-top:30px;}.right .box2 img{ width:447px; height:253px; float:left; margin-right:30px;} .box2 .wen{ width:440px; float:left;} .box2 h1{ color: #3c3c3c; font-size: 24px; width: 100%; margin-bottom:20px;} .box2 p{ display: block; font-size: 16px; width: 100%; line-height:27px; text-indent:2em;}六、🥇 如何讓學習不再盲目
21年程序員總結給編程菜鳥的16條忠告
七、🎁更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻關注我| 💬獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.
以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻💬總結
以上是生活随笔為你收集整理的宠物之家网站大学生网页制作教程 学生HTML静态宠物网页设计作业成品 DIV布局简单动物网页制作代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php判断页面访问是移动端还是pc端
- 下一篇： 深入理解MySQL