【网页制作课作业】用HTML+CSS制作一个简单的学校网页(9页)
🎉精彩專欄推薦 💭文末獲取聯(lián)系
?? 作者簡(jiǎn)介: 一個(gè)熱愛把邏輯思維轉(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年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對(duì)于技術(shù)的探索和追求從未停歇。 💪堅(jiān)持原創(chuàng)，熱衷分享，初心未改，繼往開來(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ì) 、學(xué)校班級(jí)網(wǎng)頁(yè)制作、學(xué)校官網(wǎng)、小說(shuō)書籍、等網(wǎng)站的設(shè)計(jì)與制作。
二、??網(wǎng)站描述
🏷?HTML靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)作業(yè)使用dreamweaver制作，采用DIV+CSS布局，共有多個(gè)頁(yè)面，首頁(yè)使用CSS排版比較豐富，色彩鮮明有活力。頂部導(dǎo)航及底部區(qū)域背景色為100%寬度，主體內(nèi)容區(qū)域?qū)挾?/p>
🏅 一套優(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> <link href="css/all.css" rel="stylesheet" media="all" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>學(xué)校</title> </head> <body> <div class="head"><div class="ma"><div class="logo"> <img src="images/logo.png" width="250" /></div><div class="menu"><ul class="center"><li><a href="index.html">首頁(yè)</a></li><li><a href="worklist.html">作品列表</a></li><li><a href="schoollist.html">學(xué)校列表</a></li><li><a href="show.html">學(xué)校展館</a></li><li><a href="reg.html">會(huì)員注冊(cè)</a></li></ul></div><div class="clear"></div></div> </div> <div class="banner"><img src="images/timg.jpg" width="100%" /></div> <div class="content"><div class="bar"><h3>用戶注冊(cè)</h3></div><div class="js fss pad"><form action="login.html"><table><tr><td>手機(jī)號(hào)</td><td><input type="text"> <button>獲取驗(yàn)證碼</button> </td></tr><tr><td>驗(yàn)證碼</td><td><input type="text"> </td></tr><tr><td></td><td><input type="submit" value="立即注冊(cè)" class="btn"> </td></tr></table></form></div><div class="clear"></div> </div> <div class="end"><p>版權(quán)所有 </p> </div> </body> </html>💒CSS樣式代碼
@charset "utf-8"; /* CSS Document */ ul,li,h1,h2,h3,p{ padding:0; margin:0; list-style:none} a{ text-decoration:none; color:#000} body{ width:100%; min-width: 1366px; background:#ddd; margin:0 auto; line-height:21px} .clear{ clear:both} .menu li{ list-style:none} .logo{ margin:15px 0 0 20px; float:left} .banner{ position:relative; } .head{ background:#0f5356; height:100px}.menu{ text-align:center; float:right; width:550px } .menu li a{ padding:10px 20px; font-size:16px;color:#fff}.menu li { float:left; padding:40px 0; width:20%}.right{ float:right; width:1000px; margin-right:20px; padding:0px} .left{ float:left; width:260px; margin-left:20px; padding:0px} .mid{ float:left; width:460px; margin-left:20px; padding:0px} .content{ background:#fff ; font-size:14px; padding-bottom:30px; width:100%} .content,.banner,.ma{ width: 1366px; margin: 0 auto} .content:after{ clear: both; display: block; content: ''} .end{ clear:both; background:#0f5356; color:#fff; padding:30px 0; text-align:center;} .produce img{ margin:0 20px 20px 0} .produce { line-height:30px} .pad{ padding:20px; display:block} .pics p{ text-align:center}.imglist{ width:100%; margin:0 auto} .imglist li{ float:left; width:300px; margin:15px ; text-align:center} .scrollleft{ margin:0 0px} .scrollleft li{ float:left; width:250px; margin-bottom:10px;} .news li{ padding:5px;}.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}.bar{ margin:0px 0; margin-bottom:20px;clear:both; line-height: 50px; color:#0f5356; background:#fff ; border-bottom:#ccc solid 2px; font-size:15px;font-weight:bold; padding:10px} .pics li img{ width:240px; height: 180px} .tub li {background: #fff; width:100%; border: #ccc solid 1px;padding: 17px 0; font-size:16px; margin-bottom:7px; display:inline-block;color: #FFFF00; text-indent: 20px; }.gqlist li {width: 100%; border-bottom:#ccc dashed 1px;float: left;padding:10px 0; }.gqlist li b{ font-weight:normal}.tub,.shaixuan{ margin: 20px}.shaixuan input,.shaixuan select{ padding: 5px; vertical-align: middle} .xuan{ padding: 0 20px} .xuan li a{ display: inline-block; border: #ccc solid 1px; padding: 5px 15px; margin: 0 10px} .xuan li { margin: 10px 0}.pinlun{ margin: 0 20px} .pinlun .box{ border-bottom: #ddd solid 1px} .tool { text-align: center} .tool a{ display: inline-block; padding: 10px 20px; background: #0f5356; color: #fff; font-size: 18px} .btn{ display: inline-block; padding: 10px 20px; background: #0f5356; color: #fff; font-size: 18px; border: none} .fss input,.fss button{ padding: 10px}.pinlun .box{ padding: 15px}六、🥇 如何讓學(xué)習(xí)不再盲目
第一、帶著目標(biāo)去學(xué)習(xí)，無(wú)論看書報(bào)課還是各種線下活動(dòng)。
首先要明確自己的學(xué)習(xí)目標(biāo)是什么，是想解決什么問題，實(shí)現(xiàn)怎樣的目標(biāo)。
第二、學(xué)習(xí)要建立個(gè)人知識(shí)體系
知識(shí)是學(xué)不完的，書籍是浩如煙海的。我們盡情徜徉其中的時(shí)候，千萬(wàn)不要被海水淹死，沒有自我了。在學(xué)習(xí)過程中，我們會(huì)發(fā)現(xiàn)每一個(gè)知識(shí)點(diǎn)都是有她的邊界和背景的，我們要善于歸納整理知識(shí)
第三、學(xué)到了就要用到
有時(shí)，我們一天下來(lái)感覺學(xué)到了很多干貨，那么我們一定要將這些知識(shí)點(diǎn)和實(shí)際工作和生活聯(lián)系起來(lái)。知識(shí)和實(shí)踐相互聯(lián)系靠攏。愛學(xué)習(xí)是一件好事，但只有會(huì)學(xué)習(xí)的人，才有價(jià)值。
七、🎁更多干貨
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+CSS制作一个简单的学校网页(9页)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Halcon读图出错怎么办？ReadIm
- 下一篇： 前端--HTML入门