1.大top页面banner

1.首先是构造出基本的框架

框架为

右侧left_top和left_bottom嵌套在nav这个容器里

大概先框架为这个样子

接着将div定位到它应该在的位置

先移动banner，这里有个细节是我们用margin-top会出现子动父跟的效果，因为border重合(网络上很多解决方法)，但是我们可以用position属性去改变，banner为realtive相对定位，而title和hd为绝对定位absloute

设置了position后，我们就可以用tblr去设置位置进行定位了

————————————————————————————

那么具体代码为

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>郑州师范学院</title><!--    引入外部css--><link rel="stylesheet" href="./css/index.css">
</head>
<body><!--设置上面部分top大完整的div-->
<div class="top"><!--设置banner--><div class="banner"><!--        banner左logo--><div class="logo"></div><div class="nav"><!--        banner右上--><ul class="left_top"></ul><!--        banner右下--><ul class="left_bottom"></ul></div><!--        banner下的title--></div>
<!--    top下左边的小标题--><div class="title"></div>
<!--    top最下方的切换点--><div class="hd"></div></div>
</body>
</html>

/*清除默认边距*/
* {margin: 0;padding: 0;
}/*设置大top的大小*/
.top {width: 100%;height: 600px;background-color: darkseagreen;
}/*设置大top下的banner样式*/
.top > .banner {height: 110px;width: 1200px;background-color: red;margin: 0 auto;top: 60px;position: relative;
}/*大top下的title样式*/
.title {height: 45px;width: 90px;background-color: chartreuse;top: 470px;position: absolute;
}
/*大top下的hd*/
.hd{width: 100%;height: 40px;background-color: aquamarine;top: 560px;position: absolute;
}/*设置banner下的样式*/
/*banner下的logo样式*/
.banner > .logo {width: 25%;height: 100%;background-color: royalblue;float: left;
}/*banner下的nav样式*/
.banner > .nav {width: 75%;height: 100%;background-color: #ffc400;float: left;
}/*nav下的上列表样式*/
.nav > .left_top {height: 70px;width: 100%;background-color: rebeccapurple;
}/*nav下的下列表样式*/
.nav > .left_bottom {height: 40px;width: 100%;background-color: rosybrown;
}

的

分别对div进行定位后的效果

2.对内容进行补充

logo

我们采用img标签即可

<div class="logo"><img src="./images/logo%20(1).png" alt="logo">
</div>

css样式，其实也简单，无非就是给img加上padding去移动位置，而logo这个div设置box-sizing属性，防止撑大div即可

.banner > .logo {width: 25%;height: 100%;background-color: #a63632;float: left;box-sizing: border-box;
}
.logo>img{padding: 20px 22px;
}

nav

第二个我们写nav

这个其实是banner中最复杂的，每一个li标签中都是风格相同的a标签

那么我们先写出一个包含a标签的li再调整样式，然后copy即可

这个实现还是比较简单的，只需我们给每一个li设置宽高样式再设置margin-top和margin-left即可

前提还是将这几个包裹到容器里

title

这个很简单，只实现单个样式的话

伪类实现hd切换banner背景图片和title文字

它官网是用js自动定时切换的，当然鼠标点击上去也会有切换样式的效果应该也是用的js。

那么用伪类实现，比较繁琐。需要单独定义每一个id。so不写了

2.bottom页面构造

那么首先是一个大的bottom包裹

接着将页面分为bottom_left bottom_center bottom_right 三个div

剩下的拿一个举例子比如bottom_left 分为bottom_left_top bottom_left_bottom

接着细分样式即可，那么我们先构造出大概的样式

先把三个框搞出来，并设置好间距

那么再对每个框里的div继续搞出来也可以搞一个框填充内容再下一个。那么使用这一种即可

bottom_left内容构造

那么我们先构造出bottom_left_top 和bottom_left_bottom 这两个div

上面bottom_left_top

继续老步骤先构造出布局

可以看到同样也是很多div堆积在一起，我们同样先构造出框架

