基于【HTML】、【JavaScript】以及【CSS】实现班级网站

  <!--导航栏-->
  <div style="height: 50px;">  //设置最外侧的容器高度为50px
    <div style=" float: left; top: 10;left: 60;" class="div_jump">
      <a href="index.html" class="no-underline" title="首页">首页</a>
    </div>                   //浮动，相对定位向下10px、向右60px，设置超链接
    <div style=" float: left; top: 10;left: 160;" class="div_jump">
      <a href="index_introduction.html" class="no-underline" title="班级介绍" target="_blank">班级介绍</a>
    </div>                  //浮动，相对定位向下10px、向右160px，设置超链接
    <div style=" float: left; top: 10;left: 260;" class="div_jump">
      <a href="index_information.html" class="no-underline" title="班级信息" target="_blank">班级信息</a>
    </div>                 //浮动，相对定位向下10px、向右260px，设置超链接
    <div style=" float: left; top: 10;left: 360;" class="div_jump">
      <a href="index_share.html" class="no-underline" title="分享资源" target="_blank">分享资源</a>
    </div>                 //浮动，相对定位向下10px、向右360px，设置超链接
    <div style=" float: left; top: 10;left: 460;" class="div_jump">
      <a href="index_login.html" class="no-underline" title="登录" target="_self">登录</a>
    </div>                 //浮动，相对定位向下10px、向右460px，设置超链接
  </div>

?

  <!-- 标题 -->
  <div><h2 id="bjjs">班级介绍</h2></div>
  <div style="font-size: 20px;">
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我们是电子与信息工程学院2022级软件工程1班，共有49名同学，班主任是裴老师。</p>          //段落
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;班级成员来自不同的地区和不同的文化背景，形成了丰富多彩的班级文化。我们注重传承和发扬校园文化，同时也注重培养各方面的综合能力。</p>                                           //段落
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;班委会成员秉承公平、公正、公开的理念，服务整个班级。主要负责班级的工作分配，组织开展各种活动，推动班级建设。同时，也注重班级氛围和学生的个性发展.</p>                          //段落
  </div>
  <!-- 标题 -->
  <div>h2 id="bjry">班级荣誉</h2></div>
<!-- 班级荣誉列表 -->
  <div>
<h3>2023年春季获奖</h3>
      <ul>
         <li><p>电子与信息工程学院"活力团支部"</p></li>
         <li type="none"><img src="../index_files/荣誉1.jpg" width="60%"></li>
         <li><p>返家乡实践活动优秀集体奖</p></li>
         <li type="none"><img src="../index_files/荣誉2.jpg" width="60%"></li>
      </ul>                                            //无序列表
</div>

?

.div_jump {
font-family: 楷体;                           // 字体为楷体
font-size: 30;                                // 字体大小为 30 px
position: relative;                           // 设为相对定位
}
/* 样式定义：链接的无下划线效果 */
.no-underline {
text-decoration: none;                       // 取消下划线
}
/* 样式定义：链接的四种状态效果 */
a:link {
color: #000;                                // 链接为默认颜色
}
a:visited {
color: #000;                                // 点击后颜色不变
}
a:hover {
color: #f00;                                // 鼠标悬停时颜色为红色
}
a:active {
color: #0ff;                                // 链接刚被激活时颜色为蓝绿色
}

?

<div style="width: 80%;float: left;font-size: 20px;">      //规定了外侧区域的宽度和内容字体大小
  <div id="kejian">
     <h2>教材与课件</h2>
     <ul>
        <li><a href="#"  class="no-underline">Web程序设计基础</a></li>
        <li><a href="#"  class="no-underline">高等数学</a></li>
        <li><a href="#"  class="no-underline">数字逻辑基础 课件</a></li>
        <li><a href="#"  class="no-underline">Web 课件</a></li>
        <li><a href="#"  class="no-underline"></a></li>
     </ul>                                                //无序列表
  </div>
  <div id="video">
     <h2>相关视频</h2>
     <ul>
        <li><a href="#"  class="no-underline">视频1</a></li>
        <li><a href="#"  class="no-underline"></a></li>
     </ul>                                                //无序列表
  </div>
  <div id="xgzl">
      <h2>相关资料</h2>
      <ul>
         <li><a href="#"  class="no-underline">学分及资助认定</a></li>
         <li><a href="#"  class="no-underline">入党申请相关要求</a></li>
         <li><a href="#"  class="no-underline">青年大学习统计结果</a></li>
         <li><a href="#"  class="no-underline"></a></li>
       </ul>                                             //无序列表
  </div>
  </div>

?

<script>
     function log(){
        acc=account.value;
        pass=password.value;                    // 获取两个元素的值
        if(acc==20223206103 && pass==123456){
             location.href = "index.html";      // 通过 location.href 属性实现跳转
        }else{
             Error();                           // 调用 Error 函数
        } 
     }
     function Error() {
        alert('账号或密码错误，请重新输入！');
     }                                          // 弹出一个警告框，提醒用户输入的账户名或密码错误
  </script>

?

/* 样式定义：按钮颜色 */
button {
color: rgb(253, 253, 253);                      // 字体颜色为白色
background-color: rgb(79, 162, 204);            // 背景颜色为淡蓝色
}
/* 样式定义：按钮大小 */
.btn_size {
width: 50px;                                    // 按钮宽度为 50px
height: 30px;                                   // 按钮高度为 30px
}
/* 样式定义：提交按钮颜色及大小 */
.submit_btn {
color: rgb(253, 253, 253);                      // 字体颜色为白色
background-color: rgb(79, 162, 204);             // 背景颜色为淡蓝色
width: 50px;                                    // 按钮宽度为 50px
height: 30px;                                   // 按钮高度为 30px
}

?