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

這是官網的：

學校的有很多高度坍塌，但是它為什么是正常的我也不知道，它的二級菜單是JS實現的，我只會用HTML+CSS，明天開始接觸一下CSS，以后三個一起練習做網頁。

我做的是這樣的：

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

源碼這里

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>國家級示范院校 平頂山技師學院歡迎您！!</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="#">在校學生</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>平頂山技師學院</h1></nav><nav class="nav_right"><ul class="fudiv"><li><a href="#">網站首頁</a></li><li><a href="#">學院概括</a><div class="hide"><a href="#">學院簡介</a><a href="#">現任領導</a><a href="#">學院章程</a><a href="#">校園風景</a><a href="#">歷史沿革</a><a href="#">聯系我們</a></div></li><li><a href="#">新聞資訊</a><div class="hide"><a href="#">平技要聞</a><a href="#">睛彩平技</a><a href="#">媒體熱點</a></div></li><li><a href="#">子站集群</a></li><li><a href="#">招生就業</a></li><li><a href="#">學生工作</a></li><li><a href="#">培訓鑒定</a><div class="hide"><a href="#">技能大賽</a><a href="#">鑒定信息</a><a href="#">電子商務</a><a href="#">遠程培訓</a></div></li><li><a href="#">黨建工作</a><div class="hide"><a href="#">文件通知</a><a href="#">黨建動態</a><a href="#">規章制度</a><a href="#">他山之石</a></div></li><li><a href="#">紀檢監察</a><div class="hide"><a href="#">黨紀法規</a><a href="#">廉政空間</a><a href="#">投訴舉報</a><a href="#">網上展館</a></div></li><li><a href="#">群團之家</a><div class="hide"><a href="#">活動掠影</a></div></li><li><a href="#">校園文化</a><div class="hide"><a href="#">質量論壇</a><a href="#">學生社團</a><a href="#">作品園地</a><a href="#">文體活動</a><a href="#">魅力校園</a></div></li><li><a href="#">信息服務</a><div class="hide"><a href="#">大數據平臺</a><a href="#">智慧校園</a><a href="#">工資查詢</a><a href="#">學籍查詢</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><!-- 主要內容 --><div class="article_all"><article class="fudiv"><!-- 第一塊內容 --><div class="article_1 fudiv"><h2>平技要聞</h2><p>COLLEGE NEW</p><img src="./img/more.png" alt=""><a href="#">更多</a></div><!-- 第二塊內容 --><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>多措并舉，我院線上教學高效有序</p><p>多措并舉，我院線上教學高效有序</p><p>多措并舉，我院線上教學高效有序</p><p>多措并舉，我院線上教學高效有序</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><!-- 第三塊內容 --><div class="article_3 fudiv"><h2>媒體視點</h2><p>COLLEGE NEW</p><img src="./img/more.png" alt=""><a href="#">更多</a></div><!-- 第四塊內容 --><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">平頂山市中級人民法院 平頂山市人民檢察院 平頂山市公安局 平頂山市司法局關于依法嚴懲違反疫情防控違法犯罪行為的通告</div><div class="article_text text2">平頂山技師學院疫情防控封閉管理側記</div><div class="article_text text3">平頂山技師學院第七屆教職工代表大會暨工會會員代表大會第四次會</div></div><!-- 第五塊內容（第三塊右側nav） --><div class="article_5 fudiv"><h2>快速鏈接</h2><p>COLLEGE NEW</p><img src="./img/more.png" alt=""><a href="#">更多</a></div><!-- 第六塊內容（第四塊右側article） --><div class="article_6 fudiv"><div>學校網站集群</div><div>協同辦公系統</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 版權所有： 平頂山技師學院 2015 地址：河南</div><div class="text2">省平頂山市湛河區湛河南路137號 郵編：467000 郵箱：wg8116@163.com 運維：</div><div class="text3">網絡信息中心 手機：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">學院微信</p><img class="img_2" src="./img/02.jpg" alt=""><p class="p_2">學院微博</p></div></footer></div> </body> </html>

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。