HTML做一个学校网站（纯html代码）
生活随笔
收集整理的這篇文章主要介紹了
HTML做一个学校网站（纯html代码）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
🎉精彩專欄推薦 💭文末獲取聯(lián)系
?? 作者簡介: 一個熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主
💂 作者主頁: 【主頁——🚀獲取更多優(yōu)質(zhì)源碼】
🎓 web前端期末大作業(yè)： 【📚畢設項目精品實戰(zhàn)案例 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】
🌎超炫酷的Echarts大屏可視化源碼：【🔰 Echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】
🔖 HTML+CSS+JS實例代碼： 【🗂?HTML+CSS+JS實例代碼 (炫酷特效網(wǎng)頁代碼) 繼續(xù)更新中…】
🎁 免費且實用的WEB前端學習指南： 【📂web前端零基礎到高級學習視頻教程 120G干貨分享】
🥇 關于作者: 💬歷任研發(fā)工程師，技術(shù)組長，教學總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對于技術(shù)的探索和追求從未停歇。 💪堅持原創(chuàng)，熱衷分享，初心未改，繼往開來！
📂文章目錄
- 一、👨?🎓網(wǎng)站題目
- 二、??網(wǎng)站描述
- 三、📚網(wǎng)站介紹
- 四、🌐網(wǎng)站演示
- 五、?? 網(wǎng)站代碼
- 🧱HTML結(jié)構(gòu)代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多干貨
一、👨?🎓網(wǎng)站題目
🏫 校園網(wǎng)頁設計 、學校班級網(wǎng)頁制作、學校官網(wǎng)、小說書籍、等網(wǎng)站的設計與制作。
二、??網(wǎng)站描述
🏷?HTML靜態(tài)網(wǎng)頁設計作業(yè)使用dreamweaver制作，采用DIV+CSS布局，共有多個頁面，首頁使用CSS排版比較豐富，色彩鮮明有活力。頂部導航及底部區(qū)域背景色為100%寬度，主體內(nèi)容區(qū)域?qū)挾?/p>
🏅 一套優(yōu)質(zhì)的💯網(wǎng)頁設計應該包含 (具體可根據(jù)個人要求而定)
三、📚網(wǎng)站介紹
📔網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。
📓網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網(wǎng)站的效果。
📘網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網(wǎng)頁風格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
📒網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；
📙網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3）📄 js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網(wǎng)頁中運用到js代碼）。
四、🌐網(wǎng)站演示
五、?? 網(wǎng)站代碼
🧱HTML結(jié)構(gòu)代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>首頁</title><!-- 引入css --><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/index.css"><!-- 引入js文件 --><script src="js/js.js" type="text/javascript" ></script></head><body><!-- 頂部logo和搜索框 --><div id="topbox"><img src="picture/dkzy-logo.png" alt=""><!-- 右上搜索框 --><div id="inputright"><input type="text" placeholder="請輸入關鍵字搜索"><img src="picture/search.png" alt=""></div></div><!-- 導航欄 --><div id="title"><ul><li><a href="">首頁</a></li><li><a href="jianjie.html">學校概況</a></li><li><a href="xingzheng.html">機構(gòu)設置</a></li><li><a href="">學科資質(zhì)</a></li><li><a href="">招生就業(yè)</a></li><li><a href="">黨建工作</a></li><li><a href="">校園文化</a></li><li><a href="">公共服務</a></li><li><a href="">新聞中心</a></li><li><a href="">信息公開</a></li><li><a href="">教務系統(tǒng)</a></li><li><a href="">繼續(xù)教育</a></li></ul></div><!-- 輪播圖 --><div><div id="boxhdp"><ul id="img"><li class="current"><img src="picture/b1.jpg"></li><li><img src="picture/b2.jpg"></li><li><img src="picture/b3.jpg"></li></ul><ul id="li"><li class="on"></li><li></li><li></li></ul><div style="clear: both;"></div><div class="an" id="an"><a href="javascript:;" id="prev"><img src="picture/left.png" alt=""></a><a href="javascript:;" id="next" class="an-a2"><img src="picture/right.png" alt=""></a></div></div><!-- 輪播圖部分參數(shù) --><script>hdp({li: "li", //默認值：li;默認用li包裹boxid: "boxhdp", //最外面div idimgid: "img", //圖片外面idoptid: "li", //opt外面id an: "an", //左右按鈕id，用于移上顯示和隱藏prev: "prev", //左邊箭頭idnext: "next", //右邊箭頭idms: 2300 //多少毫秒切換一張,})</script></div><!-- 新聞公告模塊 --><div id="main_msg"><div id="main_msg_left"><div id="msgtitle"><div id="firstdiv"><img src="picture/nes.png" alt=""><p>學院要聞</p></div><div id="lastdiv"><img src="picture/news2.png" alt=""><p>綜合信息</p></div><img id="more" src="picture/more.png" alt=""></div><div id="xinwen_list"><ul><li><p>共青團河南地礦職業(yè)學院第一次代表大會勝利召開</p><p>04-12</p></li><li><p>德藝部以“思政引領聚青心 用心服務顯青情”第二期青馬...</p><p>04-07</p></li><li><p>“我為同學做件事”愛心義剪服務活動</p><p>04-04</p></li><li><p>第四屆“青春有你”校園歌手大賽圓滿落幕</p><p>04-04</p></li><li><p>信息系“以青春之名，筑雄健之基”第二期青馬工程班開...</p><p>04-02</p></li><li><p>永遠跟黨走 志愿耀青春——我校師生積極組織參與雷鋒志...</p><p>04-02</p></li></ul></div></div><div id="main_msg_main"><div id="msgtitle"><div id="firstdiv"><img src="picture/gonggao3.png" alt=""><p>通知公告</p></div><div id="lastdiv"><img src="picture/gongao2.png" alt=""><p>學術(shù)動態(tài)</p></div><img id="more" src="picture/more.png" alt=""></div><div id="xinwen_list"><ul><li><p>河南地礦職業(yè)學院學術(shù)交流中心北配樓 綜合布線項目</p><p>04-14</p></li><li><p>關于確認河南省職業(yè)院校教師素質(zhì)提高計劃2021年國家級..</p><p>04-12</p></li><li><p>河南地礦職業(yè)學院轉(zhuǎn)發(fā)《關于開展“當好引路人，一起向...</p><p>04-09</p></li><li><p>河南地礦職業(yè)學院轉(zhuǎn)發(fā)《2022年教科規(guī)劃一般課題立項通...</p><p>03-26</p></li><li><p>河南地礦職業(yè)學院轉(zhuǎn)發(fā)《關于開展2022年度科技成果獎評...</p><p>03-26</p></li><li><p>河南地礦職業(yè)學院轉(zhuǎn)發(fā)《河南省教科規(guī)劃辦關于做好2022...</p><p>03-23</p></li></ul></div></div><div id="main_msg_right"><div id="title_img"><img src="picture/xx.jpg" alt=""><div id="img_title"><p>青年有理想有擔當...</p><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div></div><div class="zhuanti_title"><img src="picture/24.png" alt=""><p>專題網(wǎng)頁</p><img id="more" src="picture/more.png" alt=""></div></div></div><div id="footer"><div id="footer_box"><img src="picture/download.png" alt=""><div class="gongneng"><img src="picture/mail.png" alt=""><p>郵箱服務</p></div><div class="gongneng"><img src="picture/jc-vpn.png" alt=""><p>郵箱服務</p></div><div class="gongneng"><img src="picture/mail.png" alt=""><p>郵箱服務</p></div><div class="gongneng"><img src="picture/jc-szzy.png" alt=""><p>郵箱服務</p></div><div class="gongneng"><img src="picture/jc-xnxy.png" alt=""><p>郵箱服務</p></div><img id="lianjie" src="picture/lianjie.png" alt=""><div id="youqinglianjie"><a href="">河南省教育廳</a><a href="">河南省招生辦公室</a><a href="">河南省國土資源廳</a><a href="">河南省地質(zhì)礦產(chǎn)…</a><br><a href="">金伯利鉆石</a><a href="">中國地大</a><a href="">武漢中國地大北京</a><a href="">校友會</a></div><div class="contur"><img src="picture/weixin.png" alt=""></div><div class="contur"><img src="picture/weibo.png" alt=""></div></div></div><div id="footerbanquan">版權(quán)所有 COPYRIGHT ? 2018<a href=""> 河南地礦職業(yè)學院</a> 地址：鄭州市白沙園區(qū)鄭開大道與永繼路交叉口向北1000米 豫ICP備17027763號-3</div> </body></html>💒CSS樣式代碼
/* 輪播圖樣式 */#boxhdp {position: relative;top: 0px;width: 1500px;height: 270px;margin: 0 auto;overflow: hidden;position: relative;font-size: 0px;}#img>li {width: 100%;float: left;text-align: center;display: none;}#img>li img {width: 100%;}#img>.current {display: block;}#li {position: absolute;left: 50%;bottom: 15px;margin-left: -35px;}#li>li {width: 10px;height: 10px;background-color: #ccc;border-radius: 50%;margin-right: 5px;float: left;cursor: pointer;}#li>.on {background-color: #f50;}#an {display: none;}#an a {position: absolute;top: 50%;width: 40px;height: 46px;background-color: rgba(0, 0, 0, 0.108);line-height: 40px;color: #fff;}#an a:hover {background-color: rgba(0, 0, 0, 0.293);}#an .an-a2 {right: 0;}#an img {position: relative;width: 30px;left: 5px;top: 7px;}/* 新聞公告樣式 */#main_msg {padding-top: 20px;width: 1340px;margin: 0 auto;display: flex;}#main_msg_left {width: 460px;}#msgtitle {width: 460px;height: 43px;border-bottom: 1px solid #F7561E;position: relative;display: flex;}#msgtitle div {display: inline-block;display: flex;}#msgtitle div img {width: 20px;height: 20px;}#firstdiv {width: 140px;background-color: #F7561E;color: #fff;line-height: 42px;}#firstdiv img {position: relative;top: 12px;left: 20px;}#firstdiv p {width: 100%;text-align: center;}#lastdiv {width: 140px;background-color: #DDDDDD;margin-left: 10px;color: #4C4C4C;line-height: 42px;}#lastdiv img {position: relative;top: 12px;left: 20px;}#lastdiv p {width: 100%;text-align: center;}#more {height: 14px;position: absolute;right: 0px;bottom: 3px;}#xinwen_list {width: 100%;}#xinwen_list ul {width: 100%;padding-top: 30px;}#xinwen_list ul li {position: relative;width: 100%;display: flex;height: 30px;font-size: 14px;color: #57575e;}#xinwen_list ul li:hover {color: #F75666;}#xinwen_list ul li p:last-child {position: absolute;right: 0px;}#main_msg_main {width: 460px;margin-left: 50px;}#main_msg_right {width: 315px;margin-left: 50px;position: relative;}#title_img {width: 100%;position: relative;font-size: 0px;}#title_img img {width: 100%;height: 155px;}#img_title {width: 100%;position: absolute;bottom: 0px;height: 33px;background-color: rgba(0, 0, 0, 0.476);color: #fff;line-height: 33px;font-size: 14px;}#img_title p {margin-left: 10px;}#img_title ul {height: 29px;padding-top: 2px;padding-bottom: 2px;position: absolute;display: flex;right: 20px;bottom: 0px;}#img_title ul li {color: black;text-align: center;line-height: 24px;margin-top: 3px;width: 24px;height: 24px;background-color: #fff;margin-left: 5px;}#img_title ul li:hover {background-color: #F7561E;color: #fff;}.zhuanti_title {position: relative;width: 100%;border-bottom: 1px solid #F7561E;height: 25px;padding-top: 10px;padding-bottom: 10px;display: flex;line-height: 45px;}.zhuanti_title img:first-child {position: relative;width: 20px;height: 20px;top: 15px;}#footer {width: 100%;height: 95px;background-color: #F7561E;margin-top: 30px;}#footer_box {width: 1340px;margin: 0 auto;height: 100%;display: flex;color: #fff;}.gongneng {margin-top: 15px;margin-left: 20px;margin-right: 14px;}.gongneng:hover {color: #CCCCCC;}#lianjie {margin-left: 20px;}#youqinglianjie {height: 100%;line-height: 47px;font-size: 14px;color: #fff;}#youqinglianjie a {color: #fff;padding-left: 20px;text-decoration: none;}.contur {padding-top: 20px;margin-left: 30px;}#footerbanquan {width: 100%;background-color: #353535;color: #fff;text-align: center;font-size: 12px;line-height: 24px;}#footerbanquan a {color: #fff;}六、🥇 如何讓學習不再盲目
第一、帶著目標去學習，無論看書報課還是各種線下活動。
首先要明確自己的學習目標是什么，是想解決什么問題，實現(xiàn)怎樣的目標。
第二、學習要建立個人知識體系
知識是學不完的，書籍是浩如煙海的。我們盡情徜徉其中的時候，千萬不要被海水淹死，沒有自我了。在學習過程中，我們會發(fā)現(xiàn)每一個知識點都是有她的邊界和背景的，我們要善于歸納整理知識
第三、學到了就要用到
有時，我們一天下來感覺學到了很多干貨，那么我們一定要將這些知識點和實際工作和生活聯(lián)系起來。知識和實踐相互聯(lián)系靠攏。愛學習是一件好事，但只有會學習的人，才有價值。
七、🎁更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻關注我| 💬獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學習」！
3.
以上內(nèi)容技術(shù)相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻💬總結(jié)
以上是生活随笔為你收集整理的HTML做一个学校网站（纯html代码）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java学习（112）：simpleda
- 下一篇： html 树形图可拖拽,HTML5拖拽A