我就不填充色块了，直接填充内容了。

。。。还是先填充色块，构造出样式再补充内容，不然布局其实很混乱

总之最终效果

下面bottom_left_bottom

这次我们的思路可以是给先构造容纳img的div和另一个div然后float:left

再将另一个容器里面分为上下两个容器，然后就简单了。

        <div class="bottom_left_bottom"><div class="icon_logo"><img src="./images/weibo.png" alt="微博图标"></div><div class="logo_info"><div class="Name"><a href="#">@郑州师范学院微博</a><span>4月01日 14:09</span></div><div class="weibo_info"><p>#欢乐郑师# 来自郑师树上的小插画，被食堂放的《甄嬛传》洗脑了吧</p><a href="#">+关注</a></div></div></div>

/*设置bottom_left_bottom的样式*/
.bottom > .bottom_left > .bottom_left_bottom {width: 100%;height: 101px;border: 1px solid #bdcadc;
}/*设置bottom_left_bottom下的样式*/
.bottom_left_bottom > .icon_logo {height: 100%;width: 20%;float: left;
}.bottom_left_bottom > .icon_logo > img {margin: 25px 27px;
}.bottom_left_bottom > .logo_info {height: 100%;width: 80%;float: left;
}/*logo_info下的样式*/
.logo_info>.Name{width: 100%;height: 50%;padding-top: 17px;box-sizing: border-box;
}
.logo_info>.Name>a{text-decoration: none;color: #ae1c1c;font-size: 16px;
}
.logo_info>.Name>span{padding-left: 173px;color: #ae1c1c;
}

bottom_center内容构造

首先上面部分直接修改字体就行，宽度继承父亲的即可。而下面的高基本都可以抄第一个

那么我们还是先把框架色块搞出来

那么对内容进行填充即可

