前端课程设计班级网站之教学在线（班级课程表）页面(HTML5+Css3+js+bootstrap+adjx)

最新推荐文章于 2023-03-08 00:42:09 发布

扎心小指针0

最新推荐文章于 2023-03-08 00:42:09 发布

阅读量457

点赞数

分类专栏：前端开发文章标签：前端 javascript bootstrap html5 css3

本文链接：https://blog.csdn.net/weixin_63381305/article/details/127910236

版权

前端开发专栏收录该内容

18 篇文章 4 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">


    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <title>教学在线</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .container-fluid {
            position: relative;
            background-color: skyblue;
            width: 1400px;
            top: 20px;
        }
        
        .a0 {
            margin: 0 auto;
            background: url(img/21.png);
            width: 1400px;
            height: 1300px;
        }
        
        img {
            height: 220px;
            width: 400px;
            border: 10px solid skyblue;
        }
        
        .tupian {
            float: left;
            width: 150px;
            height: 150px;
        }
        
        .xiangce {
            margin-top: 50px;
            width: 100%;
            height: 400px;
            position: relative;
            border: 1px solid darkred;
        }
        
        .xiangce1 {
            position: absolute;
            margin-left: 1px;
            transform: rotate(30deg);
        }
        
        .xiangce2 {
            position: absolute;
            margin-left: 150px;
            transform: rotate(15deg);
        }
        
        .xiangce3 {
            position: absolute;
            margin-left: 300px;
            transform: rotate(25deg);
        }
        
        .xiangce4 {
            position: absolute;
            margin-left: 450px;
            transform: rotate(35deg);
        }
        
        .xiangce img:hover {
            height: 300px;
            position: relative;
            transform: rotate(0);
            box-shadow: 0px 0px 30px 15px darkkhaki;
        }
        
        .fanhui {
            width: 200px;
            height: 200px;
            /*border: 1px solid red;*/
            line-height: 300px;
        }
        
        #banjifengcai {
            position: relative;
            top: 60px;
        }
        
        #m0 {
            position: relative;
            top: 80px;
        }
    </style>


</head>

<body>
    <div class="a0">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">新闻时讯</a>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">软件212班</a>
                        </li>
                        <li><a href="#">欢迎您</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        菜单
        <b class="caret"></b>
      </a>
                            <ul class="dropdown-menu">
                                <li><a href="课程设计.html">返回首页</a></li>
                                <li><a href="教学在线.html">教学在线</a></li>
                                <li><a href="班级概况.html">班级概况</a></li>
                                <li class="divider"></li>
                                <li><a href="留言板2.html">建议评论</a></li>
                                <li class="divider"></li>
                                <li><a href="天气预报.html">天气预报</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="row " id="timetable">
                <h2 class="col-md-12 text-center w">班级课程表</h2>
                <table class="table  col-md-12">
                    <tr>
                        <th>时间</th>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                        <th>星期四</th>
                        <th>星期五</th>
                    </tr>
                    <tr>
                        <td>8：00-9：50</td>
                        <td bgcolor="skyblue">概率论与数理统计<br>(1-18周)<br>【刘君】<br>教三楼3706<br/> </td>
                        <td bgcolor="skyblue">大学物理<br>(1-18周）<br>[甄小娟]<br>教二楼2402</td>
                        <td></td>
                        <td bgcolor="skyblue">软件工程实践二<br>(1-18周)<br>【文静】<br>软件工程实验室<br/></td>

                    </tr>
                    <tr>
                        <td>10：10-12：00</td>

                        <td bgcolor="skyblue">大学英语III<br>(1-18周)<br>【常新宇】<br>教二楼2100<br/></td>

                        <td bgcolor="skyblue">数据结构算法<br>(1-18周)<br>【任志国】<br>3G软件开发实验室<br/></td>
                        <td bgcolor="skyblue">软件工程实践II<br>(1-18周)<br>【文静】<br>软件工程实验室<br/></td>
                        <td bgcolor="skyblue">大学物理<br>(1-18周)<br>【甄小娟】<br>教二楼2402<br/></td>

                        <td bgcolor="skyblue">数据结构算法<br>(1-18周)<br>【任志国】<br>3G软件开发实验室<br/></td>
                    </tr>
                    <tr>
                        <td colspan="6" width="30%" height="100px">午休：12：00-14.20</td>
                    </tr>
                    <tr>
                        <td>14：30-16：20</td>

                        <td bgcolor="skyblue">毛中特课程<br>(1-18周)<br>【董艳艳】<br>教三楼3210<br/></td>
                        <td bgcolor="skyblue">大学体育III乒乓球<br>(1-18周)<br>【崔明】<br>培黎体育馆<br/></td>
                        <td bgcolor="skyblue">大学英语III<br>(1-18周)<br>【常新宇】<br>教二楼2100<br/> </td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>16：40-18：30</td>
                        <td></td>
                        <td></td>
                        <td bgcolor="skyblue">摄影基础<br>(2-18周)<br>[林子涵]<br>网上<br/></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>

                <div class="row " id="banjifengcai">
                    <h2 class="col-md-12 text-center w " style="color: skyblue;">作业展示</h2>
                    <div class="xiangce col-md-12">
                        <div class="row" id="m0">
                            <div class="tupian "><img class="xiangce1" src="img/zy01 (1).png"></div>
                            <div class="tupian "><img class="xiangce2" src="img/zy01 (2).png"></div>
                            <div class="tupian "><img class="xiangce3" src="img/zy01 (1).png"></div>
                            <div class="tupian "><img class="xian" src="img/zy01 (2).png"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>

</html>

扎心小指针0

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端课程设计班级网站之教学在线（班级课程表）页面(HTML5+Css3+js+bootstrap+adjx)

【代码】前端课程设计班级网站之教学在线（班级课程表）页面(HTML5+Css3+js+bootstrap+adjx)
复制链接

扫一扫