18910140161

Html

首页 >> 前端开发 >> Html

HTML5作业3超级课程表模板 - ZeroaoLive2D

顺晟科技

2022-09-15 19:45:56

266

HTML5作业3超级课程表模板

我们作业是做一个下图一样的模板

分析：

1、主体使用表格

2、图片用<caption>包下

3、表头<thead>

4、合拼单元格使用rowspan

5、表格默认是双线，设置border-collapse: collapse;设置为单线

6、为适应不同手机屏幕大小，需用响应式

源代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width,user-scalable=0, initial-scale=1.0,maximum-scable=1.0,minimum-scable=1.0">
    <script>
        var deviceWidth = document.documentElement.clientWidth;
        if(deviceWidth > 720) deviceWidth = 720;
        document.documentElement.style.fontSize = deviceWidth/7.2 + \'px\';
    </script>
    <style type="text/css">
        *{
            margin: 0 ;
            padding: 0;
            list-style: none;
        }
        .clear:after{
            display: block;
            clear: both;
            content: " ";
        }
        html{
            font-size: 100px;
            min-width: 7.2rem;
        }
        a{
            text-decoration: none;
        }
        .box{
            width: 7.2rem;
            margin: 0 auto;
        }
        
        table{
            table-layout: fixed;
            word-break: break-all; 
            word-wrap: break-word; 
            width: 100%;
            border-collapse: collapse;
        }
        table caption img{
            
            width: 100%;
            display: block;
        }
        table thead td{
            height: 30px;
            background: #dbe0e3;
        }
        table thead td:first-child,table tr td:first-child{
            border-right: 2px solid #c5c7c6;
            width: 18px;
        }
        table tr{
            font-size: 0.16rem;
            
            text-align: center;
        }
        table  td{
            width: 0.56rem;
            height: 45px;
            border: 1px solid #c5c7c6;
            
        }
        table tr td p{
            font-size: 0.08rem;
            color: #FFFFFF;
            padding: 1px;
        }
        .rad{
            border-radius: 6px;
            padding: 1px;
            
        }
        .blue{
            background: #38aedc;
        }
        .pink{
            background: #e9729c;
        }
        .gree{
            background: #91bf38;
        }
        .yellow{
            background: #f8b73f;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- sa -->
        <table cellspacing="0" cellpadding="0">
            <caption><img src="./img/10.jpg" ></caption>
            <thead>
                <td></td>
                <td>周一</td>
                <td>周二</td>
                <td>周三</td>
                <td>周四</td>
                <td>周五</td>
                <td>周六</td>
                <td>周七</td>
            </thead>

            <tr>
                <td>1</td>
                <td rowspan="2" class="blue rad">
                    <p >日语I</p>
                </td>
                <td rowspan="2" class="pink rad">
                    <p >思想道德修养与法律</p>
                </td>
                <td rowspan="2" class="gree rad">
                    <p >形势与政策IV</p>
                </td>
                <td rowspan="2" class="yellow rad">
                    <p>英语写作</p>
                </td>
                <td rowspan="2" class="blue rad ">
                    <p>高等数学</p>
                </td>
                <td rowspan="4" class="pink rad">
                    <p>雅思</p>
                </td>
                <td></td>

            </tr>
            <tr>
                <td>2</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td rowspan="2"  class="pink rad">
                    <p>英语</p>
                </td>
                <td ></td>
                <td rowspan="2"  class="yellow rad">
                    <p>创业与就业指导</p>
                </td>
                <td rowspan="2"  class="blue rad ">
                    <p>计算机科学导论</p>
                </td>
                <td rowspan="2"  class="pink rad">
                    <p>大学英语</p>
                </td>
                <td ></td>
                
            </tr>
            <tr>
                <td>4</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>5</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>6</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>7</td>
                <td rowspan="2"  class="yellow rad">
                    <p>移动互联网技术</p>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td rowspan="2"  class="yellow rad">
                    <p>计算机科学导论</p>
                </td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>8</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>9</td>
                <td rowspan="2"  class="blue rad ">
                    <p>计算机科学导论</p>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td rowspan="2"  class="blue rad ">
                    <p>动画鉴赏</p>
                </td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>10</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>11</td>
                <td rowspan="2"  class="pink rad">
                    <p>mysql入门与应用</p>
                </td>
                <td rowspan="2"  class="gree rad">
                    <p>计算机编程基础</p>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>12</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</body>
</html>

结果如图：

 

上一篇：HTML5播放视频 并使用ffmpe 下一篇：HTML 表格
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！