今天看到一個(gè)朋友秀自己編寫自己學(xué)校的官網(wǎng)頁面，我也手癢也做了一個(gè)，這次最大的失誤就是到后邊開始浮躁了，心急，還是敲得少。（賦源碼）

這是官網(wǎng)的：

學(xué)校的有很多高度坍塌，但是它為什么是正常的我也不知道，它的二級菜單是JS實(shí)現(xiàn)的，我只會用HTML+CSS，明天開始接觸一下CSS，以后三個(gè)一起練習(xí)做網(wǎng)頁。

我做的是這樣的：

很多不夠完美，而且越往后越沉不住心，本來能好好計(jì)算的值，就是不想算，就硬調(diào)，最后頁腳那點(diǎn)也是為了省事直接用定位了。

源碼這里

CSS：

.fudiv::after{content: "";display: block;clear: both; }header{width: 100%;height: 150px;background-color: #014490; }header .title_1{width: 100%;height: 50px;background-color: #013b7d; }header .title_1 .nav_1{width: 70%;height: 50px;margin: 0 auto; }header .title_1 .nav_1 .nav_left{float: left;line-height: 50px; }header .title_1 .nav_1 .nav_left a{color: #b1b4b9;margin-right: 18px;font-size: 14px; }header .title_1 .nav_1 .nav_left a:hover{text-decoration: underline; }header .title_1 .nav_1 .nav_right{float: right;padding-top: 10px; }header .title_1 .nav_1 .nav_right .text_box{width: 178px;height: 30px;background-color: #fff;float: left;box-sizing: border-box; }header .title_1 .nav_1 .nav_right .text_box:hover{cursor: text; }header .title_1 .nav_1 .nav_right .nav_1_img{float: left;box-sizing: border-box; }header .title_1 .nav_1 .nav_right .nav_1_img:hover{cursor: pointer; }header .title_1 .nav_1 .nav_right .nav_1_img img{width: 38px;height: 31px; }header .title_2{height: 100px; }header .title_2 .nav_2{width: 70%;margin: 0 auto;height: 100px; }header .title_2 .nav_2 .nav_left{float: left;width: 400px;height: 100px;padding-top: 8px;box-sizing: border-box;overflow: hidden; }header .title_2 .nav_2 .nav_left .logo{width: 400px;height: 86px;margin: 0; }header .title_2 .nav_2 .nav_left h1{font-size: 30px;margin-top: 200px; }header .title_2 .nav_2 .nav_left img{width: 400px;height: 86px; }header .title_2 .nav_2 .nav_right{float: right;height: 100px;width: 60%; }header .title_2 .nav_2 .nav_right ul li{float: left;height: 50px;line-height: 50px;font-size: 16px;color: #fff;padding: 0 20px;z-index: 1; }header .title_2 .nav_2 .nav_right ul li:hover{background-color: #013b7d;position: relative; }header .title_2 .nav_2 .nav_right ul li a{color: #fff; }header .title_2 .nav_2 .nav_right ul li .hide{width: 104px;position: absolute;line-height: 2em;background-color: #013b7d;left: 0px;display: none;text-align: center;z-index: 2; }header .title_2 .nav_2 .nav_right ul li .hide a{color: #fff;display: block;font-size: 14px; }header .title_2 .nav_2 .nav_right ul li .hide a:hover{background-color: #014490; }header .title_2 .nav_2 .nav_right ul li:hover .hide{display: block; }.center-img{width: 1380px;height: 470px;margin: 0 auto;display: block;position: relative; }.center-img>img{width: 1380px;height: 470px; }.center-img .img_left, .center-img .img_right{width: 40px;height: 46px;position: absolute;top: 50%;box-sizing: border-box; }.center-img .img_left{left: 40px; }.center-img .img_right{right: 40px; }.center-img .img_left:hover, .center-img .img_right:hover{cursor: pointer;border: 2px solid #000; }.article_all{background-image: url(../img/background.png);background-position: center bottom;width: 100%; }.article_all article{width: 70%;margin: 0 auto; }.article_all .article_1{border-bottom: 1px solid #dcdcdc;height: 37px;line-height: 37px; }h2{color: #013b7d;font-size: 21px;border-bottom: 1px solid #00449b;margin-right: 15px;float: left;box-sizing: border-box;height: 37px; }h2:hover, p:hover{text-decoration: underline;cursor: pointer; }.article_all .article_1 p{float: left;line-height: 1em;margin-top: 15px; }.article_all .article_1 img, .article_all .article_3 img, .article_all .article_5 img{float: right;padding-top: 10px;margin-left: 5px; }.article_all .article_1 a, .article_all .article_3 a, .article_all .article_5 a{font-size: 12px;color: #595959;float: right;line-height: 37px; }.article_all .article_1 a:hover{text-decoration: underline; }.article_all .article_2{margin: 20px 0;}.article_all .article_2 a{width: 260px;height: 187px;float: left;margin-right: 7px; }.article_all .article_2 img{width: 260px;height: 187px;box-sizing: border-box; }.article_all .article_2 p{float: left;font-size: 14px;color: #2e2e2e;line-height: 1.5em;padding: 10px 0;margin-right: 60px;padding-left: 2px; }.article_all .article_2 .text p:hover{text-decoration: underline;cursor: pointer; }.article_all .article_2 .text p:last-child, .article_all .article_2 .time p:last-child{margin: 0; }.article_all .article_2 .time p{margin-right: 200px;padding-left: 2px; }.article_all .article_3{margin-top: 0;width: 600px;border-bottom: 1px solid #dcdcdc;float: left; }.article_all .article_3>p{float: left;line-height: 1em;margin-top: 6px; }.article_all .article_4{width: 600px;float: left;margin: 20px 0;position: relative; }.article_all .article_4 .article_time{background-color: #e5e5e5;color: #2f68ab;margin-right: 40px;width: 150px;height: 53px;line-height: 53px;text-align: center;margin-bottom: 20px;font-size: 12px; }.article_all .article_4 .article_text{width: 400px;height: 53px;position: absolute;line-height: 53px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size: 14px;color: initial;left: 200px;top: 0; }.article_all .article_4 .text2{top: 73px; }.article_all .article_4 .text3{top: 146px; }.article_all .article_4 .article_text:hover{color: red;text-decoration: underline;cursor: pointer; }.article_all .article_5{width: 415px;float: right;box-sizing: border-box;margin: 10px;border-bottom: 1px solid #dcdcdc;position: relative;top: -47px; }.article_all .article_5 h2{position: absolute;bottom: 0; }.article_all .article_5 p{position: absolute;margin-top: 6px;left: 100px; }.article_all .article_6{height: 201px;width: 425px;float: right;position: relative;top: -38px; }.article_all .article_6>div{width: 130px;height: 67px;color: #fff;background-color: #5386c5;line-height: 67px;text-align: center;float: left;margin: 0px 5px 40px 5px; }.article_all .article_6>div:hover{text-decoration: underline;cursor: pointer; }.article_all .article_6>div:nth-child(2){background-color: #b48266; }.article_all .article_6>div:nth-child(3){background-color: #b888a2; }.article_all .article_6>div:nth-child(4){background-color: #a0bc94; }.article_all .article_6>div:nth-child(6){background-color: #b48266; }.footer_all{width: 100%;height: 330px;background-color: #013b7d; }footer{height: 330px; }.footer_all footer{width: 70%;margin: 0 auto;position: relative; }.footer_all footer img{width: 350px;height: 76px;float: left;margin-top: 128px; }.footer_all footer .text{color: #fff;width: 550px;float: left;margin-top: 78px; }.footer_all footer .text>div{margin-top: 1em;text-align: center; }.footer_all footer .text .text_img{width: 80px;height: 80px;margin: 0 auto; }.footer_all footer .text .text_img img{width: 80px;height: 80px;margin: 28px 0 0 0; }.footer_all footer .footer_img{float: right;color: #fff; }.footer_all footer .footer_img img{width: 96px;height: 96px;margin: 0;position: absolute;right: 0;top: 0; }.footer_all footer .footer_img .img_1{top: 40px; }.footer_all footer .footer_img .img_2{top: auto;bottom: 40px; }.footer_all footer .footer_img P{position: absolute; }.footer_all footer .footer_img .p_1{top: 140px;right: 18px; }.footer_all footer .footer_img .p_2{bottom: 20px;right: 18px; }

HTML:

<!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>國家級示范院校 平頂山技師學(xué)院歡迎您！!</title><link rel="stylesheet" href="./CSS/reset.css"><link rel="stylesheet" href="./CSS/index.css"> </head> <body><!-- 頭部信息 --><header><div class="title_1"><nav class="nav_1 fudiv"><nav class="nav_left"><a href="#">在校學(xué)生</a><a href="#">教職工</a><a href="#">未來考生及訪客</a></nav><nav class="nav_right fudiv"><div class="text_box"></div><div class="nav_1_img"><img src="./img/搜索button.png" alt="圖片丟失"></div></nav></nav></div><div class="title_2"><div class="nav_2 fudiv"><nav class="nav_left"><div class="logo"><img src="./img/logo.png" alt=""></div><h1>平頂山技師學(xué)院</h1></nav><nav class="nav_right"><ul class="fudiv"><li><a href="#">網(wǎng)站首頁</a></li><li><a href="#">學(xué)院概括</a><div class="hide"><a href="#">學(xué)院簡介</a><a href="#">現(xiàn)任領(lǐng)導(dǎo)</a><a href="#">學(xué)院章程</a><a href="#">校園風(fēng)景</a><a href="#">歷史沿革</a><a href="#">聯(lián)系我們</a></div></li><li><a href="#">新聞資訊</a><div class="hide"><a href="#">平技要聞</a><a href="#">睛彩平技</a><a href="#">媒體熱點(diǎn)</a></div></li><li><a href="#">子站集群</a></li><li><a href="#">招生就業(yè)</a></li><li><a href="#">學(xué)生工作</a></li><li><a href="#">培訓(xùn)鑒定</a><div class="hide"><a href="#">技能大賽</a><a href="#">鑒定信息</a><a href="#">電子商務(wù)</a><a href="#">遠(yuǎn)程培訓(xùn)</a></div></li><li><a href="#">黨建工作</a><div class="hide"><a href="#">文件通知</a><a href="#">黨建動態(tài)</a><a href="#">規(guī)章制度</a><a href="#">他山之石</a></div></li><li><a href="#">紀(jì)檢監(jiān)察</a><div class="hide"><a href="#">黨紀(jì)法規(guī)</a><a href="#">廉政空間</a><a href="#">投訴舉報(bào)</a><a href="#">網(wǎng)上展館</a></div></li><li><a href="#">群團(tuán)之家</a><div class="hide"><a href="#">活動掠影</a></div></li><li><a href="#">校園文化</a><div class="hide"><a href="#">質(zhì)量論壇</a><a href="#">學(xué)生社團(tuán)</a><a href="#">作品園地</a><a href="#">文體活動</a><a href="#">魅力校園</a></div></li><li><a href="#">信息服務(wù)</a><div class="hide"><a href="#">大數(shù)據(jù)平臺</a><a href="#">智慧校園</a><a href="#">工資查詢</a><a href="#">學(xué)籍查詢</a><a href="#">資格證書查詢</a><a href="#">常用下載</a></div></li></ul></nav></div></div></header><!-- 圖片 --><div class="center-img"><img src="./img/dang.png" alt=""><div><img class="img_left" src="./img/img_left.png" alt=""><img class="img_right" src="./img/img-right.png" alt=""></div></div><!-- 主要內(nèi)容 --><div class="article_all"><article class="fudiv"><!-- 第一塊內(nèi)容 --><div class="article_1 fudiv"><h2>平技要聞</h2><p>COLLEGE NEW</p><img src="./img/more.png" alt=""><a href="#">更多</a></div><!-- 第二塊內(nèi)容 --><div class="article_2 fudiv"><a href="#" class="fudiv"><img src="./img/xinwen.png" alt=""></a><a href="#" class="fudiv"><img src="./img/xinwen.png" alt=""></a><a href="#" class="fudiv"><img src="./img/xinwen.png" alt=""></a><a href="#" class="fudiv"><img src="./img/xinwen.png" alt=""></a><div class="text"><p>多措并舉，我院線上教學(xué)高效有序</p><p>多措并舉，我院線上教學(xué)高效有序</p><p>多措并舉，我院線上教學(xué)高效有序</p><p>多措并舉，我院線上教學(xué)高效有序</p></div><div class="time"><p>2022-05-12</p><p>2022-05-12</p><p>2022-05-12</p><p>2022-05-12</p></div></div><!-- 第三塊內(nèi)容 --><div class="article_3 fudiv"><h2>媒體視點(diǎn)</h2><p>COLLEGE NEW</p><img src="./img/more.png" alt=""><a href="#">更多</a></div><!-- 第四塊內(nèi)容 --><div class="article_4 fudiv"><div class="article_time">2022-04-04</div><div class="article_time">2022-04-04</div><div class="article_time">2022-04-04</div><div class="article_text text1">平頂山市中級人民法院 平頂山市人民檢察院 平頂山市公安局 平頂山市司法局關(guān)于依法嚴(yán)懲違反疫情防控違法犯罪行為的通告</div><div class="article_text text2">平頂山技師學(xué)院疫情防控封閉管理側(cè)記</div><div class="article_text text3">平頂山技師學(xué)院第七屆教職工代表大會暨工會會員代表大會第四次會</div></div><!-- 第五塊內(nèi)容（第三塊右側(cè)nav） --><div class="article_5 fudiv"><h2>快速鏈接</h2><p>COLLEGE NEW</p><img src="./img/more.png" alt=""><a href="#">更多</a></div><!-- 第六塊內(nèi)容（第四塊右側(cè)article） --><div class="article_6 fudiv"><div>學(xué)校網(wǎng)站集群</div><div>協(xié)同辦公系統(tǒng)</div><div>新媒體說</div><div>智慧校園平臺</div><div>回顧老站</div><div>招生信息</div></div></article></div><!-- 頁腳 --><div class="footer_all"><footer class="fudiv"><img src="./img/logo.png" alt=""><div class="text"><div class="text1">Copyright 2015 All Rights Reserved 版權(quán)所有： 平頂山技師學(xué)院 2015 地址：河南</div><div class="text2">省平頂山市湛河區(qū)湛河南路137號 郵編：467000 郵箱：wg8116@163.com 運(yùn)維：</div><div class="text3">網(wǎng)絡(luò)信息中心 手機(jī)：13721858526 備案證編號：豫ICP備15029909號-4</div><div class="text_img"><img src="./img/footer_1.png" alt=""></div></div><div class="footer_img"><img class="img_1" src="./img/01.jpg" alt=""><p class="p_1">學(xué)院微信</p><img class="img_2" src="./img/02.jpg" alt=""><p class="p_2">學(xué)院微博</p></div></footer></div> </body> </html>

好了，今天分享到此為止，繼續(xù)加油!!

總結(jié)

以上是生活随笔為你收集整理的静态网页-学校官网（附源码）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。