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

原创已于 2024-12-18 19:18:33 修改 · 121 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

于 2023-04-14 20:26:36 首次发布

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 ©
            2023
            ZZNU. 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哈哈哈哈