htmledit_views">
往期文章汇总：
html" title=前端>前端【1】---HTML入门学习_html父子标签-CSDN博客
html" title=前端>前端【2】html添加样式、CSS选择器-CSDN博客
html" title=前端>前端【3】--CSS布局，CSS实现横向布局，盒子模型-CSDN博客
html" title=前端>前端【4】-炫酷的文字、动画效果实现-CSDN博客
HTML
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="hbu.css">
</head>
<body><!-- 页面头部开始 --><div class="top"><div class="left"><img src="materials/hbu_red.png" alt="" width="250px"><div class="text"><img src="materials/迎新网.png" alt="" width="54px"><h3>Newcomers'Session</h3></div></div><div class="right"><a href="https://hbu.edu.cn/">河大主页</a> |<a href="https://xsfwpt.hbu.cn/HbuXG/Sys/MyUserLogin.aspx">学工网</a></div></div><!--页面头部结束 --><!-- 导航栏开始 --><div class="nav"><div class="link"><a href="#">首页</a><a href="#">网上报到</a><a href="#">入学指南</a><a href="#">走进河大</a><a href="#">学在河大</a><a href="#">家在河大</a><a href="#">河大易班</a><a href="#">联系我们</a></div></div><!--导航栏样式结束 --><!-- 页面中部开始 --><div class="center"><div class="left"><p style="margin: 10px 0px;font-size: 17px;">快捷方式</p><hr><div class="a"><img src="materials/＋.png" alt=""><h3>学院简介</h3></div><div class="b"><img src="materials/日历.png" alt=""><h3>辅导员风采</h3></div><div class="c"><img src="materials/人.png" alt=""><h3>防控疫情</h3></div><div class="d"><img src="materials/chat.png" alt=""><h3>咨询留言</h3></div></div><div class="cen"><p style="margin: 10px 0px;font-size: 17px;">通知公告</p><hr><div class="e"><div class="e1"><p style="color: red;background-color:rgb(238,238,238);width: 80px;height: 45px;text-align: center;font-size:30px;font-weight: bolder;">08</p><p style="color: white;background-color:red;width: 80px;height: 20px;padding-top: 6px;text-align: center;font-size:12px;font-weight: bolder;">2022.03</p></div><div class="e2"><p style="color: red;">2021级新生网上预报到流程指南来啦</p><span style="color: gray;">按照提示填写信息完成注册及校方认证:点击“注册“，根据提示填写信息，点击“下一步”“马上去认证”，填写校方认证信息，“身份</span></div></div><br><div class="f"><div class="f1"><p style="color: red;background-color:rgb(238,238,238);width: 80px;height: 45px;text-align: center;font-size:30px;font-weight: bolder;">08</p><p style="color: white;background-color:red;width: 80px;height: 20px;padding-top: 6px;text-align: center;font-size:12px;font-weight: bolder;">2022.03</p></div><div class="f2"><p style="color: red;">2021级新生网上预报到流程指南来啦</p><span style="color: gray;">按照提示填写信息完成注册及校方认证:点击“注册“，根据提示填写信息，点击“下一步”“马上去认证”，填写校方认证信息，“身份</span></div></div><div class="g"><div class="g1"><p style="color: red;background-color:rgb(238,238,238);width: 80px;height: 45px;text-align: center;font-size:30px;font-weight: bolder;">08</p><p style="color: white;background-color:red;width: 80px;height: 20px;padding-top: 6px;text-align: center;font-size:12px;font-weight: bolder;">2022.03</p></div><div class="g2"><p style="color: red;">2021级新生网上预报到流程指南来啦</p><span style="color: gray;">按照提示填写信息完成注册及校方认证:点击“注册“，根据提示填写信息，点击“下一步”“马上去认证”，填写校方认证信息，“身份</span></div></div><div class="h"><div class="h1"><p style="color: red;background-color:rgb(238,238,238);width: 80px;height: 45px;text-align: center;font-size:30px;font-weight: bolder;">08</p><p style="color: white;background-color:red;width: 80px;height: 20px;padding-top: 6px;text-align: center;font-size:12px;font-weight: bolder;">2022.03</p></div><div class="h2"><p style="color: red;">2021级新生网上预报到流程指南来啦</p><span style="color: gray;">按照提示填写信息完成注册及校方认证:点击“注册“，根据提示填写信息，点击“下一步”“马上去认证”，填写校方认证信息，“身份</span></div></div></div><div class="right"><p style="margin: 10px 0px;font-size: 17px;">视频河大</p><hr style="margin-bottom: 10px;"><img src="materials/视频河大.png" alt="" width="400px" height="250px" ><div class="text" style="height: 33px;text-align: center;background-color: rgb(157,42,28); color: white;padding-top: 10px;">河大学子深情演唱《不忘初心》</div><table ><tr><td>一征流程</td></tr><tr><td>河北大学校歌</td></tr><tr><td>钟灵毓秀 翰墨吐芳</td></tr><tr><td>坤舆全图</td></tr><tr><td>梦开始的地方</td></tr></table></div></div><!-- 页面中部结束 -->
<!-- 军训专题开始 --><div class="junxun"><div class="c1"><p style="font-size: 18px;margin-bottom: 10px;">军训专题</p><hr></div><div class="c2"><div ><img src="materials/a.png" alt="" width="320" height="220"><p style="color: red;padding-left: 5px;padding-bottom: 5px;background-color: white;">军训小贴士-生活篇</p><p style="padding-left: 5px;color: rgba(0,0,0,0.7);background-color: white;">军训后体力消耗极大，这个时候要多补充些蛋白质，多吃一些肉类、蛋类，或豆制品代替。另外，最好还多喝点汤菜类，同时注意补充各种维生..</p></div><div ><img src="materials/b.png" alt="" width="320" height="220"><p style="color: red;padding-left: 5px;padding-bottom: 5px;background-color: white;">军训小贴士-生活篇</p><p style="padding-left: 5px;color: rgba(0,0,0,0.7);background-color: white ;">军训后体力消耗极大，这个时候要多补充些蛋白质，多吃一些肉类、蛋类，或豆制品代替。另外，最好还多喝点汤菜类，同时注意补充各种维生..</p></div><div ><img src="materials/c.png" alt="" width="320" height="220"><p style="color: red;padding-left: 5px;padding-bottom: 5px;background-color: white;">军训小贴士-生活篇</p><p style="padding-left: 5px;color: rgba(0,0,0,0.7);background-color: white;">军训后体力消耗极大，这个时候要多补充些蛋白质，多吃一些肉类、蛋类，或豆制品代替。另外，最好还多喝点汤菜类，同时注意补充各种维生..</p></div><div ><img src="materials/d.png" alt="" width="320" height="220"><p style="color: red;padding-left: 5px;padding-bottom: 5px;background-color: white;">军训小贴士-生活篇</p><p style="padding-left: 5px;color: rgba(0,0,0,0.7);background-color: white;">军训后体力消耗极大，这个时候要多补充些蛋白质，多吃一些肉类、蛋类，或豆制品代替。另外，最好还多喝点汤菜类，同时注意补充各种维生..</p></div></div></div>
<!-- 军训专题结束 -->
<!--底部样式开始 -->
<div class="bottom"><div class="leftt"><img src="materials/hbu_white.png" alt="" width="190px"><div class="text"><img src="materials/迎新.png" alt="" width="54px"><p>Newcomers'Session</p></div></div><div class="rightt"><img src="materials/公众号.png" alt="" ><div class="text"><p>邮箱:hbdxxsc@126.com</p><p>版权所有:河北大学党委学生工作部 管理登录</p></div></div>
</div>
<!-- 底部样式结束 --></body>
</html>css
css">* {padding: 0;margin: 0;
}
/* 页面头部样式开始 */
.top {width: 80%;margin: auto; display: flex;justify-content: space-between;align-items: center;padding: 20px 0px;}
.top .left {display: flex;align-items: flex-end;
}
.top .left .text {margin-bottom: 5px;margin-left: 4px;
}
.top .left .text h3 {color: rgb(165, 41, 31);font-size: 14px;
}
.top .right a {color:rgb(165, 41, 31);text-decoration: none;font-size: 14px;}
.top .right a:hover {color: blue;
}
/* 页面头部样式结束 *//* 导航栏样式开始 */
.nav {background-color:rgb(165, 41, 31);height: 30px;display: flex;justify-content: center;}
.nav .link {display: flex;width: 80%;justify-content: space-between;padding: 3px 10px ;
}
.nav .link a {color: white;text-decoration: none;
}
/* 导航栏样式结束 *//* 页面中心布局开始 */
.center {display: flex;width: 82%;margin: auto; padding-top: 30px; margin-bottom: 25px;
}.center .left {width: 15%;margin-right: 12px;
}.center .cen {width: 58%;display: flex;flex-direction: column;margin-right: 12px;
}
.center .right {width: 30%;
}
.center .right table{width: 100%;background-color: rgb(238,238,238);text-indent: 10px;color: rgba(0,0,0,0.7);}
.center .right td{height: 30px;}
.center .right table tr:nth-child(odd) {background-color: rgb(238, 238, 238); /* 灰色 */
}.center .right table tr:nth-child(even) {background-color:rgb(245,245,245); /* 白色 */
}
hr {border: 1px solid rgba(0,0,0,0.1); /* 设置边框为黑色 */
}
.a {background-color: rgb(129,194,222); /* 设置背景颜色 */display: flex;align-items: center;flex-direction: column;padding: 10px 0px;margin: 10px 0px;
}
.a h3 {color: white;
}
.b {background-color:rgb(254,194,15); /* 设置背景颜色 */display: flex;align-items: center;flex-direction: column;padding: 10px 0px;margin: 10px 0px;
}.b h3 {color: white;
}
.c {background-color:rgb(191,214,47); /* 设置背景颜色 */display: flex;align-items: center;flex-direction: column;padding: 10px 0px;margin: 10px 0px;
}
.c h3 {color: white;
}
.d {background-color:rgb(47,163,220); /* 设置背景颜色 */display: flex;align-items: center;flex-direction: column;padding: 10px 0px;margin: 10px 0px;
}
.d h3 {color: white;
}.e{display: flex;margin: 11px 0px;margin-bottom: 7px;}
.f,.g,.h {display: flex;margin-bottom: 22px;padding-top: 22px;border-top: 1px dashed gray;}
.e1,f1,g1,h1
{display: flex;flex-direction: column;
}
.e2,.f2,.g2,h2{display: flex;flex-direction: column;
}/* 页面中心布局结束 */
/* 军训专题开始 */
.junxun {background-image: url(materials/background.jpg);width: 82%;margin: auto;
}
.c2 {display: flex; /* 启用 Flexbox 布局 */padding-bottom: 4px;
}.c2 > div {padding-right: 35px;padding-top: 20px;
}
.c2 > p {background-color: white;
}/* 军训专题结束 */
/* 底部样式开始 */
.bottom {margin: auto; display: flex;justify-content: space-between;align-items: center;padding: 0px 160px;margin-top: 20px;background-color: rgb(157,42,28);}
.leftt {display: flex;align-items: flex-end;}.bottom .leftt .text {margin-bottom: 2px;margin-left: 4px;font-size: 14px;
}
.bottom .leftt .text p {color: rgba(255,255,255,0.7);
}
.rightt{display: flex;
}
.rightt img{padding-top: 25px;
}
.bottom .rightt .text {padding-top: 45px;padding-left: 5px;color: rgba(255,255,255,0.8);}
/* 底部样式结束 */最终效果
代码比较简单，主要是为了掌握常见标签和弹性盒子的使用,html,css搭建静态页面的学习到此为止啦~后面将会进行js动态交互页面的学习
