html前端学习记录，利用html+css创建简单课程表

最新推荐文章于 2023-10-23 19:23:49 发布
最新推荐文章于 2023-10-23 19:23:49 发布
阅读量821 收藏 6
点赞数
分类专栏： 入门 自学 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AdSensca/article/details/115135979
版权

html+css创建简单课程表

设计思路

利用table,th,td表格标签建立基本框架，然后在其中填充div以添加样式

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程表css版</title>
    <link rel="stylesheet" href="./课程表.css">
</head>
<body>
    <table class="nov">
        <thead class="index">
            <tr>
                <th class="t1"><div class="d1"></div></th>
                <th><div>周一</div></th>
                <th><div>周二</div></th>
                <th><div>周三</div></th>
                <th><div>周四</div></th>
                <th><div>周五</div></th>
            </tr>
        </thead>
        <tbody class="content">
            <tr>
                <td>
                    <p>1</p>
                    <br>
                    <br>
                    8:30
                </td>
                <td rowspan="2"><div style="background:  #f5655b;">大学英语（Ⅳ）@10203</div></td>
                <td></td>
                <td rowspan="2"><div  style="background:  #4AA9E2;">大学体育</div></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <p>2</p>
                    <br>
                    <br>
                    9:30
                </td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <p>3</p>
                    <br>
                    <br>
                    10:30
                </td>
                <td></td>
                <td rowspan="2"><div style="background: #FCCF6B;">信号与系统@11302</div></td>
                <td rowspan="2"><div style="background:   #57D99C;">形势与政策（Ⅳ）@15208</div></td>
                <td></td>
                <td rowspan="2"><div style="background:  #72D3E5;">数据结构与算法分析</div></td>
            </tr>
            <tr>
                <td>
                    <p>4</p>
                    <br>
                    <br>
                    11:30
                </td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <p>5</p>
                    <br>
                    <br>
                    12:30
                </td>
                <td></td>
                <td rowspan="2"><div style="background:  #57D99C;">模拟电子技术@16204</div></td>
                <td></td>
                <td rowspan="2"><div style="background:  #3D54B2;">电装实习@11301</div></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <p>6</p>
                    <br>
                    <br>
                    14:30
                </td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <p>7</p>
                    <br>
                    <br>
                    15:30
                </td>
                <td rowspan="2"><div style="background:#EFD053;">毛概@14208</div></td>
                <td></td>
                <td rowspan="2"><div style="background:  #50DAC2;">电路、信号与系统实验</div></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <p>8</p>
                    <br>
                    <br>
                    16:30
                </td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <p>9</p>
                    <br>
                    <br>
                    17:30
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td rowspan="2"><div style="background:  #633FB4;">信号系统</div></td>
            </tr>
            <tr>
                <td>
                    <p>10</p>
                    <br>
                    <br>
                    18:30
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td rowspan="2"><div style="background: #EFD95B;">大学体育</div></td>
            </tr>
            <tr>
                <td>
                    <p>11</p>
                    <br>
                    <br>
                    19:30
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr class="l">
                <td>
                    <p>12</p>
                    <br>
                    <br>
                    20:30
                </td>
                <td><div style="background:  #76C0CB;">选修</div></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

css代码

body{
    margin: 0 auto;
    padding: 0;
    width: 1060px;
}
/* 设置课程表外边框 */
.nov{
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 2px solid rgb(172, 172, 172);
}
/* 设置表头的样式 */
.nov .index{
    background-color: #F0F6F6;
}
.nov .index tr{
    width: 1050px;
    height: 30px;
}
/* 第一个th没有内容且大小特殊，故此独立设置样式 */
.nov .index tr .t1{
    width: 60px;
}
/* 在每一个th中添加一个div盒子，可以再设置边框圆角的同时，边框线不会出现断裂 */
.nov .index tr .t1 div{
    width: 60px;
    border-left: 1px solid  #F0F6F6 ;
}
.nov .index tr th{
    width: 200px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgb(172, 172, 172);
}
/* 对表体下的每一个tr中的第一个td做样式设置 */
td:first-child{
    width: 60px;
    height: 80px;
    text-align: center;
    background-color: #F0F6F6;
}
td:first-child p{
    height: 5px;
    padding: 0;
    margin: 0;
    color:rgb(172, 172, 172) ;
}
/* 设置表体样式 */
.nov .content td{
    padding: 0;
    border-bottom:1px dashed  rgb(172, 172, 172);
}
.nov .content .l td{
    border-bottom:1px solid  rgb(172, 172, 172);
}
/* 对每个课程div做样式设置，每个课程的颜色不同，故此不做外联样式设置 */
.nov .content td div{
    margin: 0  1px 0   0;
    width: 199px;
    height: 153px;
/* height的值为153是因为要填充满整个td，div经过了三条宽度为1px的边框线，且内部上边距为10px 80*2+3-10=153*/
    border-radius: 10px;
    color: white;
    text-align: center;
    padding-top: 10px;
}
.nov .content .l div{
/* 选修课程的高度只经过两条边框线，且与 （.nov .content td div）中的样式层叠，80+2-10=72 */
    height: 72px;
}

效果图
在这里插入图片描述

