学校管网的仿写

2201_75456772
已于 2024-04-22 01:03:19 修改
阅读量300
点赞数 2
文章标签： css javascript 前端
于 2024-04-19 17:18:28 首次发布
本文链接：https://blog.csdn.net/2201_75456772/article/details/137971832
版权
工字形布局完成

效果
在这里插入图片描述
在这里插入图片描述
在这里插入代码片
```<!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>
<style>
  a {
  color: black;
  /* 如果需要去掉下划线可以加上下面这一行 */
  text-decoration: none;
}

    header {
    height: 653px;
    
}
.logo {
    height: 150px;
    background-color: #0a437e;
}
.log-box {
    width: 1300px;
    height: 150px;
    margin: auto;
    
}
.log-box > img {
    margin-top: 37px;
}
.logo-right {
    width: 400px;
    height: 150px;
    
    float: right;
}


header > nav {
    border-top: 1px solid #426c98;
    height: 50px;
    background-color: #0a437e;
}
.banner, .banner > img{
    height: 450px;
    width: 100%;
}


section {
    height: 1800px;
}

footer {
    height: 450px;
    background-color: #0a437e;
}
.search-container {
    border: 1px solid grey;
    position: relative;
    display: inline-block;
    width: 300px; /* 调整搜索框的宽度 */
    height: 40px; /* 设置搜索框的高度 */
    border-radius: 4px; /* 可选：添加边框圆角 */
    overflow: hidden;
  }

  .search-box {
    
    width: calc(100% - 40px); /* 让搜索框充满容器，减去图标的宽度 */
    height: 100%; /* 让搜索框充满容器 */
    padding-right: 40px; /* 留出空间放置放大镜图标 */
    
    
    border-radius: 5px; /* 可选：添加边框圆角 */
    background-color: #0a437e; /* 蓝色背景 */
    color: rgb(246, 242, 242); /* 设置文本颜色为黑色 */
    line-height: 40px; /* 文字垂直居中 */
  }

  .search-icon {
    position: absolute;
    right: 0; /* 将图标放置在搜索框的最右侧 */
    top: 0;
    height: 100%; /* 图标的高度与搜索框相同 */
    width: 40px; /* 图标的宽度 */
    background-color:  #7e0a21; /* 与搜索框背景相同 */
    color: black; /* 设置图标颜色为白色 */
    text-align: center; /* 让图标居中 */
    line-height: 40px; /* 让图标内的内容垂直居中 */
  }
  .lr{
    
    height: 50px;
    color: white;
    line-height: 35px;
  }

  .container {
    display: flex;
    margin: -1px; /* 取消默认边距，使子元素之间没有空隙 */
    
    justify-content: center;
    margin-left: 133px;
    width: 1200px;
  }

  .item {
   
    width: calc(100% / 7); /* 计算每个子元素的宽度 */
    box-sizing: border-box; /* 设置盒子模型为边框盒模型，确保边框宽度不会撑大盒子 */
    padding: 10px; /* 设置内边距 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    color: white;
    cursor: pointer; /* 设置鼠标样式为手型 */
  }
   /* 下拉菜单样式 */
  .dropdown-content {
    display: none; /* 默认隐藏 */
    position: absolute; /* 绝对定位 */
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    top: 100%; /* 下拉菜单相对于父元素底部定位 */
    left: 0; /* 下拉菜单左对齐 */
    margin-top: 5px; /* 增加一些间距，避免遮挡 */
  }
   /* 鼠标悬停时显示下拉菜单 */
   .item:hover .dropdown-content {
    display: block;
  }

  /* 下拉菜单项样式 */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  /* 下拉菜单项悬停样式 */
  .dropdown-content a:hover {
    background-color: #f1f1f1;
  }
  .sbox{
    margin: 0;
    display: inline-block;
    margin-left: 100px;
    width: 300px;
    
    height: 320px;
  }
  .sbox1{
    margin: 0;
    display: inline-block;  
    width: 300px;
   
    height: 320px;
  }
  .title1{
    margin-left: 100px;
    width: 1300px;
    
    font-size: 30px;
  }
  .text1{
    font-weight: bold; /* 设置字体加粗 */
    color: blue; /* 设置字体颜色为蓝色 */
  }
  .text2{
    opacity: 0.5; /* 设置字体透明度为50% */
  }
  .ul{
    max-width: 100%;
    height: auto;
  }
  .sbox2{
    
    display: inline-block;
    width: 750px;
    height: 320px;

    
  }
  
   
    
  .s2b{
    
    width: 1460px;
    height: 460px;
    background-color:#d1deec;
  }
  .s2{
    display: inline-block;
   
    width: 440px;
    height: 460px;
    margin-left: 100px;
  }
  .ss2{
    display: inline-block;
    
    width: 440px;
    height: 460px;
    

  }
  .title2{
   
    width: 440px;
    height: 60px;
    font-size: 30px;
  }
  .s21{
    margin: 0;
    display: inline-block;
    width: 150px;
    height: 150px;
   
  }
  .s21 img {
        max-width: 100%; /* 图片最大宽度为容器宽度 */
        max-height: 100%; /* 图片最大高度为容器高度 */
        display: block; /* 让图片成为块级元素 */
        margin: auto; /* 设置上下左右的外边距为auto */
    }
  .s22{
    
    float: right;
    display: inline-block;
    width: 280px;
    height: 150px;
    
    
  

  }
  .s23{
    
    display: inline-block;
   
    width: 340px;
    height: 230px;
  }
  .s24{
    float: right;
    display: inline-block;
    
    width: 90px;
    height: 230px;
  }
  .title3{
    float: right;
  }
  .s31{
    display: inline-block;
    
    width: 150px;
    height: 100px;
  }
  .s3 img {
    max-width: 100%; /* 图片最大宽度为容器宽度 */
        max-height: 100%; /* 图片最大高度为容器高度 */
        display: block; /* 让图片成为块级元素 */
        margin: auto; /* 设置上下左右的外边距为auto */
  }
  .s3t{
   
    display: inline-block;
    width: 270px;
    height: 100px;
    float: right;

  }
  .s32{
    
    display: inline-block;
   
    width: 340px;
    height: 340px;
  }
  
</style>
</style>
<body>
    <header>
        <div class="logo">
            <div class="log-box">
                <img src="img/logo.png" alt="">
                <div class="logo-right">
                    <div class="lr" >
                        学校邮箱 信息门户 信息公开 ENGLSH
                    </div>
                    
                    <div class="search-container">
                        <input type="text" placeholder="请输入关键字" class="search-box">
                        <div class="search-icon">
                            <i class="fas fa-search"></i>
                            <img src="img/发大镜2.png" alt="">
                        </div>
                      </div>
                </div>
            </div>
            
        </div>
        <nav>
            <div class="container">
                <div class="item">
                    学校概况
                    <div class="dropdown-content">
                      <a href="#">Option 1</a>
                      <a href="#">Option 2</a>
                      <a href="#">Option 3</a>
                    </div>
                </div>
                <div class="item">
                    机构设置
                    <div class="dropdown-content">
                      <a href="#">Option 1</a>
                      <a href="#">Option 2</a>
                      <a href="#">Option 3</a>
                    </div>
                </div>
                <div class="item">
                    师资队伍
                    <div class="dropdown-content">
                      <a href="#">Option 1</a>
                      <a href="#">Option 2</a>
                      <a href="#">Option 3</a>
                    </div>
                </div>
                <div class="item">
                    教育科研
                    <div class="dropdown-content">
                      <a href="#">Option 1</a>
                      <a href="#">Option 2</a>
                      <a href="#">Option 3</a>
                    </div>
                </div>
                <div class="item">
                    招生就业
                    <div class="dropdown-content">
                      <a href="#">Option 1</a>
                      <a href="#">Option 2</a>
                      <a href="#">Option 3</a>
                    </div>
                </div>
                <div class="item">
                    对外交流
                    <div class="dropdown-content">
                      <a href="#">Option 1</a>
                      <a href="#">Option 2</a>
                      <a href="#">Option 3</a>
                    </div>
                </div>
                <div class="item">
                    图书馆
                    <div class="dropdown-content">
                      <a href="#">Option 1</a>
                      <a href="#">Option 2</a>
                      <a href="#">Option 3</a>
                    </div>
                </div>
            
                
          </nav>
        <div class="banner">
            <img src="img/banner1.jpg" alt="">
        </div>
    </header>
    <section>
        <div class="title1">
            西工要闻
        </div>
        
        <div class="sbox">
            <div>
                <img src="img/s1.png" alt="">
            </div>
            <div class="text1">陕西省委军民融合办尹清辽一行莅临我校调研交流</div>
            <div class="text2"><p>4月16日，陕西省委军民融合办尹清辽一行莅临我校参...</p></div>
            <div class="text2">2024-04-17</div>
        </div>
        
        </div>
        <div class="sbox1">
            <div>
                <img src="img/s2.png" alt="">
            </div>
            <div class="text1">陕西省委军民融合办尹清辽一行莅临我校调研交流</div>
            <div class="text2"><p>4月16日，陕西省委军民融合办尹清辽一行莅临我校参...</p></div>
            <div class="text2">2024-04-14</div>
        </div>
        <div class="sbox2">
            <div >
                <img src="img/ul2.png" alt="" class="ul">
            </div>
        </div>
        <div class="s2b">

        
        <div class="s2">
          <div class="title2">
            校园动态
          </div>
          
          
          <div class="s21">
            <img src="img/s21.png" alt="">
          </div>
          <div class="s22">
            <a href="#">
              <br>
              勇往“职”前，助梦远航——我校首届就业嘉年华活动圆满
              
            </a>
            <br><br><br>
            <p class="text2">2024 04-19</p>
          </div>
          <div class="s23">
            <ul>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
            </ul>
          </div>
          <div class="s24">
            <ul>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
            </ul>
          </div>
         
        </div>
        <div class="ss2">
          <div class="title2">
            科学科研
          </div>
          
          
          <div class="s21">
            <img src="img/S22.png" alt="">
          </div>
          <div class="s22">
            <a href="#">
              <br>
              勇往“职”前，助梦远航——我校首届就业嘉年华活动圆满
              
            </a>
            <br><br><br>
            <p class="text2">2024 04-19</p>
          </div>
          <div class="s23">
            <ul>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
            </ul>
          </div>
          <div class="s24">
            <ul>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
            </ul>
          </div>
        </div>
        <div class="ss2">
          <div class="title2">
            交流合作
          </div>
          
          
          <div class="s21">
            <img src="img/s23.png" alt="">
          </div>
          <div class="s22">
            <a href="#">
              <br>
              勇往“职”前，助梦远航——我校首届就业嘉年华活动圆满
              
            </a>
            <br><br><br>
            <p class="text2">2024 04-19</p>
          </div>
          <div class="s23">
            <ul>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
              <br>
              <li>
                <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
              </li>
            </ul>
          </div>
          <div class="s24">
            <ul>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
              <li>
                <p class="text2">2024 04-19</p>
              </li>
              <br>
            </ul>
          </div>
        </div>
      </div>
      <div class="s2">
      <div class="title2">
        媒体西工

      </div>
      
      
      <div class="s32">
        <ul>
          <li>
            <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
          </li>
          <br>
          <br>
          <li>
            <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
          </li>
          <br>
          <br>
          <li>
            <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
          </li>
          <br>
          <br>
          <li>
            <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
          </li>
          <br>
          <br>
          <li>
            <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
          </li>
          <br>
          <br>
          <li>
            <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
          </li>
        </ul>
      </div>
      <div class="s24">
        <ul>
          <li>
            <p class="text2">2024 04-19</p>
          </li>
          <br>
          <br>
          <li>
            <p class="text2">2024 04-19</p>
          </li>
          <br><br>
          <li>
            <p class="text2">2024 04-19</p>
          </li>
          <br><br>
          <li>
            <p class="text2">2024 04-19</p>
          </li>
          <br><br>
          <li>
            <p class="text2">2024 04-19</p>
          </li>
          <br><br>
          <li>
            <p class="text2">2024 04-19</p>
          </li>
          <br>
        </ul>
      </div>
    </div>
    <div class="ss2">
      <div class="title2">
        身边典型
      </div>
      <br>
      <div class="s31">
        <img src="img/s3.png" alt="">
      </div>
      <div class="s3t">
          <p>
            十佳大学生|孙一丁：泰山不让土壤，故能成其大
          </p>
      </div>
      <div class="s31">
        <img src="img/s32.png" alt="">
      </div>
      <div class="s3t">
          <p>
            十佳大学生|孙一丁：泰山不让土壤，故能成其大
          </p>
      </div>
      <div class="s31">
        <img src="img/s33.png" alt="">
      </div>
      <div class="s3t">
          <p>
            十佳大学生|孙一丁：泰山不让土壤，故能成其大
          </p>
      </div>
    </div>
    <div class="ss2">
      <div class="title2">
        媒体西工

      </div>
      
      
      <div class="s32">
        <ul>
          <li>
            <a href="#">&nbsp;关于开展西安工业大学2023年春季运动会.</a>
          </li>
          <br>
          <br>
          <li>
            <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
          </li>
          <br>
          <br>
          <li>
            <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
          </li>
          <br>
          <br>
          <li>
            <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
          </li>
          <br>
          <br>
          <li>
            <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
          </li>
          <br>
          <br>
          <li>
            <a href="#">&nbsp;我校开讲中国国际大学生创新大赛宣讲暨“双</a>
          </li>
        </ul>
      </div>
      <div class="s24">
        <ul>
          <li>
            <p class="text2">2024 04-19</p>
          </li>
          <br>
          <br>
          <li>
            <p class="text2">2024 04-19</p>
          </li>
          <br><br>
          <li>
            <p class="text2">2024 04-19</p>
          </li>
          <br><br>
          <li>
            <p class="text2">2024 04-19</p>
          </li>
          <br><br>
          <li>
            <p class="text2">2024 04-19</p>
          </li>
          <br><br>
          <li>
            <p class="text2">2024 04-19</p>
          </li>
          <br>
        </ul>
      </div>
    </div>
      <div class="s4b">
        <br>
        <div class="title1">
          学术报告
        </div>
        <hr>
        <br>
        <style>
           .s4b{
           
              width: 1460px;
             height: 350px;
             background-color: #d1deec;
  }
          .s4{
            margin-left: 100px;
            display: inline-block;
            
            width: 300px;
            height: 230px;
            background-color: #f1f1f1;

          }
          .ss4{
            margin-left: 30px;
            display: inline-block;
           
            width: 300px;
            height: 230px;
            background-color: #f1f1f1;

          }
          .s41{
           
            width: 200px;
            height: 50px;
          }
          .s4t1{
            margin-left: 15px;
            font-size: 40px;
          }
          .s4t2{
            
            font-size: 20px;
          }
          .s4t3{
            
            font-size: 13px;
            opacity: 0.7;
          }
          
          .s42{
            margin-left: 15px;
            
            width: 250px;
            height: 50px;

          }
          .s43{
            margin-left: 15px;
            
            width: 250px;
            height: 25px;
          }
        </style>
        <div class="s4">
          <div class="s41">
            <span class="s4t1">19</span><span class="text2">2024-04</span>
          </div>
          <br>
          <div class="s42">
            <span class="s4t2">知行耕耘利用非线性和能量局部化提升智能系统性...</span>
          </div>
        <br>
          <div class="s43">
            <span class="s4t3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时间：4月20日 15：30  -16:30</span>
          </div>
          
          <div class="s43">
            <span class="s4t3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地址：工2：310</span>
          </div>
          
          <div class="s43">
            <span class="s4t3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;报告人Najib Kacem教授</span>
          </div>
        </div>
        <div class="ss4">
          <div class="s41">
            <span class="s4t1">19</span><span class="text2">2024-04</span>
          </div>
          <br>
          <div class="s42">
            <span class="s4t2">知行耕耘利用非线性和能量局部化提升智能系统性...</span>
          </div>
        <br>
          <div class="s43">
            <span class="s4t3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时间：4月20日 15：30  -16:30</span>
          </div>
          
          <div class="s43">
            <span class="s4t3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地址：工2：310</span>
          </div>
          
          <div class="s43">
            <span class="s4t3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;报告人Najib Kacem教授</span>
          </div>
        </div>
        <div class="ss4">
          <div class="s41">
            <span class="s4t1">19</span><span class="text2">2024-04</span>
          </div>
          <br>
          <div class="s42">
            <span class="s4t2">知行耕耘利用非线性和能量局部化提升智能系统性...</span>
          </div>
        <br>
          <div class="s43">
            <span class="s4t3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时间：4月20日 15：30  -16:30</span>
          </div>
          
          <div class="s43">
            <span class="s4t3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地址：工2：310</span>
          </div>
          
          <div class="s43">
            <span class="s4t3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;报告人Najib Kacem教授</span>
          </div>
        </div>
        <div class="ss4">
          <div class="s41">
            <span class="s4t1">19</span><span class="text2">2024-04</span>
          </div>
          <br>
          <div class="s42">
            <span class="s4t2">知行耕耘利用非线性和能量局部化提升智能系统性...</span>
          </div>
        <br>
          <div class="s43">
            <span class="s4t3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时间：4月20日 15：30  -16:30</span>
          </div>
          
          <div class="s43">
            <span class="s4t3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地址：工2：310</span>
          </div>
          
          <div class="s43">
            <span class="s4t3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;报告人Najib Kacem教授</span>
          </div>
        </div>

      </div>
      <style>
        .s5{
         
          width: 1460px;
          height: 140px;
        }
        .s51{
          
          width: 1460px;
          height: 30px;
          text-align: center;
          font-size: 20px;
        }
        .ss52{
          margin-left: 100px;
          display: inline-flex;
         
          width: 300px;
          height: 100px;
        }
        .s52{
          display: inline-flex;
          
          width: 300px;
          height: 100px;
        }
        .s52 img{
         
          max-width: 100%; /* 图片最大宽度为容器宽度 */
           max-height: 100%; /* 图片最大高度为容器高度 */
           display: block; /* 让图片成为块级元素 */
           margin: auto; /* 设置上下左右的外边距为auto */
  
        }
      </style>
      <div class="s5">
        <div class="s51">
          <span>西工专题</span>
        </div>
        <br>
        <div class="ss52">
          <img src="img/s51.png" alt="">
        </div>
        <div class="s52">
          <img src="img/s52.png" alt="">
        </div>
        <div class="s52">
          <img src="img/s53.png" alt="">
        </div>
        <div class="s52">
          <img src="img/s54.png" alt="">
        </div>

      </div>

     
       
    </section>
    <footer>

    </footer>
</body>
</html>