【Edu-Web开发日志三——首页制作三】

首页制作三

• Main办学项目布局设计
• • 目标效果图
  • 布局设计
• 办学项目导航栏
• • 文字标题
  • 跳转链接
  • 合并
• 四个小卡片
• • 基础设置
  • 进阶特效
• 大卡片
• 最终效果图
• Edu-Web系列开发日志目录
• • Edu-Web开发日志一——首页制作一
  • Edu-Web开发日志二——首页制作二

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>

&nbsp是作为空格
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;">&nbsp|&nbsp</span>
						<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">公务员考试</span></el-link>
						<span style="color: white;">&nbsp|&nbsp</span>
						<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">英语四六级</span></el-link>
						<span style="color: white;">&nbsp|&nbsp</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;">&nbsp|&nbsp</span>
						<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">公务员考试</span></el-link>
						<span style="color: white;">&nbsp|&nbsp</span>
						<el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">英语四六级</span></el-link>
						<span style="color: white;">&nbsp|&nbsp</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;">&nbsp|&nbsp</span>
                        <el-link href="" target="_blank"><span style="background-color: transparent; color: white; font-size: 10px;">高尔夫兴趣班</span></el-link>
                        <span style="color: white;">&nbsp|&nbsp</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;
}

最终效果图

Edu-Web系列开发日志目录

Edu-Web开发日志一——首页制作一

Edu-Web开发日志二——首页制作二