通过css，js html结合实现第一个页面
html以及 js代码
Document
军训专题
more+
2024.08.27
军训小贴士-生活片
军训期间体力消耗较大，军训后应保证充足的睡眠，让身体得到充分的休息。每天尽量保证 7-8 小时的睡眠时间，养成良好的作息习惯。
可以适当增加午休时间，缓解身体的疲劳感。
2024.08.27
军训小贴士-生活片
补充营养：军训后，身体需要补充足够的能量和营养。多吃富含蛋白质、碳水化合物和维生素的食物，如鸡肉、鱼肉、蛋类、牛奶、新鲜蔬菜和水果等。
注意饮食均衡：避免暴饮暴食和过度节食，保持饮食的均衡和规律。合理搭配食物，确保摄入各种营养素。
多喝水：军训期间出汗较多，身体容易缺水。军训后要及时补充水分，每天至少喝 1500-2000 毫升的水。可以适量饮用一些运动饮料，补充电解质。
2024.08.27
军训小贴士-生活片
拉伸运动：军训后进行适当的拉伸运动，可以缓解肌肉紧张和酸痛。重点拉伸腿部、腰部、肩部等部位的肌肉，每个动作保持 15-30 秒，重复 2-3 次。
按摩：可以自己进行简单的按摩，或者找专业的按摩师进行按摩。按摩可以促进血液循环，缓解肌肉疲劳。
热水浴：泡个热水澡可以放松身心，缓解肌肉酸痛。水温不宜过高，时间不宜过长，一般控制在 15-20 分钟左右。
2024.08.27
军训小贴士-生活片
军训期间可能会面临一定的压力和挑战，军训后要及时调整心态，缓解压力。可以通过听音乐、看电影、阅读书籍等方式放松心情。
与家人和朋友交流：分享军训的经历和感受，听取他们的建议和支持，有助于缓解心理压力。
CSS
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
/* 页面顶部样式开始 */
.top{
width: 80%;
margin: 20px auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.top .left{
display: flex;
align-items: end;
}
.top .left>img{
width: 250px;
}
.top .left .sublogo img{
width: 55px;
margin-left: 4px;
margin-bottom: 4px;
}
.top .left .sublogo h4{
width: 55px;
color:firebrick;
font-size: 14px;
margin-bottom: 4px;
}
.top .right a{
color: firebrick;
font-size: 14px;
text-decoration: none;
}
/* 页面顶部样式结束 */
/* 页面菜单样式开始 */
.menu{
background: rgb(165,41,31);
}
.menu ul{
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.menu ul li{
list-style: none;
/* padding: 10px 13px; */
}
.menu ul li a{
display: block;
text-decoration: none;
color: #fff;
padding: 10px 13px;
}
.menu ul li a:hover{
color: rgb(165,41,31);
background: #fff;
}
/* 页面菜单样式结束 */
/* Main */
.main img{
width: 50px;
}
.main{
width: 80%;
margin: 40px auto;
display: flex;
justify-content: space-between;
}
.main h3 {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgb(221,221,221);
}
.main .left{
width: 18%;
}
.main .left ul li{
background-color: #333;
align-content: center;
margin: 11px 0;
padding: 10px;
}
.main .left ul li img{
width: 50px;
}
.main .left h3{
font-size: 14px;
font-weight: 500;
}
.main h3 span{
font-size: 15px;
font-weight: 500;
border-bottom: 2px solid rgb(165,41,31);
}
.main h3 a{
color: rgb(170,170,170);
font-size: 12px;
}
.main h3 a:hover{
color: rgb(165,41,31);
}
.main .left ul li a{
align-content: center;
}
.main .left ul li a h4{
color: #fff;
align-content: center;
}
.main .left ul li:nth-child(2){
background: yellow;
}
.main .left ul li:nth-child(3){
background: blueviolet
}
.main .left ul li:nth-child(4){
background: green;
}
.main .left ul li:hover{
opacity: 0.7;
}
.main .middle{
width: 55%;
}
.main .middle ul{
}
.main .middle ul li{
margin-bottom: 20px;
border-bottom: 1px dashed rgb(228,228,228);
padding-bottom: 20px;
}
.main .middle ul li:last-child{
border: none;
}
.main .middle ul li a{
display: flex;
justify-content: space-between;
}
.main .middle ul li a .time{
width: 12%;
}
.main .middle ul li a .text{
width: 80%;
color: yellow;
}
.main .middle ul li a .time h4{
font-size: 28px;
color: rgb(165,41,31);
background: rgb(228,228,228);
text-align:center;
padding: 7px;
}
.main .middle ul li a .time p{
font-size: 12px;
color: #fff;
background: red;
text-align:center;
padding: 3px;
}
.main .middle ul li a .text h4{
font-size: 15px;
font-weight: 500;
color: rgb(165,41,31);
margin-bottom: 10px;
}
.main .middle ul li a .text span{
font-size: 12px;
font-weight: 500;
color: grey;
margin-bottom: 10px;
}
.main .middle ul li a:hover .text span{
color: rgb(165,41,31);
}
.main .right{
width: 23%;
}
.main .right img{
width: 100%;
filter: brightness(80%);
}
.main .right img:hover{
width: 100%;
filter: brightness(100%);
}
.main .right h4{
background: rgb(165,41,31);
color: #fff;
font-size: 14px;
}
.main .right ul li {
background: rgb(228,228,228);
font-size: 12px;
padding: 8px 10px;
}
.main .right ul li a{
color:rgb(119,119,119);
}
.main .right ul li:nth-child(even){
background: rgb(221,221,221);
}
.main .right ul li:hover a{
color: red;
}
.main .right ul li:hover {
padding: 30px;
}
/* 军训模块 */
.exer{
background-image:url("/img/bg.jpg");
}
.exer .r{
font-size: 13px;
color: gray;
font-weight: 600;
}
.exer .hezi{
width: 80%;
margin: 0 auto;
}
.exer .hezi .tu{
margin-top: 10px;
display: flex;
justify-content: space-between;
}
.exer .top1{
display: flex;
border-bottom: 1px solid;
justify-content: space-between;
}
.exer .pho{
width: 220px;
position: relative;
flex-direction: column;
}
.exer .pho img{
width: 220px;
}
.tu .pho h4{
font-size: 14px;
font-weight: 400;
color: firebrick;
}
.tu .pho span{
position: absolute;
top: 0;
left: 0;
font-size: 14px;
background: firebrick;
color: #fff;
}
.tu .pho p{
text-align: left;
font-size: 12px;
color: #333;
}
/*结尾 */
.jiewei{
padding-left: 100px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 100px;
display: flex;
background: red;
justify-content: space-between;
align-items: center;
}
.jiewei .left{
display: flex;
align-items: end;
}
.jiewei .left>img{
margin: auto;
width: 300px;
}
.jiewei .left .sub h4{
color: #fff;
font-weight: 500;
}
.jiewei .right{
display: flex;
align-items: end;
}
.jiewei .right>img{
margin: auto;
width: 100x;
}
.jiewei .right .sub p{
color: #fff;
font-weight: 500;
}
.botton{
background-color: firebrick;
}
.botton img{
width: 30px;
}
.botton .zi {
color: #fff;
font-size: 15px;
}
.botton .zi:hover{
color: #333;
}