宠物之家网站大学生网页制作教程 学生HTML静态宠物网页设计作业成品 DIV布局简单动物网页制作代码
📂文章目錄
- 一、👨?🎓網(wǎng)站題目
- 二、??網(wǎng)站描述
- 三、📚網(wǎng)站介紹
- 四、💠網(wǎng)站演示
- 五、?? 網(wǎng)站代碼
- 🧱HTML結(jié)構(gòu)代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學(xué)習(xí)不再盲目
- 七、🎁更多干貨
一、👨?🎓網(wǎng)站題目
🐕 寵物網(wǎng)頁(yè)設(shè)計(jì) 、🐼保護(hù)動(dòng)物網(wǎng)頁(yè)、🐋鯨魚海豚主題、🐘保護(hù)大象、等網(wǎng)站的設(shè)計(jì)與制作。
二、??網(wǎng)站描述
🏷?HTML寵物網(wǎng)頁(yè)設(shè)計(jì)，采用DIV+CSS布局，共有多個(gè)頁(yè)面，排版整潔，內(nèi)容豐富，主題鮮明，首頁(yè)使用CSS排版比較豐富，色彩鮮明有活力，導(dǎo)航與正文字體分別設(shè)置不同字號(hào)大小。導(dǎo)航區(qū)域設(shè)置了背景圖。子頁(yè)面有純文字頁(yè)面和圖文并茂頁(yè)面。
🏅 一套優(yōu)質(zhì)的💯網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該包含 (具體可根據(jù)個(gè)人要求而定)
三、📚網(wǎng)站介紹
📔網(wǎng)站布局方面：計(jì)劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動(dòng)網(wǎng)頁(yè)布局結(jié)構(gòu)。
📓網(wǎng)站程序方面：計(jì)劃采用最新的網(wǎng)頁(yè)編程語(yǔ)言HTML5+CSS3+JS程序語(yǔ)言完成網(wǎng)站的功能設(shè)計(jì)。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時(shí)看到網(wǎng)站的效果。
📘網(wǎng)站素材方面：計(jì)劃收集各大平臺(tái)好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁(yè)風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁(yè)尺寸的圖片。
📒網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁(yè)結(jié)構(gòu)文件、css網(wǎng)頁(yè)樣式文件、js網(wǎng)頁(yè)特效文件、images網(wǎng)頁(yè)圖片文件；
📙網(wǎng)頁(yè)編輯方面：網(wǎng)頁(yè)作品代碼簡(jiǎn)單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁(yè)、其他html為二級(jí)頁(yè)面；
（2）📑 css文件包含：css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等；
（3）📄 js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼）。
四、💠網(wǎng)站演示
五、?? 網(wǎng)站代碼
🧱HTML結(jié)構(gòu)代碼
<!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">首頁(yè)</a></li> <li><a href="about.html">關(guān)于寵物</a></li> <li><a href="chongwu.html">寵物貓狗</a></li> <li><a href="news.html">寵物新聞</a></li> <li><a href="lianxi.html">聯(lián)系我們</a></li> <li><a href="denglu.html">會(huì)員登錄</a></li> <li><a href="zhuce.html">會(huì)員注冊(cè)</a></li> </ul> </div> </div> <!---nav結(jié)束----> <!-----banner-------> <div class="ban"><img src="images/ban.jpg" /></div> </div> <!-----Header結(jié)束-------><!-----main開始-------> <div class="main"> <div class="left"> <div class="title"> <p>Member login</p> <p>會(huì)員登錄</p> </div> <div class="denglu"> <div class="delk"> <div class="tit">歡迎會(huì)員登錄</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>關(guān)于寵物</h1></a> <p>以前寵物只是單指人們?yōu)榱讼录呕虺鲇趭蕵纺康亩筐B(yǎng)的動(dòng)物?，F(xiàn)今寵物定義為，出于非經(jīng)濟(jì)目的而豢養(yǎng)的動(dòng)植物。寵物是為了精神的目的而豢養(yǎng)的動(dòng)植物。一般為了消除孤寂，或娛樂而豢養(yǎng)，以前的寵物一般是哺乳綱或鳥綱的動(dòng)物，因?yàn)檫@些動(dòng)物腦子比較發(fā)達(dá)，容易和人交流。如今，除了廣為人知的活體寵物外，還有諸多的虛擬寵物。 </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>寵物是人類最忠實(shí)的朋友，他們會(huì)一生陪伴你，保護(hù)你，直至死去。狗是可塑性非常強(qiáng)的動(dòng)物。通過科學(xué)合理的訓(xùn)練，完全可以成為倍受歡迎的家庭成員。<p>寵物貓不是十分好動(dòng)，同時(shí)不介意寵物冷落自己的孩子，因?yàn)樨埥?jīng)常都是喜歡獨(dú)處的。很多人都喜歡貓，特別是小女孩。貓的身體毛茸茸的，而且叫聲比較溫柔，所以養(yǎng)貓也是比較舒適的。</p> </p> </div> </div></div></div><!-----main結(jié)束-------> <!-----Footer開始-------> <div class="Footer"> <div class=" daoh"> Copyright @ 2000-2019 寵物之家 All Rights </div> <img src="images/logo.jpg" /> </div><!-----Footer結(jié)束-------> </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;}六、🥇 如何讓學(xué)習(xí)不再盲目
21年程序員總結(jié)給編程菜鳥的16條忠告
七、🎁更多干貨
1.如果我的博客對(duì)你有幫助、如果你喜歡我的博客內(nèi)容，請(qǐng) “👍點(diǎn)贊” “??評(píng)論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻關(guān)注我| 💬獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！
3.
以上內(nèi)容技術(shù)相關(guān)問題💌歡迎一起交流學(xué)習(xí)👇🏻👇🏻👇🏻💬總結(jié)
以上是生活随笔為你收集整理的宠物之家网站大学生网页制作教程 学生HTML静态宠物网页设计作业成品 DIV布局简单动物网页制作代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php判断页面访问是移动端还是pc端
- 下一篇： 前端工程师的摸鱼日常（11）