首页制作三
Main办学项目布局设计
目标效果图
布局设计
- 办学项目导航栏（红色框）
- 文字标题
- 跳转链接
- 四个小卡片（黄色框）
- 大卡片（绿色框）
布局demo图
template代码
<el-main>
<div class="studyProject">
<div class="studyProject_nav" style="height: 60px;">
1
</div>
<div style="display: flex;justify-content: space-between;">
<div class="renovation-list"style="width: 66%;background-color: yellow;height: 500px;">
2
</div>
<div class="big" style="margin-top: 12px; margin-bottom: 12px;background-color: green;height: 488px;width: 350px;">
3
</div>
</div>
</div>
</el-main>
style代码
.studyProject{
width: 75%;
height:600px;
margin:0 auto;
}
办学项目导航栏
文字标题
<span style="font-size: 30px;font-weight: bold">办学项目</span>
跳转链接
<p style="direction: rtl;"><el-link href="" type="info"><el-icon><DArrowRight/></el-icon>更多</el-link></p>
 是作为空格
target=“_blank” 表示在新窗口或新标签页中打开链接
合并
使用用flex布局合并
template代码
<div class="studyProject_nav">
<span style="font-size: 30px;font-weight: bold">办学项目</span>
<p style="direction: rtl;"><el-link href="" type="info"><el-icon><DArrowRight/></el-icon>更多</el-link></p>
</div>
style代码
.studyProject_nav{
display: flex;
justify-content: space-between;
}
四个小卡片
基础设置
这里采用无序列表来固定这四个小卡片的位置（下面三个li标签与第一个是一样的）
图片上的小链接用z-index可以悬浮在最上面
template代码
<div style="display: flex;justify-content: space-between;">
<div class="renovation-list"style="width: 66%;">
<ul>
<li>
<div class="card">
<a href="">
<img src="../assets/index_img/item/item-1.jpg">
<div style="position: absolute; top: 70%; text-align: left; ">
<span style="background-color: transparent; padding: 10px;color: white; font-size: 22px; font-weight: bold">学历与能力提升</span>
</div>
</a>
<div style="position: absolute; top: 85%; text-align: left;z-index: 100; padding-left: 10px;">
<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">研究生考试</span></el-link>
<span style="color: white;"> | </span>
<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">公务员考试</span></el-link>
<span style="color: white;"> | </span>
<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">英语四六级</span></el-link>
<span style="color: white;"> | </span>
<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">托福雅思</span></el-link>
</div>
</div>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
style代码
.card{
position: relative;
}
/**
* .renovation-list ul - 页面重构列表的无序列表样式
* 用于设置列表的布局和样式，使列表项以灵活的方式排列，每个列表项有适当的间距，并且没有默认的列表符号。
*/
.renovation-list ul{
display: flex; /* 使用flex布局使得子元素沿一行排列 */
flex-wrap: wrap; /* 允许子元素换行，以适应不同宽度的容器 */
gap: 20px; /* 设置子元素之间的间距 */
list-style-type: none; /* 移除列表项的默认符号 */
padding-left: 0%; /* 移除左侧内边距 */
}
/**
* .renovation-list ul li - 页面重构列表的列表项样式
* 用于设置每个列表项的宽度和位置，以适应两列布局，并为后续的样式提供相对定位。
*/
.renovation-list ul li{
width: calc(100%/2 - 20px); /* 计算每个列表项的宽度，以实现两列布局，间距已考虑在内 */
position: relative; /* 为列表项设置相对定位，以便于相对其位置设置其他元素 */
}
进阶特效
template代码
<div style="display: flex;justify-content: space-between;">
<div class="renovation-list"style="width: 66%;">
<ul>
<li>
<div class="card">
<div class="renovation-card">
<a href="">
<div class="renovation-img">
<img src="../assets/index_img/item/item-1.jpg">
</div>
<div style="position: absolute; top: 70%; text-align: left; ">
<span style="background-color: transparent; padding: 10px;color: white; font-size: 22px; font-weight: bold">学历与能力提升</span>
</div>
<div class="renovation-hover">
<span>查看详细</span>
</div>
</a>
</div>
<div style="position: absolute; top: 85%; text-align: left;z-index: 100; padding-left: 10px;">
<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">研究生考试</span></el-link>
<span style="color: white;"> | </span>
<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">公务员考试</span></el-link>
<span style="color: white;"> | </span>
<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">英语四六级</span></el-link>
<span style="color: white;"> | </span>
<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">托福雅思</span></el-link>
</div>
</div>
</li>
</ul>
</div>
</div>
style代码
/**
* .renovation-img 样式定义
* 用于装修图片的展示，具有固定宽度和高度，以及隐藏溢出内容的特性。
*/
.renovation-img{
width: 100%; /* 设置宽度占父元素100% */
height: 220px; /* 设置固定高度为220px */
overflow: hidden; /* 隐藏溢出内容 */
}
/**
* .renovation-img 内部 img 标签的样式定义
* 保证图片按比例填充整个 .renovation-img 区域，且具有过渡效果。
*/
.renovation-img img{
width: 100%; /* 设置图片宽度占父元素100% */
height: 100%; /* 设置图片高度占父元素100% */
object-fit: cover; /* 使图片按比例填充整个元素区域，不裁剪图片 */
transition: all 0.5s; /* 添加过渡效果，使图片变化更平滑 */
}
/* 卡片阴影效果 */
.renovation-list ul li:hover{
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
/* 卡片放大效果 */
.renovation-list ul li:hover .renovation-card img{
transform: scale(1.2);
}
/**
* .renovation-hover 样式定义
* 用于给元素添加一个绝对定位的覆盖层，常用于装修或焕新效果中。
* 该覆盖层初始不透明度为0，通过鼠标悬停等交互改变其不透明度，实现视觉上的变化。
*
* 属性说明：
* position: absolute; - 绝对定位，使覆盖层相对于其最近的非静态定位祖先元素定位。
* top: 0; - 距离顶部的位置为0。
* width: 100%; - 宽度为100%，占据父元素的整个宽度。
* height: 100%; - 高度为100%，占据父元素的整个高度。
* z-index: 99; - z轴顺序为99，确保覆盖层位于其他元素之上。
* opacity: 0; - 初始不透明度为0，不可见。
*/
.renovation-hover{
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
opacity: 0;
}
/**
* 当鼠标悬停在.renovation-list下的li元素上时，改变.renovation-hover的样式。
* 主要用于扩展或展示更多的信息或操作。
*/
.renovation-list ul li:hover .renovation-hover{
width: 100%; /* 宽度扩展至100% */
height: 220px; /* 高度设置为220px */
opacity: 1; /* 透明度设为不透明 */
background-color: rgba(0, 0, 0, 0.4); /* 背景颜色为不透明的黑色 */
}
/**
* 定义一个名为.renovation-hover的伪元素样式，主要用于列表项的悬停效果。
*/
.renovation-hover::before{
content: ''; /* 伪元素的内容为空 */
position: absolute; /* 伪元素的定位方式为绝对定位 */
inset: 0; /* 伪元素的上下左右边距都为0，相当于top、right、bottom、left都为0 */
margin: auto; /* 自动调整伪元素的外边距，使其在父元素中居中 */
width: 0; /* 伪元素的初始宽度为0 */
height: 0; /* 伪元素的初始高度为0 */
}
/**
* 当鼠标悬停在.renovation-list下的li元素上时，改变.renovation-hover伪元素的样式，
* 以创造出一个悬停效果。
*/
.renovation-list ul li:hover .renovation-hover::before{
content: ''; /* 同上，保持内容为空 */
width: 60%; /* 设置伪元素的宽度为父元素宽度的60% */
height: 35%; /* 设置伪元素的高度为父元素高度的35% */
border: 1px solid #fff; /* 给伪元素添加一个1px的白色边框 */
}
/**
* 定义一个名为.renovation-hover的元素内的<span>标签的样式，此样式在鼠标悬停时生效。
*/
.renovation-hover span{
color: #fff; /* 设置文本颜色为白色 */
position: absolute; /* 设置定位模式为绝对定位 */
left: 50%; /* 将元素左边缘设置在父元素的中心 */
top: 50%; /* 将元素顶部设置在父元素的中心 */
transform: translate(-50%, 20px); /* 调整元素的位置，使其中心对准父元素的中心，并在垂直方向上偏移20px */
}
/**
* 当鼠标悬停在.renovation-list ul li元素上时，修改.renovation-hover内的<span>标签的样式。
*/
.renovation-list ul li:hover .renovation-hover span{
transform: translate(-50%, -50%); /* 调整元素的位置，使它精确地对准父元素的中心 */
transition: all 0.2s; /* 添加一个0.2秒的过渡效果，应用于所有属性的变化 */
}
大卡片
这里和小卡片其实差不多，但是因为尺寸和位置的原因，有一些不同
template代码
<div class="big" style="margin-top: 12px; margin-bottom: 12px;">
<div class="card">
<div class="renovation-card">
<a href="">
<div class="renovation-imga">
<img src="../assets/index_img/item/item-1.jpg"/>
</div>
<div style="position: absolute; top: 83%; text-align: left; ">
<span style="background-color: transparent; padding: 10px;color: white; font-size: 22px; font-weight: bold">其他项目</span>
</div>
<div class="renovation-hover">
<span>查看详细</span>
</div>
</a>
</div>
<div style="position: absolute; top: 90%; text-align: left;z-index: 100;padding-left: 10px; ">
<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">中小学生冬夏令营</span></el-link>
<span style="color: white;"> | </span>
<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">高尔夫兴趣班</span></el-link>
<span style="color: white;"> | </span>
<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">运动培训班</span></el-link>
</div>
</div>
</div>
style代码
.renovation-imga{
width: 400px;
height: 467px;
overflow: hidden;
}
.renovation-imga img{
width: 100%;
height: 100%;
object-fit: fill;
transition: all 0.5s;
}
.big:hover .renovation-hover{
display: flex;
align-items: center;
padding-top: 10px;
width: 400px;
height: 460px;
opacity: 1;
background-color: rgba(0, 0, 0, 0.4);
}
.big:hover .renovation-hover::before{
content: '';
width: 60%;
height: 35%;
border: 1px solid #fff;
}
.big:hover .renovation-hover span{
transform: translate(-50%, -50%);
transition: all 0.2s;
}
最终效果图
扫一扫
1295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
