HTML网页设计：爱护动物题材——保护动物大象(6页) HTML网页设计结课作业 web课程设计网页规划与设计 网页设计成品DW静态网页
生活随笔
收集整理的這篇文章主要介紹了
HTML网页设计：爱护动物题材——保护动物大象(6页) HTML网页设计结课作业 web课程设计网页规划与设计 网页设计成品DW静态网页
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
🎉精彩專(zhuān)欄推薦 💭文末獲取聯(lián)系
?? 作者簡(jiǎn)介: 一個(gè)熱愛(ài)把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主
💂 作者主頁(yè): 【主頁(yè)——🚀獲取更多優(yōu)質(zhì)源碼】
🎓 web前端期末大作業(yè)： 【📚畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節(jié)表白網(wǎng)頁(yè)制作 (110套) 】
🌎超炫酷的Echarts大屏可視化源碼：【🔰 Echarts大屏展示大數(shù)據(jù)平臺(tái)可視化(150套) 】
🔖 HTML+CSS+JS實(shí)例代碼： 【🗂?HTML+CSS+JS實(shí)例代碼 (炫酷特效網(wǎng)頁(yè)代碼) 繼續(xù)更新中…】
🎁 免費(fèi)且實(shí)用的WEB前端學(xué)習(xí)指南： 【📂web前端零基礎(chǔ)到高級(jí)學(xué)習(xí)視頻教程 120G干貨分享】
🥇 關(guān)于作者: 💬歷任研發(fā)工程師，技術(shù)組長(zhǎng)，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過(guò)去，歷經(jīng)變遷，物是人非。 然而，對(duì)于技術(shù)的探索和追求從未停歇。 💪堅(jiān)持原創(chuàng)，熱衷分享，初心未改，繼往開(kāi)來(lái)！
📂文章目錄
- 一、👨?🎓網(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è)、🐋鯨魚(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á)到打開(kāi)后就能即時(shí)看到網(wǎng)站的效果。
📘網(wǎng)站素材方面：計(jì)劃收集各大平臺(tái)好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁(yè)風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁(yè)尺寸的圖片。
📒網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類(lèi)包含：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=gb2312" /> <title>無(wú)標(biāo)題文檔</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; //當(dāng)前所顯示的滾動(dòng)圖 var key=0; //標(biāo)識(shí)是否為第一次開(kāi)始執(zhí)行 var tt; //標(biāo)識(shí)作用function change_img() { if(key==0){key=1;} //如果第一次執(zhí)行KEY=1，表示已經(jīng)執(zhí)行過(guò)一次了。 else if(document.all)//document.all僅IE6/7認(rèn)識(shí)，firefox不會(huì)執(zhí)行此段內(nèi)容 { document.getElementById("pic").filters[0].Apply(); //將濾鏡應(yīng)用到對(duì)像上 document.getElementById("pic").filters[0].Play(duration=2); //開(kāi)始轉(zhuǎn)換 document.getElementById("pic").filters[0].Transition=23;//轉(zhuǎn)換效果 }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'; //將當(dāng)前頁(yè)面的ID設(shè)置為選中狀態(tài) nn++; if(nn>counts){nn=1;} //如果ID大于總圖片數(shù)量。則從頭開(kāi)始循環(huán) tt=setTimeout('change_img()',4000); //在4秒后重新執(zhí)行change_img()方法. } function changeimg(n)//點(diǎn)擊黑條上的鏈接執(zhí)行的方法。 { nn=n; //當(dāng)前頁(yè)面的ID等于傳入的N值, window.clearInterval(tt); //清除用于循環(huán)的TT //重新執(zhí)行change_img();但change_img()內(nèi)所調(diào)用的圖片ID已經(jīng)在此處被修改,會(huì)從新ID處開(kāi)始執(zhí)行. 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>'); //內(nèi)容部分 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>保護(hù)動(dòng)物，讓世界更美好</h5> <div class="zhiciA"> <p style="font-size:16px; line-height:50px; ">動(dòng)物是大自然給我們的另外一種賞賜，他們可愛(ài)善良，給我們創(chuàng)造歡樂(lè)，甚至陪伴我們成長(zhǎng)。</p> </div> <h5>人類(lèi)的好朋友</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" >我的首頁(yè)</a></li> <li><a href="pengyou.html" >人類(lèi)的朋友</a></li> <li><a href="dongwu.html" >保護(hù)動(dòng)物</a></li> <li><a href="wuzhong.html" >保護(hù)物種</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;}六、🥇 如何讓學(xué)習(xí)不再盲目
21年程序員總結(jié)給編程菜鳥(niǎo)的16條忠告
七、🎁更多干貨
1.如果我的博客對(duì)你有幫助、如果你喜歡我的博客內(nèi)容，請(qǐng) “👍點(diǎn)贊” “??評(píng)論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻關(guān)注我| 💬獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開(kāi)發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！
3.
以上內(nèi)容技術(shù)相關(guān)問(wèn)題💌歡迎一起交流學(xué)習(xí)👇🏻👇🏻👇🏻💬總結(jié)
以上是生活随笔為你收集整理的HTML网页设计：爱护动物题材——保护动物大象(6页) HTML网页设计结课作业 web课程设计网页规划与设计 网页设计成品DW静态网页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 软件笔记
- 下一篇： 图文混排模板HTML