今天看到一个朋友秀自己编写自己学校的官网页面，我也手痒也做了一个，这次最大的失误就是到后边开始浮躁了，心急，还是敲得少。（赋源码）

这是官网的：

学校的有很多高度坍塌，但是它为什么是正常的我也不知道，它的二级菜单是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>

好了，今天分享到此为止，继续加油!!

静态网页-学校官网（附源码）相关推荐

JAVA毕业设计黑格伯爵国际英语贵族学校官网计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计黑格伯爵国际英语贵族学校官网计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计黑格伯爵国际英语贵族学校官网计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目 ...
（毕设2）esp8266+dht11+mysql+flask+echarts单片机温湿度数据采集网页实时可视化（附源码）
目录前言单片机端服务器端网页端成果展示源码下载前言作者:齐鲁师范学院18云计算孙浩 QQ:2535640842 开发环境:Linux,Arduino ide, PyCharm 2020 ...
这下终于可以方便地发表测试型网页代码了（附源码下载）
前言色彩斑斓的"马" 虽然利用插入代码功能可以很华丽的插入色彩斑斓的代码,但是就html(Xhtml)代码.js代码.css代码而言,我更喜欢想蓝色理想论坛中的那种:有个文本框, ...
HTML/JSP/CSS网页编写实例，附源码
最近在刚接触web前端,学习网页编写,虽然网上案例很多但是实战起来还是问题很多,经过不懈努力终于完成了一个简单的web页面,在此记录一下,分享源码大家共同学习. 最终效果如下: 如上图所示整个页面有5 ...
【橙子】Bootstrap--制作一个静态仿学校官网
作者的话对不起,我的学校如有侵权,立即联系我删除加了一个蹦迪背景,这样比较好看的出是盗版网站,哈哈哈效果展示已上传服务器源代码 <!DOCTYPE html> <html ...
使用opencv实现实例分割，一学就会|附源码
无论是从酒店房间接听电话.在办公里楼工作,还是根本不想在家庭办公室等情况,电话会议模糊功能都可以让会议与会者专注于自己,这样的功能对于在家工作并希望保护其家庭成员隐私的人特别有用. 为了实现这样的功能 ...
java计算机毕业设计黑格伯爵国际英语贵族学校官网MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计黑格伯爵国际英语贵族学校官网MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计黑格伯爵国际英语贵族学校官网MyBatis+系统+LW文档+源码+调试部署本源 ...
java计算机毕业设计黑格伯爵国际英语贵族学校官网源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计黑格伯爵国际英语贵族学校官网源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计黑格伯爵国际英语贵族学校官网源码+mysql数据库+系统+lw文档+部署本源码技 ...
62套儿童行业响应式Html5儿童慈善机构网站模板儿童公益组织企业官网模板儿童慈善CSS模板下载婴儿树儿童健康食品整站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响
62套儿童行业响应式Html5儿童慈善机构网站模板儿童公益组织企业官网模板儿童慈善CSS模板下载婴儿树儿童健康食品整站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响 ...
牛皮！竟然有大佬基于 Spring Boot + Vue 开发了一套网易云amp;QQ音乐（附源码）。。。...
来源:segmentfault.com/a/1190000021376934 # 前言虽然 B/S 是目前开发的主流,但是 C/S 仍然有很大的市场需求.受限于浏览器的沙盒限制,网页应用无法满足某些 ...

静态网页-学校官网（附源码）

今天看到一个朋友秀自己编写自己学校的官网页面，我也手痒也做了一个，这次最大的失误就是到后边开始浮躁了，心急，还是敲得少。（赋源码）

这是官网的：

学校的有很多高度坍塌，但是它为什么是正常的我也不知道，它的二级菜单是JS实现的，我只会用HTML+CSS，明天开始接触一下CSS，以后三个一起练习做网页。

我做的是这样的：

很多不够完美，而且越往后越沉不住心，本来能好好计算的值，就是不想算，就硬调，最后页脚那点也是为了省事直接用定位了。

CSS：

HTML:

好了，今天分享到此为止，继续加油!!

静态网页-学校官网（附源码）相关推荐

最新文章

热门文章