工字形布局完成
效果
代码部分
在这里插入代码片
```<!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>
