CSS基础（4）

象更

已于 2024-01-19 22:46:54 修改

阅读量861

点赞数 23

文章标签： css 前端 html

于 2024-01-16 22:14:11 首次发布

本文链接：https://blog.csdn.net/m0_74227060/article/details/135618660

版权

浮动

浮动可以改变标签默认的排列形式（不会有缝隙）

浮动的应用：多个块元素一行排列；

选择器 {

float:属性值；（none（默认）、left、right）

}

可以浮动到一边；同理，也可以移动到两侧

浮动特性

1.浮动元素会脱离标准流（脱标）

2.浮动的元素会一行内显示并元素顶部对齐

3.浮动元素会具有行内块元素的特性

脱标

不受标准流控制，移动到指定位置

该盒子不在保留原先位置，让标准流占有。

浮动具有行内块元素特点

块级元素没有设宽度，与父级一样宽；

添加浮动，大小由内容决定

紫色消失术！

浮动元素与标准流父类搭配

先用标准流父类排列上下位置，之后内部子元素采取浮动排列左右位置

注意点：

一个盒子里有多个盒子，如果其中一个盒子浮动了，其他的也应该浮动；

浮动盒子只影响其后面的标准流，不影响前面的标准流。

浮动与标准流案例

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>选择栏</title>

   <style>
      * {
         margin: 0;
         padding: 0;
      }
      a {
         height: 46px;
         width: 326px;
         display:block;
         text-decoration: none;
         color: aliceblue;
         background-color: rgb(51, 52, 53);
         line-height: 46px;
         text-indent: 2em;
      }
      a:hover {
         background-color: rgb(114, 116, 117);
      }
      .Box {
         height: 460px;
         width: 1226px;
         margin: 0 auto;
      }

      .box1 {
         float: left;

      }

      .box2 img {
         float: left;
         height: 460px;
         width: 900px;
      }
      span {
         float: right;
         padding-right: 20px;
      }
   </style>
</head>

<body>
   <div class="Box">
      <div class="box1"><a href="#">手机<span>></span></a><a href="#">电视<span>></span></a><a href="#">平板<span>></span></a>
         <a href="#">家电<span>></span></a><a href="#">出行<span>></span></a>
         <a href="#">路由器<span>></span></a><a href="#">电源<span>></span></a>
         <a href="#">健康<span>></span></a><a href="#">耳机<span>></span></a><a href="#">生活<span>></span></a>
      </div>
      <div class="box2"><img src="https://i1.mifile.cn/a4/xmad_15648327213423_KQdjZ.jpg" alt="图片"></div>
   </div>

</body>

</html>

清除浮动

父盒子不一定要有高度，如果内容很多，不方便给高度。

如果不给父类高度，子元素是标准流

父盒子可以自由扩大

但如果是浮动，父类没内容就会消失

所以要清除浮动

语法：

选择器{

clear：属性值；

}

属性值	描述
left	清除左侧浮动的影响
right	清除右侧浮动的影响
both	同时清除两侧浮动的影响

常用clear：both；

闭合浮动即让浮动只在父类盒子中受影响

overflow

用法：overflow：hidden；（外边距合并用的就是它）

额外标签法

浮动元素末尾添加一个空标签<div styly="clear:both"></div>或其他标签，如<br/>等；

after伪类元素法

在后面（after）添加一个盒子清除浮动，与外界隔开，可以清除浮动；

格式：

.clearfix:after {

content: "";

display:block;

height:0;

clear: both;

visibility: hidden;

}

.clearfix { (为照顾低版本浏览器)

*zoom: 1;

}

双伪元素清除浮动

形如：

.clearfix:before, .clearfix:after {

content：“”；

display：table；

}

.clearfix:after
{

clear:both;

}

.clearfix {

*zoom:1;

}

