通过css，js html结合实现第一个页面

html以及 js代码

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/hbfu.css">
</head>
<body>
    <!--页面顶部开始-->
    <a name="yy"></a>
    <div class="top">
        <div class="left">
            <img src="/img/logo.png">
            <div class="sublogo">
                <img src="/img/yinxin.png">
                <h4>Newcomer'Session</h4>
            </div>
        </div>
        <div class="right">
            <a href="#">河大主页</a> |
            <a href="#">学信网</a>
        </div>
    </div>
    <!-- 页面菜单开始 -->
    <div class="menu">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">网上报告</a></li>
            <li><a href="#">入学指南</a></li>
            <li><a href="#">走进河大</a></li>
            <li><a href="#">学在河大</a></li>
            <li><a href="#">家在河大</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">河大易班</a></li>
        </ul>
    </div>
    <!-- 中间 -->
     <div class="main">
        <div class="left">
            <h3>
                <span>快捷方式</span>
            </h3>
            <ul>
                <li>
                    <a href="#">
                        <img src="/img/1.png">
                        <h4>学院简介</h4>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/img/2.png">
                        <h4>辅导员风评</h4>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/img/3.png">
                        <h4>防控疫情</h4>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/img/4.png">
                        <h4>咨询留言</h4>
                    </a>
                </li>
            </ul>
        </div>
        <div class="middle">
            <h3>
                <span>通知公告</span>
            </h3>
            <ul>
                <li>
                    <a href="#">
                        <div class="time">
                            <h4>27</h4>
                            <p>2024.08</p>
                        </div>
                        <div class="text">
                            <h4>2021级新生网上预报到流程来了</h4>
                            <span>按照提示写信息完成注册及校方认证，点击注册，根据提示填写信息，点击下一步，马上去认证，填写校方信息身份</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="time">
                            <h4>27</h4>
                            <p>2024.08</p>
                        </div>
                        <div class="text">
                            <h4>2021级新生网上预报到流程来了</h4>
                            <span>按照提示写信息完成注册及校方认证，点击注册，根据提示填写信息，点击下一步，马上去认证，填写校方信息身份</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="time">
                            <h4>27</h4>
                            <p>2024.08</p>
                        </div>
                        <div class="text">
                            <h4>2021级新生网上预报到流程来了</h4>
                            <span>按照提示写信息完成注册及校方认证，点击注册，根据提示填写信息，点击下一步，马上去认证，填写校方信息身份</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="time">
                            <h4>27</h4>
                            <p>2024.08</p>
                        </div>
                        <div class="text">
                            <h4>2021级新生网上预报到流程来了</h4>
                            <span>按照提示写信息完成注册及校方认证，点击注册，根据提示填写信息，点击下一步，马上去认证，填写校方信息身份</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="right">
            <h3>
                <span>视频河大</span>
                <a href="#">more+</a>
            </h3>
            <img src="/img/4162a71b86c33e60fde74366a43b8a9.jpg">
            <h4>河大学习深情演唱《不忘初心》</h4>
            <ul>
                <li><a href="#">一流征程</a></li>
                <li><a href="#">河北大学校歌</a></li>
                <li><a href="#">坤舆全图</a></li>
                <li><a href="#">钟灵顶秀 翰墨土方</a></li>
                <li><a href="#">梦开始的地方</a></li>
            </ul>
        </div>
     </div>
    <!-- 军训模块 -->
    <div class="exer">
        <div class="hezi">
            <div class="top1">
                <div>军训专题</div>
                <div class="r">more+</div>
            </div>
            <div class="tu">
                <div class="pho">
                    <span>2024.08.27</span>
                    <img src="/img/4162a71b86c33e60fde74366a43b8a9.jpg">
                    <h4>军训小贴士-生活片</h4>
                    <p class="image-caption">军训期间体力消耗较大，军训后应保证充足的睡眠，让身体得到充分的休息。每天尽量保证 7-8 小时的睡眠时间，养成良好的作息习惯。
                        可以适当增加午休时间，缓解身体的疲劳感。</p>
                </div>
                <div class="pho">
                    <span>2024.08.27</span>
                    <img src="/img/4162a71b86c33e60fde74366a43b8a9.jpg">
                    <h4>军训小贴士-生活片</h4>
                    <p class="image-caption">补充营养：军训后，身体需要补充足够的能量和营养。多吃富含蛋白质、碳水化合物和维生素的食物，如鸡肉、鱼肉、蛋类、牛奶、新鲜蔬菜和水果等。
                        注意饮食均衡：避免暴饮暴食和过度节食，保持饮食的均衡和规律。合理搭配食物，确保摄入各种营养素。
                        多喝水：军训期间出汗较多，身体容易缺水。军训后要及时补充水分，每天至少喝 1500-2000 毫升的水。可以适量饮用一些运动饮料，补充电解质。</p>
                </div>
                <div class="pho">
                    <span>2024.08.27</span>
                    <img src="/img/4162a71b86c33e60fde74366a43b8a9.jpg">
                    <h4>军训小贴士-生活片</h4>
                    <p class="image-caption"> 拉伸运动：军训后进行适当的拉伸运动，可以缓解肌肉紧张和酸痛。重点拉伸腿部、腰部、肩部等部位的肌肉，每个动作保持 15-30 秒，重复 2-3 次。
                        按摩：可以自己进行简单的按摩，或者找专业的按摩师进行按摩。按摩可以促进血液循环，缓解肌肉疲劳。
                        热水浴：泡个热水澡可以放松身心，缓解肌肉酸痛。水温不宜过高，时间不宜过长，一般控制在 15-20 分钟左右。</p>
                </div>
                <div class="pho">
                    <span>2024.08.27</span>
                    <img src="/img/4162a71b86c33e60fde74366a43b8a9.jpg">
                    <h4>军训小贴士-生活片</h4>
                    <p class="image-caption">军训期间可能会面临一定的压力和挑战，军训后要及时调整心态，缓解压力。可以通过听音乐、看电影、阅读书籍等方式放松心情。
                        与家人和朋友交流：分享军训的经历和感受，听取他们的建议和支持，有助于缓解心理压力。</p>
                </div>
            </div>
    </div>
    <!-- 结尾 -->
    <div class="jiewei">
        <div class="left">
            <img src="/img/logo2.png">
            <div class="sub">
                <h4>河北大学迎新网</h4>
                <h4>Newcomer'Session</h4>
            </div>
        </div>
        <div class="right">
            <img src="/img/yxwerweima.png">
            <div class="sub">
                <p>邮箱：hbdxxsc@126.com</p>
                <p>版权所有：河北大学党委学生工作部 管理登录</p>
            </div>
        </div>
        <div class="botton">
            <img src="/img/top.png">
            <div class="zi">TOP</div>
        </div>
    </div>
    
</div>
<script>
    document.querySelector('.botton').addEventListener('click', function () {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
  </script>
</body>
</html>

CSS

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;
}