非空空如也哉
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端】【案例】之HTML中应用表格制作简历、课程表（含跨行跨列）代码实操并附结果图
HY_Sophie的博客
11-15 2213
【前端】【案例】之HTML中应用表格制作简历、课程表（含跨行跨列）代码实操并附结果图
用HTML制作一个课程表
2201_75650749的博客
09-17 1792
表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）以上是简单的HTML表格用来展示一个星期的课程安排。表格使用了css样式来美化。
用HTML制作课程表
qq_75036592的博客
09-12 2701
3.在表格中，我们需要添加表头和表格行，用于显示课程的相关信息，如课程名称、教师、班级等。2.然后，我们需要在HTML文档中添加一个表格元素，用于显示课程表。4.最后，我们可以使用CSS来美化我们的课程表。1.首先，我们需要创建一个HTML文档。
html课程表（html+css）
weixin_30642029的博客
09-27 2035
<!DOCTYPE html> <head> <title> 课程表 </title> <style type="text/css"> .C3{border-top:40px rgb(101,147,74) solid;/*上边框宽度等于表 格第一行行高*/ width:0px;/*让容器宽度为0*/ ...
HTML5+CSS3案例一：学成在线
zhaoyang_m的博客
07-17 1181
链接：https://pan.baidu.com/s/10KBDVULhIOW698yODAmvSQ?，包含 HTML、CSS、图片、JavaScript等等。布局思路：先整体再局部，从外到内，从上到下，从左到右。标签结构：h1 > a > 网站名称（搜索关键字）调整盒子位置 → flex 布局、内外边距。画盒子，调整盒子范围 → 宽高背景色。搜索引擎优化：提升网站百度搜索排名。文件夹，内部包含当前网站的。网站根目录是指存放网站的。控制图片、文字内容样式。
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
最新发布
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
frontend-class：前端开发课程-从基本HTML到具有Angular和NativeScript的应用程序
02-04
【前端开发课程】是探索网页开发世界的深度学习之旅，涵盖了从基础HTML到高级框架Angular以及移动应用开发工具NativeScript的广泛知识。这个课程旨在帮助初学者和有一定经验的开发者建立起全面的前端技能栈，理解...
HTML笔记,html零基础入门视频课程（最适合初学者的教程）
04-24
HTML，全称HyperText Markup Language，即超文本标记语言，是网页制作的基础，也是互联网上应用最为广泛的...通过深入学习和实践，你可以创建出自己的静态网页，并为进一步学习JavaScript和其他前端技术打下坚实基础。
Html模板三.zip
01-06
HTML模板是前端开发中常用的工具，用于快速构建网站或应用的界面布局。这些模板通常包含预设计的HTML、CSS和...同时，了解HTML、CSS和JavaScript的基础知识将有助于更好地利用这些模板，实现更个性化和功能丰富的网站。
基于HTML5实现实时聊天工具【优质毕业设计、课程设计项目】
05-20
在这个项目中，HTML5作为主要的前端展示语言，利用其丰富的功能和特性来创建用户界面，同时结合其他Web技术，如JavaScript、CSS3等，实现动态交互和实时通信。 1. **HTML5的核心特性**： - **离线存储**（离线缓存...
html课程设计html模板
08-17
资源为html模板对初学者以及开发者都有很大的帮助。对进一步了解html有一定的促进作用
前端：【学成在线项目】HTML+CSS详细制作过程（代码只做参考）
weixin_49555741的博客
03-20 8315
1. 案例准备工作 1.1 准备素材和工具 （素材在最后有链接哦） 学成在线PSD源文件 开发工具：Photoshop（切图）/cutterman插件+vscode（写代码）+chrome（测试） 1.2 vscode案例准备 创建目录LearnOnline文件夹，存放页面的相关材料。 用vscode打开文件夹。 在LearnOnline文件夹里新建images文件夹来保存图片。 新建首页文件index.html（首页网站统一命令index.html）。 新建style.css样式
用HTML5编写一个课程表界面
DollyCat的博客
09-12 2335
方法：用li列表常见表格。 效果图如下 源代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的课程表</title> <style> body{ margin:0% auto; padding:0; background:#fff; t
HTML5中怎么用表格制作一个课程表
Lv200299的博客
09-12 1065
table标签中的border属性表示边框外围的粗细值 solid属性可以控制边框的颜色 background-color可以改变单元格的颜色。表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）单元格：表格中行与列相交所产生的区域。行：表格中的水平间隔；列：表格中的垂直间隔；
html，css实现呼吸灯、课程表、个人简历
Azhangbiny的博客
11-17 371
1、html+css实现呼吸灯效果，如下图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆</title> <style> div { box-sizing: border-box; } .content { width: 400px; height: 6
html课程表页面
热门推荐
Sunday CSDN博客
11-26 1万+
效果图： html代码部分： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>课程表</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> </head><body background="im
利用Html和CSS做一张课程表
a1k2l45k的博客
05-14 1万+
一 思路 利用HTML和CSS的知识建立一个表格，然后对表格进行美化和相关的单元格合并处理 二 步骤 建立一个七行六列的表格 将第一列的第二行到第四行合并成一个单元格（rowspan） 将第一列的第五行到第七行合并成一个单元格 （rowspan） 在相应的单元格中填上时间和课程 三 注意点 一定要将要合并的单元格注销掉 四 代码片段 &lt;!DOCTYPE html&g...
用html制作课表
g13700862269的博客
10-23 1515
</td>，如果有行合并用rowspan，步骤同上。<td rowspan="2">web表示层开发技术</td>第二步：在<body>下利用行<tr></tr>和列<td></td>打出大体的课程表。<td>web表示层开发技术</td><td>数字平面设计基础</td><td>班级人数：50</td><td>计算机应用基础</td><td>计算机应用基础
HTML 做课程表
qq_60212533的博客
09-19 2186
html 表格 课程表

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值