教务在线案例

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>教务在线</title>

   <style>
      /*http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_3.gif*/

      * {
         margin: 0;
         padding: 0;
      }

      .main {
         width: 974px;
         margin: 0 auto;
      }

      .head {
         height: 179px;
         width: 974px;
         margin: 0 auto;
      }

      table a:hover {
         color: rgb(240, 191, 14);
      }

      .u1 {
         list-style: none;
         margin: 0 auto;
         height: 36.33px;
         width: 974px;
         background-image: url("http://jwzx.hrbust.edu.cn/homepage/client/default/image/nav_bg.jpg");
         box-shadow: 1px 1px 1px black;
      }

      .u1 a {
         display: inline-block;
         text-decoration: none;
      }

      .u1 li {
         display: inline-block;
         width: 90px;
         height: 33px;
      }

      span {
         font-size: 14px;
         color: white;
         line-height: 36.33px;
         margin: 0 auto;
         padding: 0 5px;
         margin: 0 8px;
      }

      .left_body1,
      .left_body2,
      .left_body3 {
         border-left: 1px solid #D4D4D4;
         border-right: 1px solid #D4D4D4;
         border-bottom: 1px solid #D4D4D4;
      }


      .u1 a:hover {
         background-color: rgb(240, 191, 14);
      }


      .left_head1 {
         font: 12px, '微软雅黑';
         height: 49px;
         width: 201px;
         background-image: url("http://jwzx.hrbust.edu.cn/homepage/client/default/image/title_3.jpg");
      }

      .left_head1 span {
         padding-left: 59px;
         line-height: 33px;
         font-size: 14px;
         font-weight: bold;

      }

      .left_body1 {
         height: 283px;
         width: 199px;
      }



      .left_body1 a {
         display: block;
         float: right;
         height: 44px;
         width: 166px;
         font-size: 12px;
         text-decoration: none;
         color: #000000;
         margin-top: 6px;
         text-indent: 2em;
      }

      .left1 .b1,
      .left1 .b2,
      .left1 .b3,
      .left1 .b4,
      .left1 .b5 {
         height: 50px;
         width: 171px;
         border-bottom: 1px solid #D4D4D4;
         margin: 0 auto;
      }



      .left_head2 {
         font: 12px, '微软雅黑';
         height: 49px;
         width: 201px;
         background-image: url("http://jwzx.hrbust.edu.cn/homepage/client/default/image/title_3.jpg");
      }

      .left_head2 span {
         padding-left: 59px;
         line-height: 33px;
         font-size: 14px;
         font-weight: bold;

      }

      .left_body2 {
         height: 153.33px;
         width: 199px;
      }



      .left_body2 a {
         display: block;
         float: right;
         height: 13.33px;
         width: 140.01px;
         font-size: 12px;
         text-decoration: none;
         color: #000000;
         margin-top: 6px;
      }

      .left2 .b1,
      .left2 .b2,
      .left2 .b3,
      .left2 .b4,
      .left2 .b5 {
         height: 25px;
         width: 171px;
         border-bottom: 1px solid #D4D4D4;
         margin: 0 auto;
      }

      .left_head3 {
         font: 12px, '微软雅黑';
         height: 49px;
         width: 201px;
         background-image: url("http://jwzx.hrbust.edu.cn/homepage/client/default/image/title_3.jpg");
      }

      .left_head3 span {
         padding-left: 59px;
         line-height: 33px;
         font-size: 14px;
         font-weight: bold;

      }

      .left_body3 {
         height: 127.67px;
         width: 199px;
      }



      .left_body3 a {
         padding-right: 36px;
         display: block;
         float: right;
         height: 13.33px;
         width: 106px;
         font-size: 12px;
         text-decoration: none;
         color: #000000;
         margin-top: 6px;
      }

      .left3 .b1,
      .left3 .b2,
      .left3 .b3,
      .left3 .b4 {
         height: 25px;
         width: 171px;
         border-bottom: 1px solid #D4D4D4;
         margin: 0 auto;
      }

      .Body {
         width: 974px;
         overflow: hidden;
      }

      .box1 {
         margin-left: 15px;
         margin-top: 5px;
         float: left;
      }

      .box1 a:hover {
         color: rgb(240, 191, 14);
      }

      .box2 {
         margin-top: 5px;
         float: left;
         margin-left: 15px;
      }

      .center_head1 {
         height: 32px;
         width: 518px;
         background-image: url("http://jwzx.hrbust.edu.cn/homepage/client/default/image/title_2.gif");
      }

      .center_head1 span {
         color: #006699;
         padding-left: 35px;
         font-size: 15px;
         font-weight: bold;
         line-height: 28px;
      }

      .center_head1 a {
         padding-left: 340px;
         text-decoration: none;
      }

      .center_head1 a:hover {
         color: rgb(240, 191, 14);
      }

      .u2 {
         list-style: none;
         border-bottom: #8c8f91;
      }

      .u2 li {
         margin: 10px;
         border-bottom-style: dashed;
         border-width: 1px;
         border-color: #8c8f91;
      }

      .u2 a {
         font-size: 12px;
         text-decoration: none;

      }

      .u2 a:hover {
         color: rgb(240, 191, 14);
      }

      .u2_li {
         float: right;
         font-size: 12px;
      }

      .center_head2 {
         height: 32px;
         width: 518px;
         background-image: url("http://jwzx.hrbust.edu.cn/homepage/client/default/image/title_2.gif");
      }

      .center_head2 span {
         color: #006699;
         padding-left: 35px;
         font-size: 15px;
         font-weight: bold;
         line-height: 28px;
      }

      .center_head2 a {
         padding-left: 340px;
         text-decoration: none;
      }

      .center_head2 a:hover {
         color: rgb(240, 191, 14);
      }

      .u3 {
         list-style: none;
         border-bottom: #8c8f91;
      }

      .u3 li {
         margin: 10px;
         border-bottom-style: dashed;
         border-width: 1px;
         border-color: #8c8f91;
      }

      .u3 a {
         font-size: 12px;
         text-decoration: none;

      }

      .u3 a:hover {
         color: rgb(240, 191, 14);
      }

      .u3_li {
         float: right;
         font-size: 12px;
      }

      .center_head3 {
         margin-top: 5px;
         height: 32px;
         width: 518px;
         background-image: url("http://jwzx.hrbust.edu.cn/homepage/client/default/image/title_2.jpg");
      }

      .center_head3 span {
         color: #006699;
         padding-left: 35px;
         font-size: 15px;
         font-weight: bold;
         line-height: 28px;
      }

      .center3_div {
         float: right;
         text-align: center;
      }

      .t1 img {
         height: 160px;
         width: 210px;
         margin: 5px 0 0;
      }

      .t1 div {
         margin: 15px 0 15px 10px;
      }

      .t2 div {
         text-align: center;
         width: 290px;

      }

      .t2 h3 {
         color: rgb(243, 123, 19);
         margin: 0;
      }

      .t2 a {
         font-size: 12px;
         color: #000000;
         text-decoration: none;
      }

      .t2 a:hover {
         color: #8c8f91;
         text-decoration: underline;
      }

      .t2_h3_div {
         margin: 10px 0 0;

      }

      .box3 {
         margin-top: 5px;
         float: left;
         margin-left: 15px;
      }

      .right_head1 {
         font: 12px, '微软雅黑';
         height: 49px;
         width: 200px;
         background-image: url("http://jwzx.hrbust.edu.cn/homepage/client/default/image/title_3.jpg");
      }

      .right_head1 span {
         padding-left: 59px;
         line-height: 33px;
         font-size: 14px;
         font-weight: bold;
      }

      .right1 {
         height: 180px;
         border-bottom: 1px solid #8c8f91;
         border-left: 1px solid #8c8f91;
         border-right: 1px solid #8c8f91;
      }

      .user,
      .pwd {
         font-size: 12px;
      }

      .user_text {
         width: 116px;
         margin-left: 5px;
      }

      .pwd_text {
         width: 116px;
      }

      form div {
         text-indent: 1em;
      }

      .submit {
         margin-left: 80px;
      }


      .right_head2 {
         font: 12px, '微软雅黑';
         height: 49px;
         width: 201px;
         background-image: url("http://jwzx.hrbust.edu.cn/homepage/client/default/image/title_3.jpg");
      }

      .right_head2 span {
         padding-left: 59px;
         line-height: 33px;
         font-size: 14px;
         font-weight: bold;

      }

      .right_body2 {
         height: 102px;
         width: 199px;
         border-left: 1px solid #D4D4D4;
         border-right: 1px solid #D4D4D4;
         border-bottom: 1px solid #D4D4D4;
      }



      .right_body2 a {
         display: block;
         float: right;
         height: 13.33px;
         width: 140.01px;
         font-size: 12px;
         text-decoration: none;
         color: #000000;
         margin-top: 6px;
      }

      .right2 .b1,
      .right2 .b2,
      .right2 .b3 {
         height: 25px;
         width: 171px;
         border-bottom: 1px solid #D4D4D4;
         margin: 0 auto;
      }




      .right_head3 {
         font: 12px, '微软雅黑';
         height: 49px;
         width: 201px;
         background-image: url("http://jwzx.hrbust.edu.cn/homepage/client/default/image/title_3.jpg");
      }

      .right_head3 span {
         padding-left: 59px;
         line-height: 33px;
         font-size: 14px;
         font-weight: bold;

      }

      .right_body3 {
         height: 330px;
         width: 199px;
         border-left: 1px solid #D4D4D4;
         border-right: 1px solid #D4D4D4;
         border-bottom: 1px solid #D4D4D4;
      }



      .right_body3 a {
         display: block;
         float: right;
         height: 13.33px;
         width: 140.01px;
         font-size: 12px;
         text-decoration: none;
         color: #000000;
         margin-top: 6px;
      }

      .right_body3 .b1 a,
      .right_body3 .b4 a,
      .right_body3 .b6 a,
      .right_body3 .b7 a {
         text-indent: 1em;
         display: block;
         float: right;
         height: 38.33px;
         width: 155px;
         font-size: 12px;
         text-decoration: none;
         color: #000000;
         margin-top: 6px;
      }


      .right3 .b2,
      .right3 .b3,
      .right3 .b5,
      .right3 .b8 {
         height: 25px;
         width: 171px;
         border-bottom: 1px solid #D4D4D4;
         margin: 0 auto;
      }

      .right3 .b1,
      .right3 .b4,
      .right3 .b6,
      .right3 .b7 {
         height: 50px;
         width: 171px;
         border-bottom: 1px solid #D4D4D4;
         margin: 0 auto;
      }

      .right2 a:hover,
      .right3 a:hover {
         color: rgb(240, 191, 14);
      }

      .footer {
         margin-top: 15px;
         height: 135.33px;
         width: 973.33px;
         background-image: url("http://jwzx.hrbust.edu.cn/homepage/client/default/image/image_2.jpg");
      }

      .Bottom {
         background: #DFE9F9;
         height: 241.33px;
         width: 980px;
         border: 1px solid #B8CAE9;

      }

      .Bottom table {
         height: 100%;
         width: 100%;
      }

      .Bottom .td1， .Bottom .td2， .Bottom .td3， .Bottom .td4， .Bottom .td5 {
         height: 221.33px;
         width: 193.59px;
         padding-top: 10px;
         padding-bottom: 10px;

      }

      .decoration {
         background: #FFF;
         margin: 0 5.6354px 0 5.625px;
         padding-bottom: 20px;
         height: 200px;
         width: 181px;
         border: 1px solid #B8CAE9;
      }

      .Bottom .text {
         height: auto;
         width: 157px;
         margin: 0 auto;
      }

      .Bottom .title {
         margin: 0 auto;
         text-align: center;
         border-bottom: 2px solid #7ABDDA;
      }

      .td1 span {
         background: url(http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_01.gif) no-repeat;
         background-position: 2px;
         font-size: 14px;
         font-weight: bold;
         color: #006699;
         padding-left: 20px;
      }

      .td2 span {
         background: url(http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_02.gif) no-repeat;
         background-position: 2px;
         font-size: 14px;
         font-weight: bold;
         color: #006699;
         padding-left: 20px;
      }

      .td3 span {
         background: url(http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_03.gif) no-repeat;
         background-position: 2px;
         font-size: 14px;
         font-weight: bold;
         color: #006699;
         padding-left: 20px;
      }

      .td4 span {
         background: url(http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_04.gif) no-repeat;
         background-position: 2px;
         font-size: 14px;
         font-weight: bold;
         color: #006699;
         padding-left: 20px;
      }

      .td5 span {
         background: url(http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_05.gif) no-repeat;
         background-position: 2px;
         font-size: 14px;
         font-weight: bold;
         color: #006699;
         padding-left: 20px;
      }

      .text tr div {
         background: url(http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_3.gif)no-repeat left center;
         padding-left: 10px;
      }


      .text a {
         color: #000000;
         text-decoration: none;
         font-size: 12px;
      }

      .text a:hover {
         color: rgb(240, 191, 14);
      }
   </style>

