HTML网页设计：爱护动物题材——保护动物大象(6页) HTML网页设计结课作业 web课程设计网页规划与设计 网页设计成品DW静态网页
生活随笔
收集整理的這篇文章主要介紹了
HTML网页设计：爱护动物题材——保护动物大象(6页) HTML网页设计结课作业 web课程设计网页规划与设计 网页设计成品DW静态网页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
🎉精彩專欄推薦 💭文末獲取聯系
?? 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術博主
💂 作者主頁: 【主頁——🚀獲取更多優質源碼】
🎓 web前端期末大作業： 【📚畢設項目精品實戰案例 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (110套) 】
🌎超炫酷的Echarts大屏可視化源碼：【🔰 Echarts大屏展示大數據平臺可視化(150套) 】
🔖 HTML+CSS+JS實例代碼： 【🗂?HTML+CSS+JS實例代碼 (炫酷特效網頁代碼) 繼續更新中…】
🎁 免費且實用的WEB前端學習指南： 【📂web前端零基礎到高級學習視頻教程 120G干貨分享】
🥇 關于作者: 💬歷任研發工程師，技術組長，教學總監；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 💪堅持原創，熱衷分享，初心未改，繼往開來！
📂文章目錄
- 一、👨?🎓網站題目
- 二、??網站描述
- 三、📚網站介紹
- 四、💠網站演示
- 五、?? 網站代碼
- 🧱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=gb2312" /> <title>無標題文檔</title> <link rel="stylesheet" type="text/css" href="css/css.css" > </head><body><!-- Copyright ?2005. Spidersoft Ltd --> <style> A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none} A.applink {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none} A.info {color:#2F5BFF;background:transparent;text-decoration:none} A.info:hover {color:green;background:transparent;text-decoration:underline} </style> <!-- /Copyright ?2005. Spidersoft Ltd --> <center> <div id="page"> <div class="head"><img src="Images/banner.jpg" /></div> <div class="r_page"><div class="lunhuan"><script type="text/javascript" language="JavaScript">var widths=780; var w=2; var widthss=widths+w; var heights=180; var heightss=heightss+w; var heightt=20; var counts=2; img1=new Image();img1.src='Images/1.jpg'; url1=new Image();url1.src='#';img2=new Image();img2.src='Images/2.jpg'; url2=new Image();url2.src='#';var nn=1; //當前所顯示的滾動圖 var key=0; //標識是否為第一次開始執行 var tt; //標識作用function change_img() { if(key==0){key=1;} //如果第一次執行KEY=1，表示已經執行過一次了。 else if(document.all)//document.all僅IE6/7認識，firefox不會執行此段內容 { document.getElementById("pic").filters[0].Apply(); //將濾鏡應用到對像上 document.getElementById("pic").filters[0].Play(duration=2); //開始轉換 document.getElementById("pic").filters[0].Transition=23;//轉換效果 }eval('document.getElementById("pic").src=img'+nn+'.src'); //替換圖片 eval('document.getElementById("url").href=url'+nn+'.src'); //替換URL//替換ALTfor (var i=1;i<=counts;i++) {document.getElementById("xxjdjj"+i).className='axx'; } document.getElementById("xxjdjj"+nn).className='bxx'; //將當前頁面的ID設置為選中狀態 nn++; if(nn>counts){nn=1;} //如果ID大于總圖片數量。則從頭開始循環 tt=setTimeout('change_img()',4000); //在4秒后重新執行change_img()方法. } function changeimg(n)//點擊黑條上的鏈接執行的方法。 { nn=n; //當前頁面的ID等于傳入的N值, window.clearInterval(tt); //清除用于循環的TT //重新執行change_img();但change_img()內所調用的圖片ID已經在此處被修改,會從新ID處開始執行. change_img(); } //樣式表 document.write('<style>'); document.write('.axx{padding:1px 6px;margin-left:3px;border-left:#cccccc 1px solid;font-size:12px;}'); document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#666;'); document.write('line-height:12px;font:12px sans-serif;background-color:#eee;border:1px solid #666}');document.write('.bxx{padding:1px 6px;margin-left:3px;border-left:#cccccc 1px solid;}'); document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#111;'); document.write('line-height:12px;font:12px sans-serif;background-color:#fff;border:1px solid #111}');document.write('</style>'); //內容部分 document.write('<div style="width:'+widthss+'px;height:'+heights+'px;'); document.write('overflow:hidden;text-overflow:clip;float:left;">'); document.write('<div><a id="url" target="_blank"><img id="pic" '); document.write('style="border:0;'); document.write('FILTER: progid:DXImageTransform.Microsoft.RevealTrans (duration=2,transition=23)"'); document.write(' width='+widths+' height='+heights+' /></a></div>'); document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=90);'); document.write('width:100%-2px;text-align:right;'); document.write('top:-19px;position:relative;margin:-5px 9px 0 1px;height:22px;line-height:22px;'); document.write('z-index:4000;"><div style="height:22px;line-height:22px;padding:2px 0 0 0;">');for(var i=1;i<counts+1;i++) { document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'"'); document.write(' class="axx" target="_self">'+i+'</a>'); } document.write('</div></div></div>');change_img();</script></div> <div class="hSpace10"></div> <h5>保護動物，讓世界更美好</h5> <div class="zhiciA"> <p style="font-size:16px; line-height:50px; ">動物是大自然給我們的另外一種賞賜，他們可愛善良，給我們創造歡樂，甚至陪伴我們成長。</p> </div> <h5>人類的好朋友</h5> <div class="zhici"> <marquee> <img src="Images/tupian1.jpg" /> <img src="Images/tupian2.jpg" /> <img src="Images/tupian3.jpg" /> <img src="Images/tupian4.jpg" /> <img src="Images/tupian5.jpg" /><div class="clearit"></div> </marquee> </div> </div><div class="l_page"> <ul style="margin-top:50px;"><li class="one"><a href="index.html" >我的首頁</a></li> <li><a href="pengyou.html" >人類的朋友</a></li> <li><a href="dongwu.html" >保護動物</a></li> <li><a href="wuzhong.html" >保護物種</a></li> <li><a href="zhiyuanzhe.html" >志愿者</a></li> <li><a href="liuyan.html" >在線留言</a></li> </ul></div><div class="clearit"></div> </div> <div class="foot"></div> </center> <bgsound src="music/music.mp3" volume="0" balance="0" loop="21"> <embed src="music/yin.mp3" width="0" height="0"></body> </html>💒CSS樣式代碼
/* CSS Document */*{margin:0;padding:0;border:0; font-family:"微軟雅黑"} body { font-family: "微軟雅黑";font-size: 12px;color:#000000;line-height: 20px;text-align:left; background:url(../Images/bj.jpg) repeat fixed!important} td,th {font-family: "微軟雅黑";font-size: 12px;color: #000000;} a {color: #000000;} A:link {TEXT-DECORATION: none;} A:visited {TEXT-DECORATION: none;} A:hover {TEXT-DECORATION: underline;color: #ffffff;} ul,li{list-style-type:none;}.clearit{clear:both;} .hSpace1 {height:1px;line-height:1px;overflow:hidden; clear:both;} .hSpace5 {height:5px;line-height:5px;overflow:hidden; clear:both;} .hSpace10 {height:10px;line-height:10px;overflow:hidden; clear:both;} .hSpace5F {height:5px;line-height:5px; background:#FFFFFF;overflow:hidden; clear:both;} .p5 {padding:5px;} .borderU {border-right: 1px solid #75819e;border-left: 1px solid #75819e;border-bottom: 1px solid #75819e;} .borderU_p5 {border-right: 1px solid #75819e;border-left: 1px solid #75819e;border-bottom: 1px solid #75819e;padding:5px;} .borderH {border-right: 1px solid #75819e;border-left: 1px solid #75819e;} .borderH_p5 {border-right: 1px solid #75819e;border-left: 1px solid #75819e;padding:5px;}.foot{padding-top:50px;} .foot p{text-align:center; line-height:30px;} body{background:url(../Images/beij.jpg); background:#3daa3d;} #page{width:960px; margin:0 auto; background:#000000; padding:10px} .head{width:960px; height:260px; margin:0 auto; }.l_page{width:160px; float:right;} .l_page ul{width:160px; float:right; padding-top:0px;} .l_page ul li{width:160px; height:50px; display:block; line-height:50px; font-size:16px; color:#996633; font-weight:bold; background:url(../Images/nav_bg.gif) no-repeat; margin-top:20px;} .l_page ul .one{margin-top:0px;} .l_page ul li a{color:#996633;} .l_page ul li a:hover{color:#996633;}.r_page{width:780px; float:right; background:#fff1f1; padding:10px 10px 50px;}.r_page h5{font-size:18px; font-weight:bold; text-align:center; color:#ffffff; line-height:30px;width:780px; height:30px; background:#000000; margin-top:10px;}.lunhuan{width:780px; margin:0 auto;}.zhici p{text-align:left; text-indent:2em;} .zhici{width:758px; height:190px; padding:10px;border:1px solid #000000;} .zhici img{width:210px; height:180px;padding:3px; border:1px solid #666666;} .zhiciA{width:758px;border:1px solid #000000; padding:10px;} .zhiciA p{text-align:left; text-indent:2em;}.tupian img{display:block; width:200px; height:200px; float:left; margin-left:40px; display:inline;}.photo{width:780px; margin:0 auto;} .photo img{display:block; width:190px;padding:3px; border:1px solid #666666; float:left; } .photo li{ width:200px; float:left; display:block;margin-left:20px; display:inline;}.jianjie{width:780px; margin:0 auto; text-align:left;} .jianjie strong{width:780px; height:24px; line-height:24px; background:#999999; margin:10px 0; display:block;}.lianxi ul{text-align:left; width:490px; margin:0 auto; line-height:30px;} .mingyan ul{text-align:left; width:490px; margin:0 auto; line-height:30px;} .mingyan ul li a:hover{color:#FF0000;}.jiaxiang{width:780px; margin:0 auto;} .jiaxiang h4{font-size:16px; font-weight:bold; line-height:34px; text-align:center; color:#FF00FF;} .jiaxiang p{width:780px; text-align:left;} .jiaxiang p img{float:left; width:400px;}.jiaxiang h5{font-size:14px; font-weight:bold; line-height:24px; text-align:center; }.zuguo{width:780px; margin:0 auto;}.jianjie table h1 a{ font-size:14px; color:red;} .jianjie table td a:hover{ color:green;}六、🥇 如何讓學習不再盲目
21年程序員總結給編程菜鳥的16條忠告
七、🎁更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻關注我| 💬獲取更多源碼 | 優質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業HTML模板 、期末大作業模板 、等! 「在這里有好多 前端 開發者，一起探討 前端 Node 知識，互相學習」！
3.
以上內容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻💬總結
以上是生活随笔為你收集整理的HTML网页设计：爱护动物题材——保护动物大象(6页) HTML网页设计结课作业 web课程设计网页规划与设计 网页设计成品DW静态网页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 软件笔记
- 下一篇： 2017年html5行业报告,云适配发布