【HTML5期末大作业】制作一个简单HTML我的公益校园安全网页（HTML+CSS+JS）
源碼獲取 文末聯系 💨?
Web前端開發技術
描述 網頁設計題材，DIV+CSS 布局制作,HTML+CSS網頁設計期末課程大作業 | HTML期末大學生網頁設計作業
HTML：結構
CSS：樣式
在操作方面上運用了html5和css3，
采用了div+css結構、表單、超鏈接、浮動、絕對定位、相對定位、字體樣式、引用視頻等基礎知識
JavaScript：做與用戶的交互行為
文章目錄
- 前端學習路線
- 網頁基本結構
- 網頁演示
- HTML結構代碼
- 學的反而越迷茫
- 學習更多
前端學習路線
（1）html文件：其中index.html是首頁、其他html為二級頁面；
（2）css文件：css全部頁面樣式,文字滾動, 圖片放大等；
（3）js文件：js實現動態輪播特效, 表單提交, 點擊事件等等（網頁中運用到js代碼）
網頁基本結構
(1)首頁：進入網頁中看到的第一個頁面(LOGO、公司名稱、導航、banner、新聞、相關信息、底部信息、banner一般是5個
(2)二級頁面：從首頁點擊進入之后的頁面叫做二級頁面
(3)三級頁面：從二級頁面點擊進入的頁面
網頁html：網頁是構成網站的基本元素，是承載各種網站應用的平臺。通俗地說，網站就是由網頁組成的
首頁網站：首頁是一個網站的入口網頁，故往往會被編輯得易于了解該網站多數作為首頁的文件名是index加上擴展名
導航菜單：是指位于頁面頂部或者側邊區域的，也稱之為導航欄，它起著鏈接站點或者軟件內的各個頁面的作用.
網頁頁腳：是網頁中每個頁面的底部的區域。常用于顯示附加信息。如作者、備案號等。
網頁演示
HTML結構代碼
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css" /></head> <body> <div class="main" ><div class="content12"> <div class="daohang"><div class="img"><img src="images/1.jpg"></div><ul> <li class="active"><a href="index.html">首頁</a> </li> <li ><a href="guanyu.html">關于</a></li> <li ><a href="xiaochuyinhuan.html">消除隱患</a></li> <li ><a href="anquanchangshi.html">安全常識</a></li> <li ><a href="yingduifangfa.html">應對方法</a></li> <li ><a href="anquanbiaoyu.html">安全標語</a></li> <li ><a href="anjianshili.html">案件實例</a></li> <li ><a href="dengluzhuce.html">登錄注冊</a></li></ul></div> </div> <div class="clear"></div><div class="content12"> <div class="guanggaotupian"><div class="img"> <img src="images/2.jpg"></div></div> </div> <div class="clear"></div><div class="content12"> <div class="taitou"><div class="title"> 關于<span><i></i></span> <div class="stitle">GUANYU</div></div></div> <div class="gy"><div class="text"><div class="list"> <img src="images/3.jpg" class="img" ></div>校園安全與每個師生、家長和社會都有著密切的關系。從廣義上講，校園事故是指學生在校期間，由于某種偶然突發的因素而導致的人為傷害事件。就其特點而言，一般是因為責任人疏忽大意過失失職而不是因為故意而導致事故的發生。<br><br>2017年12月，校園安全入選2017年民生熱詞榜。 </div><div class="clear"></div><div class="slist"> <img src="images/4.jpg" class="simg" ></div></div> </div> <div class="clear"></div><div class="content4"> <div class="taitou"><div class="title"> 消除隱患<span><i></i></span> <div class="stitle">XIAOCHUYINHUAN</div></div></div> <div class="xcyh"><ul> <li><div class="text"> <div class="img"><img src="images/5.jpg"></div> <div class="desc"><div class="title">提高意識</div></div> </div><div class="stext"> <div class="sdesc">地方各級教育行政部門和中小學校要與當地公安機關和共青團、少先</div> </div> <div class="clear"></div></li> <li><div class="text"> <div class="img"><img src="images/6.jpg"></div> <div class="desc"><div class="title">齊抓共管</div></div> </div><div class="stext"> <div class="sdesc">地方各級教育行政部門要繼續加強與公安、安監、衛生、文化、建設</div> </div> <div class="clear"></div></li> <li><div class="text"> <div class="img"><img src="images/7.jpg"></div> <div class="desc"><div class="title">落實措施</div></div> </div><div class="stext"> <div class="sdesc">落實《公安機關維護校園及周邊治安秩序八條措施》 </div> </div> <div class="clear"></div></li></ul></div> </div><div class="content4"> <div class="taitou"><div class="title"> 美圖<span><i></i></span> <div class="stitle">MEITU</div></div></div> <div class="xiangceliebiao"><ul> <li> <div class="img"><img src="images/8.jpg"></div> </li> <li> <div class="img"><img src="images/9.jpg"></div> </li> <li> <div class="img"><img src="images/10.jpg"></div> </li></ul></div> </div><div class="content4"> <div class="taitou"><div class="title"> 安全標語<span><i></i></span> <div class="stitle">ANQUANBIAOYU</div></div></div> <div class="aqby"><div class="img"> <img src="images/11.jpg" class="img"></div><div class="clear"></div><div class="title">安全標語</div><div class="clear"></div><br><br>1、營造校園安全氛圍，創造溫馨學習環境。 <br><br>2、 安全伴我在校園，我把安全帶回家。<br><br>3、 維護校園安全，營造和諧環境。<br><br>4、 增強師生防范意識，營造校園安全環境。<br><br>5、 我要安全、我懂安全、事事安全、人人安全。<br><br>6、 生命至高無上，安全責任為天。<br><br>7、 倡導安全文明風尚，提高全民安全意識。<br><br>8、 以人為本，平安為先，加快建設平安校園。<br><br>9、 關注校園安全，構建人文和諧。<br><br>10、 加強安全管理，建設平安校園。<br><br>11、 安全在我心中，生命在我手中。<br><br>12、 跨進校園，走進平安，建設平安校園，你我共同的責任。<div class="clear"></div><div class="list"> <img src="images/12.jpg" class="simg"> <img src="images/13.jpg" class="simg"></div></div> </div> <div class="clear"></div><div class="content12"> <div class="dibu"><div class="desc"> 校園安全 </div></div> </div> <div class="clear"></div></div></body></html>學的反而越迷茫
有這種感覺很正常，因為你還沒有真正去公司里面待過，也不清楚自己到底要學多少東西才能勝任公司里面給你分配的活。我從你的表述來看，你的基礎應該還是很扎實的。跟著網上那種全套的視頻教程學肯定沒有問題。
當你以后真正進入公司，發現工作的難度和量大約只有你學習時期的大約20%，你可能就會發出一聲嘆息:原來工作也不過如此嘛。
這是很正常的，因為大部分公司是招你進去去干活的，寫業務的，不是讓你一個新人去研發公司架構的。都是現成的東西，你要做的就是在別人的教導下，手把手的指揮下去添磚加瓦。到時候你恐怕要驚呼:就這？
所以，放松心態吧，好好享受大學時光
—————————————————
學習更多
關注我 | 點贊博文 | 每天帶你漲知識
總結
以上是生活随笔為你收集整理的【HTML5期末大作业】制作一个简单HTML我的公益校园安全网页（HTML+CSS+JS）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 瑞幸咖啡新获2.5亿美元融资背后
- 下一篇： html5 css动画效果代码,超酷震撼