</head>

<body>
   <div class="main">
      <div class="header">
         <div class="head"><img src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/header.jpg"></div>
         <ul class="u1">
            <li><a href="#"><span>组织机构</span></a></li>
            <li><a href="#"><span>工作职责</span></a></li>
            <li><a href="#"><span>工作流程</span></a></li>
            <li><a href="#"><span>专业设置</span></a></li>
            <li><a href="#"><span>管理文件</span></a></li>
            <li><a href="#"><span>资料下载</span></a></li>
            <li><a href="#"><span>教务信箱</span></a></li>
            <li><a href="#"><span>教学成果</span></a></li>
            <li><a href="#"><span>创新创业</span></a></li>
            <li><a href="#"><span>理工首页</span></a></li>
         </ul>
      </div>
      <div class="Body">
         <div class="box1">
            <div class="left1">
               <div class="left_head1"><span>教学工作要点</span></div>
               <div class="left_body1">
                  <div class="b1" title="关于加强考风建设严肃考试纪律的通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">关于加强考风建设严肃考试纪律的通知</a>
                  </div>
                  <div class="b2" title="关于2020级新生学籍核查的通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">关于2020级新生学籍核查的通知</a>
                  </div>
                  <div class="b3" title="关于做好假期本科教学实验室安全工作的通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">关于做好假期本科教学实验室安全工作的通知</a>
                  </div>
                  <div class="b4" title="关于2015届本科毕业设计(论文)答辩事宜的通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">关于2015届本科毕业设计(论文)答辩事宜的通知</a>
                  </div>
                  <div class="b5" title="关于2015年上半年全国大学英语四、六级考试相关事项的通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">关于2015年上半年全国大学英语四、六级考试相关事...</a>
                  </div>
               </div>
            </div>
            <br>
            <div class="left2">
               <div class="left_head2"><span>质量工程</span></div>
               <div class="left_body2">
                  <div class="b1" title="关于开展哈尔滨理工大学第六届校级教学名师奖暨首届校级教学新秀奖评选工作的通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">关于开展哈尔滨理工大...</a>
                  </div>
                  <div class="b2" title="关于“质量工程”总结报告时间安排，请各教学单位务必准时上交总结报告"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">关于“质量工程”总结...</a>
                  </div>
                  <div class="b3" title="关于期中教学质量检查的通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">关于期中教学质量检查...
                     </a>
                  </div>
                  <div class="b4" title="转发：关于开展“质量工程”总结工作的通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">转发：关于开展“质量...</a>
                  </div>
                  <div class="b5" title="喜讯：质量工程项目取得新突破！"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">喜讯：质量工程项目取...</a>
                  </div>
               </div>
            </div>
            <br>
            <div class="left3">
               <div class="left_head3"><span>常用资料</span></div>
               <div class="left_body3">
                  <div class="b1" title="新作息时间表"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif">
                     <a href="#">新作息时间表</a>
                  </div>
                  <div class="b2" title="2015版本科人才培养方案"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif">
                     <a href="#">2015版本科人才...</a>
                  </div>
                  <div class="b3" title="教学进程表"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif">
                     <a href="#">教学进程表</a>
                  </div>
                  <div class="b4" title="教学进程表"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif">
                     <a href="#">教学进程表</a>
                  </div>
               </div>
            </div>
         </div>
         <div class="box2">
            <div class="center1">
               <div class="center_head1"><span>教务公告</span><a href="#">>>更多</a></div>
               <ul class="u2">
                  <li title="关于开展实验室安全知识宣传系列教育活动的通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_1.gif">&nbsp;<a
                        href="#">关于开展实验室安全知识宣传系列教育活动的通知</a>
                     <div class="u2_li">2024-01-12</div>
                  </li>
                  <li title="关于发布2024年春季学期（20、21级在校生）教材信息的通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_1.gif">&nbsp;<a
                        href="#">关于发布2024年春季学期（20、21级在校生）教材信息的通知</a>
                     <div class="u2_li">2023-12-12</div>
                  </li>
                  <li title="哈尔滨理工大学2023年下半年处置实验室危险废物信息公开"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_1.gif">&nbsp;<a
                        href="#">哈尔滨理工大学2023年下半年处置实验室危险废物信息公开</a>
                     <div class="u2_li">2023-12-10</div>
                  </li>
                  <li title="关于2023年中国-东盟创新创业大赛的通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_1.gif">&nbsp;<a
                        href="#">关于2023年中国-东盟创新创业大赛的通知</a>
                     <div class="u2_li">2023-12-01</div>
                  </li>
                  <li title="关于2023—2024学年第一学期不及格课程重考、缓考通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_1.gif">&nbsp;<a
                        href="#">关于2023—2024学年第一学期不及格课程重考、缓考通知</a>
                     <div class="u2_li">2023-11-12</div>
                  </li>
                  <li title="关于举办第十届哈尔滨理工大学大学生物理学术竞赛的通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_1.gif">&nbsp;<a
                        href="#">关于举办第十届哈尔滨理工大学大学生物理学术竞赛的通知</a>
                     <div class="u2_li">2023-10-21</div>
                  </li>
                  <li title="关于哈尔滨理工大学推荐参加第三批国家级一流本科课程遴选课程名单的公示"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_1.gif">&nbsp;<a
                        href="#">关于哈尔滨理工大学推荐参加第三批国家级一流本科课程遴选课程名...</a>
                     <div class="u2_li">2023-08-14</div>
                  </li>
                  <li title="关于做好岁末年初教学实验室安全工作的通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_1.gif">&nbsp;<a
                        href="#">关于做好岁末年初教学实验室安全工作的通知</a>
                     <div class="u2_li">2023-07-31</div>
                  </li>
                  <li title="公示：2024春全校任意选修课停开课程班"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_1.gif">&nbsp;<a
                        href="#">公示：2024春全校任意选修课停开课程班</a>
                     <div class="u2_li">2023-05-29</div>
                  </li>
                  <li title="关于开展第三批国家级一流本科课程推荐工作的通知"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_1.gif">&nbsp;<a
                        href="#">关于开展第三批国家级一流本科课程推荐工作的通知</a>
                     <div class="u2_li">2023-04-22</div>
                  </li>
               </ul>
            </div>
            <div class="center2">
               <div class="center_head2"><span>教学新闻</span><a href="#">>>更多</a></div>
               <ul class="u3">
                  <li title="哈尔滨理工大学实验教学与实验室管理2023年十大事件"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_1.gif">&nbsp;<a
                        href="#">哈尔滨理工大学实验教学与实验室管理2023年十大事件</a>
                     <div class="u3_li">2024-01-18</div>
                  </li>
                  <li title="我校在中国国际大学生创新大赛与全国大学生创新年会中获佳绩"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_1.gif">&nbsp;<a
                        href="#">我校在中国国际大学生创新大赛与全国大学生创新年会中获佳绩</a>
                     <div class="u3_li">2023-12-21</div>
                  </li>
                  <li title="学校举办第四届教师教学创新大赛"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_1.gif">&nbsp;<a
                        href="#">学校举办第四届教师教学创新大赛</a>
                     <div class="u3_li">2024-01-17</div>
                  </li>
                  <li title="我校学生在2023年全国数字建筑创新应用大赛荣获佳绩"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_1.gif">&nbsp;<a
                        href="#">我校学生在2023年全国数字建筑创新应用大赛荣获佳绩</a>
                     <div class="u3_li">2024-01-05</div>
                  </li>
               </ul>
            </div>
            <div class="center3">
               <div class="center_head3"><span>热点新闻</span></div>
               <table>
                  <tr>
                     <td class="t1">
                        <div><img src="https://www.pingjiata.com/uploadfiles/20170904/1504501958.jpg"></div>
                     </td>
                     <td class="t2">
                        <div>
                           <h3>教务处介绍</h3>
                           <hr>
                           <div class="t2_h3_div">
                              <a href="#">
                                 教务处进一步加强本科教学工作的中心地位, 强化质量意识, 深化教学改革,
                                 全体员工立足本职岗位, 团结一致, 踏实工作,
                                 在各教学单位及相关部门的支持下,
                                 在保障教学工作全面征程运行的基础上, 锐意进取, 不断创新,
                                 在教学管理中取得了突出的成绩.</a>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
         </div>
         <div class="box3">
            <div class="right1">
               <div class="right_head1"><span>教务在线</span></div>
               <form action="demo.php" method="post" name="name1">
                  <br>
                  <div class="user">用户号:<input type="text" class="user_text"></div><br>
                  <div class="pwd">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;<input type="password" class="pwd_text"></div><br>
                  <input type="submit" value="登录" class="submit">
               </form>
            </div>
            <br>
            <div class="right2">
               <div class="right_head2"><span>名师风采</span></div>
               <div class="right_body2">
                  <div class="b1" title="省级以上荣誉称号（本科）"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">省级以上荣誉...</a>
                  </div>
                  <div class="b2" title="校级荣誉称号（本科）"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">校级荣誉称号（本科）</a>
                  </div>
                  <div class="b3" title="校优秀主讲教师（本科）"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a href="#">校优秀主讲教师...
                     </a>
                  </div>
               </div>
            </div>
            <br>
            <div class="right3">
               <div class="right_head3"><span>网站链接</span></div>
               <div class="right_body3">
                  <div class="b1" title="哈理工教务处实验管理系统"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">哈理工教务处实验管理系统</a>
                  </div>
                  <div class="b2" title="教育部门户"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a href="#">教育部门户</a>
                  </div>
                  <div class="b3" title="黑龙江省教育厅"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a href="#">黑龙江省教育厅
                     </a>
                  </div>
                  <div class="b4" title="教学资源中心（含网络通识课）"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">教学资源中心（含网络通识课）</a>
                  </div>
                  <div class="b5" title="智慧树（网课）"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a href="#">智慧树（网课）</a>
                  </div>
                  <div class="b6" title="中国最权威的出版物数据服务平台"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">中国最权威的出版物数据服务平台
                     </a>
                  </div>
                  <div class="b7" title="“维普”毕业论文管理系统"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">“维普”毕业论文管理系统</a>
                  </div>
                  <div class="b8" title="课程论文检测系统"><img
                        src="http://jwzx.hrbust.edu.cn/homepage/client/default/image/coin_4.gif"><a
                        href="#">课程论文检测系统</a>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="footer">
      </div>
      <br>
      <div class="Bottom">
         <table>
            <tbody>
               <tr>
                  <td class="td1">
                     <div class="decoration">
                        <div class="text">
                           <div class="title"><span>教学管理</span></div>
                           <table>
                              <tr>
                                 <td>
                                    <div><a href="#" title="关于提交2019年工程教育专业认证申请书的通知">关于提交2019年...</a></div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>
                                    <div><a href="#" title="关于第二批本科教学特色项目立项申报工作">关于第二批本科教学...</a></div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>
                                    <div><a href="#" title="教育部、财政部本科教学工程项目管理办法、资金管理办法征求意见会议在我校召开">教育部、财政部本科...</a>
                                    </div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>
                                    <div><a href="#" title="关于开展“十二五”黑龙江省普通高等学校本科重点专业评选工作的通知">关于开展“十二五”...</a></div>
                                 </td>
                              </tr>

                              <tr>
                                 <td>
                                    <div><a href="#" title="关于开展全省普通高校本科重点专业验收工作的通知">关于开展全省普通高...</a></div>
                                 </td>
                              </tr>
                           </table>
                        </div>
                     </div>
                  </td>

                  <td class="td2">
                     <div class="decoration">
                        <div class="text">
                           <div class="title"><span>学籍管理</span></div>
                           <table>
                              <tr>
                                 <td>
                                    <div><a href="#" title="关于2011届毕业生补考的通知">关于2011届毕业...</a></div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>
                                    <div><a href="#" title="2010年全国软件专业人才设计与开发大赛报名通知 ">2010年全国软件...</a></div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>
                                    <div><a href="#" title="首届全国大学生基础力学实验竞赛报名通知 ">首届全国大学生基础...</a></div>
                                 </td>
                              </tr>
                           </table>
                        </div>
                     </div>
                  </td>

                  <td class="td3">
                     <div class="decoration">
                        <div class="text">
                           <div class="title"><span>教务管理</span></div>
                           <table>
                              <tr>
                                 <td>
                                    <div><a href="#" title="关于2020年工程教育认证申请——专业申请材料第二轮审查会日程安排及相关事宜通知">关于2020年工程...</a>
                                    </div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>
                                    <div><a href="#" title="关于2014年学校教学综合改革项目申报立项的通知">关于2014年学校...</a></div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>
                                    <div><a href="#" title="第34届国际企业管理挑战赛暨第18届中国赛区大赛的报名通知">第34届国际企业管...</a></div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>
                                    <div><a href="#" title="我校6个专业获批为黑龙江省普通高等学校“本科专业综合改革试点”建设项目">我校6个专业获批为...</a></div>
                                 </td>
                              </tr>

                              <tr>
                                 <td>
                                    <div><a href="#" title="关于核对2011-2012学年第一学期教学进程表的通知">关于核对2011-...</a></div>
                                 </td>
                              </tr>
                           </table>
                        </div>
                     </div>
                  </td>

                  <td class="td4">
                     <div class="decoration">
                        <div class="text">
                           <div class="title"><span>实验管理</span></div>
                        </div>
                     </div>
                  </td>

                  <td class="td5">
                     <div class="decoration">
                        <div class="text">
                           <div class="title"><span>教材管理</span></div>
                           <table>
                              <tr>
                                 <td>
                                    <div><a href="#" title="关于“质量工程”总结报告时间安排，请各教学单位务必准时上交总结报告 ">关于“质量工程”总...</a></div>
                                 </td>
                              </tr>
                              <tr>
                                 <td>
                                    <div><a href="#" title="关于06级毕业生军训补考的通知 ">关于06级毕业生军...</a></div>
                                 </td>
                              </tr>
                           </table>
                        </div>
                     </div>
                  </td>

               </tr>
            </tbody>
         </table>
      </div>
   </div>
</body>

</html>

写了个我们学校教务在线的页面作为案例；做了一段时间，尽力了，如有缺陷还望指正 ᶘ ᵒᴥᵒᶅ ！