HBU迎新网站（只有页面 html和css部分）
1、HTML<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="CSS/csshbu.css">
</head>
<body>
<div class="top">
<div class="left">
<img src="IMGS/logo.png" alt="">
<div class="text">
<img src="IMGS/yinxin.png" alt="">
<h3>Newcomers'Session</h3>
</div>
</div>
<div class="right">
<a href="#">河大主页 |</a>
<a href="#">学工网</a>
</div>
</div>
<div class="demo">
<span class="sy">首页</span>
<span>网上报道</span>
<span>入学指南</span>
<span>走进河大</span>
<span>学在河大</span>
<span>家在河大</span>
<span>联系我们</span>
<span>河大易班</span>
</div>
<div class="middlef-left">
<div class="kjfs">
<h4>快捷方式</h4>
<div class="xyjj">
<img src="IMGS/1.png" alt="">
<span>学院简介</span>
</div>
<div class="fdyfc">
<img src="IMGS/2.png" alt="">
<span>辅导员风采</span>
</div>
<div class="fkyq">
<img src="IMGS/3.png" alt="">
<span>防控疫情</span>
</div>
<div class="zqly">
<img src="IMGS/4.png" alt="">
<span>咨询留言</span>
</div>
</div>
<div class="tzgg">
<h4>通知公告</h4>
<div class="aa">
<img src="IMGS/日期.png" alt="" style="width: 90px; height: auto;">
<div class="text-container">
<span id="a">2021级新生网上预报到流程指南来啦<br></span>
<span id="b">按照提示填写信息完成注册及校方认证:点击“注册”，根据提示填写信息，点击“下一步”、“马上去认证”，填写校方认证信息，“身份</span>
</div>
</div>
<div class="bb">
<img src="IMGS/日期.png" alt="" style="width: 90px; height: auto;">
<div class="text-container">
<span id="a">2021级新生网上预报到流程指南来啦<br></span>
<span id="b">按照提示填写信息完成注册及校方认证:点击“注册”，根据提示填写信息，点击“下一步”、“马上去认证”，填写校方认证信息，“身份</span>
</div>
</div>
<div class="cc">
<img src="IMGS/日期.png" alt="" style="width: 90px; height: auto;">
<div class="text-container">
<span id="a">2021级新生网上预报到流程指南来啦<br></span>
<span id="b">按照提示填写信息完成注册及校方认证:点击“注册”，根据提示填写信息，点击“下一步”、“马上去认证”，填写校方认证信息，“身份</span>
</div>
</div>
<div class="dd">
<img src="IMGS/日期.png" alt="" style="width: 90px; height: auto;">
<div class="text-container">
<span id="a">2021级新生网上预报到流程指南来啦<br></span>
<span id="b">按照提示填写信息完成注册及校方认证:点击“注册”，根据提示填写信息，点击“下一步”、“马上去认证”，填写校方认证信息，“身份</span>
</div>
</div>
</div>
<div class="sphd">
<h4>视频河大</h5>
<img src="IMGS/队列.png" alt="" style="width: 350px; height: 230px;">
<div class="bwcx">
<span>河大学子深情演唱《不忘初心》</span>
</div>
<div class="ylzc">
<span>一流征程</span>
</div>
<div class="xg">
<span>河北大学校歌</span>
</div>
<div class="zh">
<span>钟灵毓秀 翰墨吐芳</span>
</div>
<div class="kyqt">
<span>坤舆全图</span>
</div>
<div class="mm">
<span>梦开始的地方</span>
</div>
</div>
</div>
<div class="last">
<h4><br>军训专题</h4>
<div class="aaaaa">
<div class="ap">
<img src="IMGS/军训.png" alt="" style="width: 310px; height: 200px;"class="base-image">
<img src="IMGS/66.png" alt=""style="width: 80px; height: 20px;" class="overlay-image">
<span id="p">军训小贴士-生活篇<br></span>
<span id="q">军训后体力消耗极大，这个时候要多补充一些蛋白质，多吃一些肉类、蛋类，或豆制品代替。另外，最好还多喝点汤菜类，同时注意补充各种维生..</span>
</div>
<div class="bp">
<img src="IMGS/军训.png" alt="" style="width: 310px; height: 200px;"class="base-image">
<img src="IMGS/66.png" alt=""style="width: 80px; height: 20px;" class="overlay-image">
<span id="p">军训小贴士-生活篇<br></span>
<span id="q">军训后体力消耗极大，这个时候要多补充一些蛋白质，多吃一些肉类、蛋类，或豆制品代替。另外，最好还多喝点汤菜类，同时注意补充各种维生..</span>
</div>
<div class="cp">
<img src="IMGS/军训.png" alt="" style="width: 310px; height: 200px;"class="base-image">
<img src="IMGS/66.png" alt=""style="width: 80px; height: 20px;" class="overlay-image">
<span id="p">军训小贴士-生活篇<br></span>
<span id="q">军训后体力消耗极大，这个时候要多补充一些蛋白质，多吃一些肉类、蛋类，或豆制品代替。另外，最好还多喝点汤菜类，同时注意补充各种维生..</span>
</div>
<div class="dp">
<img src="IMGS/军训.png" alt="" style="width: 310px; height: 200px;"class="base-image">
<img src="IMGS/66.png" alt=""style="width: 80px; height: 20px;" class="overlay-image">
<span id="p">军训小贴士-生活篇<br></span>
<span id="q">军训后体力消耗极大，这个时候要多补充一些蛋白质，多吃一些肉类、蛋类，或豆制品代替。另外，最好还多喝点汤菜类，同时注意补充各种维生..</span>
</div>
</div>
</div>
</body>
</html>2、CSS
*{
padding: 0;
margin: 0;
}
.top{
width: 80%;
background: white;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0px;
}
.top .left {
display: flex;
align-items: center;
}
.top .left .text img{
width: 54px;
margin-top: 30px;
}
.top .left .text h3{
font-size: 1.5em;
color: darkred; /* 设置颜色为红色 */
}
.top .right a{
color: red;
text-decoration: none;
}
.demo{
display: flex;
width: 100%;
height: 30px;
background-color: rgb(185, 30, 30);
font-size: 16px;
font-weight: 100;
text-decoration: none;
text-align: center;
gap: 70px;
text-align: center;
align-items: center;
}
.demo span{
color: aliceblue;
font-size: 100%;
font-weight: 120%;
font-style: normal;
}
.demo span.sy{
margin-left: 140px; /* 增加左边距 */
}
/* 字体相关的样式 color字体颜色font-size:字体大小font-weight 字体粗细
font-style:italic字体qingxie
text-decoration 字体是否有倾斜线line-throuhg 中划线overline 上划线 underline 下划线
*/
.middlef-left {
display: flex; /* 使用 Flexbox 布局 */
align-items: flex-start; /* 向左对齐 */
padding: 20px;
margin-left: 120px;
}
.kjfs {
display: flex; /* 使用 Flexbox */
flex-direction: column; /* 垂直排列内容 */
align-items: flex-start; /* 左对齐 */
height:480px;
width: 200px;
margin-right: 20px; /* 设置 .kjfs 和 .tzgg 之间的空隙 */
}
.middlef-left h4 {
text-decoration: underline; /* 添加下划线 */
text-decoration-color: red; /* 设置下划线颜色为红色 */
text-decoration-thickness: 3px; /* 设置下划线的厚度 */
margin-bottom: 15px;
}
.kjfs div {
margin-bottom: 10px; /* 图标与其他元素之间的间距 */
}
.kjfs .xyjj{
flex-direction: column;
background-color: rgb(129,194,222);
height:100px;
width: 200px;
display: flex; /* 使用 Flexbox */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
text-decoration: none;
}
.kjfs .fdyfc{
background-color: rgb(254,194,15);
height:100px;
width: 200px;
display: flex; /* 使用 Flexbox */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
flex-direction: column;
}
.kjfs .fkyq{
background-color: rgb(191,214,47);
height:100px;
width: 200px;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
flex-direction: column;
}
.kjfs .zqly{
background-color: rgb(47,163,220);
height:100px;
width: 200px;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
flex-direction: column;
}
.kjfs span{
color: white;
font-size: 18px;
font-weight: bold; /* 设置字体加粗 */
}
.tzgg{
height:480px;
width: 50%;
display: flex; /* 使用 Flexbox */
flex-direction: column; /* 垂直排列内容 */
align-items: flex-start;
}
.tzgg .aa{
display: flex; /* 使用 Flexbox */
align-items: flex-start; /* 垂直对齐到顶部 */
height:95px;
width: 100%;
border-bottom: 2px dashed gray;
padding-bottom: 5px;
margin-bottom: 10px;
}
.tzgg .bb{
display: flex; /* 使用 Flexbox */
align-items: flex-start; /* 垂直对齐到顶部 */
height:95px;
width: 100%;
border-bottom: 2px dashed gray;
padding-bottom: 5px;
margin-bottom: 10px;
}
.tzgg .cc{
display: flex; /* 使用 Flexbox */
align-items: flex-start; /* 垂直对齐到顶部 */
height:95px;
width: 100%;
border-bottom: 2px dashed gray;
padding-bottom: 5px;
margin-bottom: 10px;
}
.tzgg .dd{
display: flex; /* 使用 Flexbox */
align-items: flex-start; /* 垂直对齐到顶部 */
height:95px;
width: 100%;
border-bottom: 2px dashed gray;
padding-bottom: 5px;
margin-bottom: 10px;
}
.tzgg .text-container {
display: flex;
flex-direction: column; /* 纵向排列 h5 和 h6 */
margin-left: 10px; /* 调整图片和文本之间的间距 */
}
#a{
color: rgb(196, 35, 35); /* 设置颜色为红色 */
display: inline-block; /* 使用 inline-block 来允许设置 margin */
margin-bottom: 10px; /* 设置与下一个 span 的间隙 */
}
b{
color: gray; /* 设置颜色为灰色 */
display: inline-block; /* 使用 inline-block 来允许设置 margin */
}
.tzgg{
height:480px;
flex-direction: column; /* 垂直排列内容 */
align-items: flex-start;
margin-right: 20px;
}
.bwcx {
background-color: rgb(165,41,31); /* 底色为红色 */
color: white; /* 字体颜色为白色 */
font-size: 18px; /* 字体大小 */
height: 40px;
line-height: 40px;
}
.ylzc{
background-color: rgb(238,238,238);
padding-left: 10px;
height: 35px;
line-height: 35px;
font-size: 16px;
}
.xg{
background-color: rgb(245,245,245);
padding-left: 10px;
height: 35px;
line-height: 35px;
font-size: 16px;
}
.zh{
background-color: rgb(238,238,238);
padding-left: 10px;
height: 35px;
line-height: 35px;
font-size: 16px;
}
.kyqt{
background-color: rgb(245,245,245);
padding-left: 10px;
height: 35px;
line-height: 35px;
font-size: 16px;
}
.mm{
background-color: rgb(238,238,238);
padding-left: 10px;
height: 35px;
line-height: 35px;
font-size: 16px;
}
/*背景相关样式
background-image背景图片
background-repeat背景图片是否平铺 no-repeat不平铺
background-cover 所在容器铺满
background-size容器尺寸
background-attachment: fixed;不随浏览器的滚动而滚动
//定位 position
static relative absolute fixed
static:静态模式|常态模式
relative:代表相对模式，随着浏览器的滚动而滚动，参考物是自己原来的位置，保留自己原来的空间
absolute:代表绝对模式,随着浏览器的滚动而滚动,参考物是浏览器，释放自己原来的空间
fixed:代表固定模式，不随着浏览器的滚动而滚动，参考物是浏览器，释放自己原来的空间
z-index:设置定位层级，值是整数，值越大越在上层;
*/
.last{
background-color: rgb(247,247,247);
width: 100%;
height: 400px;
}
.last h4 {
text-decoration: underline; /* 添加下划线 */
text-decoration-color: red; /* 下划线颜色为红色 */
font-size: 18px; /* 字体大小 */
margin: 0; /* 去掉默认的边距 */
text-decoration-thickness: 3px; /* 设置下划线的厚度 */
margin-left:140px ;
}
.last .aaaaa{
display: flex; /* 使用 Flexbox */
margin-top: 10px;
position: relative; /* 设置父容器为相对定位 */
}
#p{
color: rgb(196, 35, 35); /* 设置颜色为红色 */
display: inline-block; /* 使用 inline-block 来允许设置 margin */
margin-bottom: 10px; /* 设置与下一个 span 的间隙 */
}
#q{
color: gray; /* 设置颜色为灰色 */
display: inline-block; /* 使用 inline-block 来允许设置 margin */
}
.ap{
margin-left: 140px;
position: relative;/* 设定相对定位的父容器 */
width: 310px; /* 设置与控件适合的宽度 */
height: 200px; /* 设置与控件适合的高度 */
background-color: white;
}
.bp{
margin-left: 10px;
position: relative;/* 设定相对定位的父容器 */
width: 310px; /* 设置与控件适合的宽度 */
height: 200px; /* 设置与控件适合的高度 */
background-color: white;
}
.cp{
margin-left: 10px;
position: relative;/* 设定相对定位的父容器 */
width: 310px; /* 设置与控件适合的宽度 */
height: 200px; /* 设置与控件适合的高度 */
background-color: white;
}
.dp{
margin-left: 10px;
position: relative;/* 设定相对定位的父容器 */
width: 310px; /* 设置与控件适合的宽度 */
height: 200px; /* 设置与控件适合的高度 */
background-color: white;
}
.base-image {
width: 310px; /* 基础图像的宽度 */
height: 200px; /* 基础图像的高度 */
}
.overlay-image {
position: absolute; /* 绝对定位的叠加图像 */
top: 0; /* 位于父元素的顶部 */
left: 0; /* 位于父元素的左侧 */
width: 100px; /* 66图像的宽度 */
height: 40px; /* 66图像的高度 */
}
.overlay-image:hover {
opacity: 0; /* 鼠标悬停时使其透明 */
} 3、效果展示
https://i-blog.csdnimg.cn/direct/54c3c4f040dd4f30a6bb4e0cc8728047.gif
https://i-blog.csdnimg.cn/direct/a78c1394d5054026bfa589cb4cecdb50.gif
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]