学校管网的仿写

工字形布局完成

效果
在这里插入图片描述

代码部分

在这里插入代码片
```<!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>
    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;

  }
</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>
            
            
      
       
    </section>
    <footer>

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/557832.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！