<!--bottom中间元素-->
<div class="bottom_center"><!--        bottom_center的上面--><div class="bottom_center_top"><div class="bottom_center_title"><h3>通知公告</h3><a href="#">更多</a></div><ul class="bottom_center_list"><!--                第一个li--><li><div class="time_icon"><span class="day">31</span><span class="ym">2023-03</span></div><div class="icon_info"><span class="source">国际教育学院</span><br><span class="notice_name"><a href="#">关于开展专科层次中外合作办学年度报告</a></span></div></li><!--                第二个li--><li><div class="time_icon"><span class="day">30</span><span class="ym">2022-11</span></div><div class="icon_info"><span class="source">党政办公室</span><br><span class="notice_name"><a href="#">郑州师范学院2022年信息公开年度报</a></span></div></li><!--                第三个li--><li><div class="time_icon"><span class="day">29</span><span class="ym">2022-11</span></div><div class="icon_info"><span class="source">党政办公室</span><br><span class="notice_name"><a href="#">中共郑州师范学院委员会关于巡视整改情</a></span></div></li><!--                第四个li--><li><div class="time_icon"><span class="day">14</span><span class="ym">2022-11</span></div><div class="icon_info"><span class="source">佚名</span><br><span class="notice_name"><a href="#">2022年中外合作办学评估信息公示</a></span></div></li><!--                第五个li--><li><div class="time_icon"><span class="day">08</span><span class="ym">2022-09</span></div><div class="icon_info"><span class="source">中心城市研究院</span><br><span class="notice_name"><a href="#">关于举办第五届国家中心城市建设高层论</a></span></div></li><!--                第六个li--><li><div class="time_icon"><span class="day">09</span><span class="ym">2022-05</span></div><div class="icon_info"><span class="source">佚名</span><br><span class="notice_name"><a href="#">中外合作办学本科层次2021年报公示</a></span></div></li></ul></div><!--        bottom_center的下面--><div class="bottom_center_bottom"><div class="icon_a"><a href="#">招标公告</a></div><ul class="bottom_center_bottom_list"><!--                第一个li--><li><a href="#">离退休人员2023年生日慰问品(蛋糕提货</a><span>03-28</span></li><!--第二个li--><li><a href="#">中小学生资格考试面试租赁设备采购项目中</a><span>03-28</span></li><!--                第三个li--><li><a href="#">离退休人员2023年生日慰问品（蛋糕提货券）</a><span>03-15</span></li><!--                第四个li--><li><a href="#">中小学教师资格考试面试租赁设备采购项目</a><span>03-15</span></li></ul></div></div>

/*bottom_center的样式*/
.bottom > .bottom_center {height: 510px;width: 340px;float: left;margin: 20px 20px;
}
.bottom_center_top{border: 1px solid #bdcadc;
}
/*bottom_center_title下的样式*/
.bottom_center_title{width: 100%;height: 49px;background-color: #ffffff;border-bottom: 3px solid #9b4649;
}
.bottom_center_title > h3 {height: 100%;width: 25%;float: left;color: #333;padding: 10px 27px;background: url("../images/TitleIcon.png") no-repeat 11px 18px;
}
.bottom_center_title > a {text-decoration: none;color: #ae1c1c;;float: right;height: 100%;width: 24%;padding-left: 46px;padding-top: 13px;box-sizing: border-box;background: url("../images/More.png") no-repeat 35px 19px;
}
/*bottom_center_list下的样式*/
.bottom_center_list{height: 340px;width: 100%;border: 1px solid #bdcadc;list-style: none;
}
.bottom_center_list>li{width: 88%;margin-left: 20px;margin-right: 20px;height: 13%;margin-top: 6px;float: right;
}
.bottom_center_list>li>.time_icon{height: 100%;width: 53px;float: left;background: url("../images/TimeIcon.png") no-repeat 0px 1px;
}
.bottom_center_list>li>.time_icon>.day{font-size: 15px;padding: 16px;color: #ffffff;
}
.bottom_center_list>li>.time_icon>.ym{font-size: 13px;
}
.bottom_center_list>li>.icon_info{height: 100%;width: 243px;float: left;font-size: 13px;padding-left: 8px;box-sizing: border-box;
}
.bottom_center_list>li>.icon_info>.source{font-size: 13px;color: #999999;
}
.bottom_center_list>li>.icon_info>.notice_name>a{text-decoration: none;color: #4c4c4c;
}
.bottom_center_list>li>.icon_info>.notice_name>a:hover{color: #ae1c1c;
}/*设置bottom_center_bottom的样式*/
.bottom_center_bottom{margin-top: 17px;width: 100%;height: 103px;float: right;
}
/*bottom_cneter_bottom下的样式*/
.bottom_center_bottom>.icon_a{height: 100%;width: 9%;background-color: #af4a46;padding-left: 7px;padding-top: 8px;box-sizing: border-box;float: left;
}
.bottom_center_bottom>.icon_a>a{text-decoration: none;color: #ffffff;
}
.bottom_center_bottom>.icon_a:hover {background-color: #ae1c1c;
}
.bottom_center_bottom_list{height: 100%;width: 85%;margin-left: 18px;float: left;list-style: none;border: 1px solid #bdcadc;
}
.bottom_center_bottom_list>li{height: 25%;width: 100%;
}
.bottom_center_bottom_list>li>a{text-decoration: none;width: 75%;font-size: 12px;color: #333333;box-sizing: border-box;
}
.bottom_center_bottom_list>li>a:hover{color: #ae1c1c;
}
.bottom_center_bottom_list>li>span{width: 25%;font-size: 12px;color: #999999;padding-left: 245px;position:relative;top: -21px;display: inline-block;/*这里用position会覆盖掉a标签，导致无法点击到*/
}

bottom_right内容构造

这一块内容就比较简单了，同样我们先搞出来色块样式设置好间距，再填充内容

/*bottom_right_bottom下的样式*/
.bottom_right_bottom{border: 1px solid #bdcadc;margin-top: 16px;height: 103px;width: 100%;background-color:#ffffff;float: right;
}
.bottom_right_bottom>.wxicon{float: left;height: 100px;width: 98px;background: url("../images/weixin.png") no-repeat 10px 30px;
}
.bottom_right_bottom>.wx_info{float: left;height: 100%;width: 173px;
}
.wx_info>.wx_name{padding-top: 20px;width: 173px;height: 48px;
}
.wx_info>.wx_name>p{font-size: 16px;color: #08995c;
}
.wx_info>.wxa{margin-top: -17px;width: 70px;height: 26px;background-color: #08995c;
}
.wx_info>.wxa>a{text-decoration: none;color: #ffffff;font-size: 14px;padding-left: 14px;line-height: 26px;
}

<!--bottom_right_bottom下的样式-->
<div class="bottom_right_bottom"><div class="wxicon"></div><div class="wx_info"><div class="wx_name"><p>@微信公众号</p></div><div class="wxa"><a href="#">+关注</a></div></div>
</div>

3.footer页脚设置

这一块就比较容易了，没有复杂的样式。我们按照常规操作，先构造出色块再补充内容即可

<!--设置版权信息栏目footer-->
<div class="footer"><div class="copy"><p>郑州师范学院 版权所有</p><p>地址: 中国 河南 郑州惠济区英才街16号 邮编: 450044</p><p>Copyright ©2023ZZNU. All Rights Reserved</p></div><div class="motto"><img src="./images/motto.png" alt="格言"></div>
</div>

/*设置footer页脚样式*/
.footer{float: right;width: 100%;height: 119px;margin-top: -30px;background: #e0e0e0;border-top: 1px solid #cccccc;
}
.footer>.copy{float: left;width: 600px;height: 70px;margin-top: 26px;margin-left: 133px;
}
.footer>.copy>p{padding-top: 5px;color: #666666;font-size: 12px;
}
.footer>.motto{float: left;width: 600px;height: 119px;
}
.footer>.motto>img{padding-top: 42px;padding-left: 306px;
}

完整代码和文件打包放到网盘：

链接：https://pan.baidu.com/s/1K16CDR1tzAy_XC4FFmvLTA?pwd=Aiyf
提取码：Aiyf

zznu的小伙伴，请不要直接copy'哦，里面有两个隐藏的小bug哈哈哈哈

HTML学习之郑州师范学院主页样式实现相关推荐

三郎前端特效学习源代码：图片主页轮播组件
三郎前端特效学习源代码:图片主页轮播组件简单介绍效果图源代码 html部分 js部分 css部分简单介绍各大网站都比较常用的主页轮播组件可以自己改改就能用效果图源代码 html部分 & ...
郑州师范计算机基础知识,郑州师范学院2015年聋人本科单招考试计算机基础考试说明...
易贤网网校上线了! 网校开发及拥有的课件范围涉及公务员.财会类.外语类.外贸类.学历类. 职业资格类.计算机类.建筑工程类.等9大类考试的在线网络培训辅导. 郑州师范学院2015年聋人本科单招考试计算 ...
2021年郑州师范学院成人函授本科招生专业（新资讯）
2021年郑州师范学院成人函授本科招生专业.2021年郑州师范学院成人专升本考试时间.2021年郑州师范学院成人高考招生录取分数线.2021年郑州师范学院成人本科招生报名中!! 郑州师范学院位于黄河之 ...
amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
amazeui学习笔记--css（基本样式2）--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
amazeui学习笔记--css（基本样式4）--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
郑州师范学院计算机科学与技术代码,郑州师范学院—VR虚拟仿真实验中心
客户背景: 郑州师范学院地处河南,是经教育部批准建立的一所全日制普通本科院校,是"国家级语言文字规范化示范校"."全国文明单位"."河南省文明标兵学校 ...
郑州师范学院计算机实验室,郑州师范学院---VR虚拟仿真实验中心
郑州师范学院---VR虚拟仿真实验中心客户背景: 郑州师范学院地处河南,是经教育部批准建立的一所全日制普通本科院校,是"国家级语言文字规范化示范校"."全国文明单位&q ...

HTML学习之郑州师范学院主页样式实现