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