Web实验一：课程表

已于 2024-04-30 22:06:26 修改
阅读量194 收藏
点赞数 2
分类专栏： Web作业 文章标签： 前端
于 2024-04-30 22:05:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/landexiangmz/article/details/138252694
版权

效果图：

主页

课表代码html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的课表</title>
    <link rel="stylesheet" href="css/style2.css">
    <style>
        body{
        background-image: url(image/back2.jpg);
        background-size: 400px 1450px;
        background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <p class="zi1">学期课表</p>
   <table  rules="all" class="zi3" 
    cellspacing="0"
    cellpadding="0"
   >
   <col style="width:12% " span="8" /> 
    <tr>
        <td>星期</td>
        <td>周一</td>
        <td>周二</td>
        <td>周三</td>
        <td>周四</td>
        <td>周五</td>
        <td>周六</td>
        <td>周日</td>
    </tr>
    <tr>
        <td class="zi4">
            <p>1</p>
            <p>08:00~08:40</p>
        </td>
        <td></td>
        <td></td>
        <td rowspan="2" bgcolor=#abcdef>离散数学</td>
        <td></td>
        <td></td>
        <td rowspan="12" colspan="2" bgcolor=#FFC0CB>ACM训练</td>
    </tr>
    <tr>
        <td class="zi4">
            <p>2</p>
            <p>08:45~09:25</p>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="zi4">
            <p>3</p>
            <p>09:40~10:20</p>
        </td>
        <td rowspan="3" bgcolor=#decafb>数据库原理及应用</td>
        <td rowspan="3" bgcolor=#ffcc66>Web前端开发技术</td>
        <td rowspan="3" bgcolor=#bedcaf>概率与数理统计</td>
        <td rowspan="3" bgcolor=#fdecab>计算机组成与结构</td>
        <td></td>
    </tr>
    <tr>
        <td class="zi4">
            <p>4</p>
            <p>10:35~11:15</p>
        </td>
        <td rowspan="2" bgcolor=#afcbde>离散数学</td>
    </tr>
    <tr>
        <td class="zi4">
            <p>5</p>
            <p>11:20~12:00</p>
        </td>
    </tr>
    <tr>
        <td class="zi4">
            <p>6</p>
            <p>14:00~14:40</p>
        </td>
        <td rowspan="2" bgcolor=#bceadf>大学体育—排球</td>
        
        <!-- <td></td> -->
        <td rowspan="4" bgcolor=#cafedb>面向对象程序设计-Java</td>
        <td></td>
        <td rowspan="2" bgcolor=#bfcead>马克思主义原理</td>
        <td></td>
    
    </tr>
    <tr>
        <td class="zi4">
            <p>7</p>
            <p>14:45~15:25</p>
        </td>
        <td></td>
        <!-- <td></td> -->
        <td></td>
    </tr>
    <tr>
        <td class="zi4">
            <p>8</p>
            <p>15:40~16:20</p>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="zi4">
            <p>9</p>
            <p>16:30~17:10</p>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="zi4">
            <p>10</p>
            <p>18:00~18:40</p>
        </td>
        <td></td>
        <td></td>
        <td rowspan="3" bgcolor=#ffa07a>法语入门</td>
        
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="zi4">
            <p>11</p>
            <p>18:45~19:25</p>
        </td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="zi4">
            <p>12</p>
            <p>19:40~20:20</p>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
   </table>
    <p class="zi2"> <a href="index.html">返回</a> </p>
</body>
</html>

主页代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="css/style1.css">
    <style>
        body{
        background-image: url(image/back1.jpg);
        background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <p class="zi1">我的个人主页</p>
    <p class="zi2">首页  <a href="kebiao.html">课表</a> 考试安排  成绩查询  问题反馈</p>
    <div class="i"><img class="tupian" src="image/xuexi.png" width="820" height = "510">   </div>
</body>
</html>

主页css（style1.css）：

@charset "utf-8";
.zi1{
    font-size: 60px;
    text-align: center;
    color:black;
    font-weight: bold;
    font-family: "楷体";
}
.zi2{
    font-size: 30px;
    text-align: right;
    color:black;
    font-weight: bold;
    font-family: "楷体";
}
.zi3{
    font-size: 30px;
    text-align: center;
    
    color:black;
    font-weight: bold;
    font-family: "楷体";
}
.zi4{
    font-size: 17px;
    text-align: center;
    color:black;
    font-weight: bold;
    font-family: "楷体";
}
table{
    border: 1px solid #0b0b0b;
    margin: 0 auto;
    /* background-color: aliceblue; */
    width: 800px;
    /* height: 900px; */
}
.bj{
    background-color: aquamarine;
}

课表css（style2.css）

@charset "utf-8";

.zi1{
    font-size: 60px;
    text-align: center;
    color:black;
    font-weight: bold;
    font-family: "楷体";
}
.zi2{
    font-size: 30px;
    text-align: center;
    color:black;
    font-weight: bold;
    font-family: "楷体";
}
.i{
    vertical-align: middle;
    text-align: center;
}

编程刘亦菲是我瞎说的，好好努力少女！
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用HTML&CSS创建一个网页课程表
qq_45915712的博客
11-05 1万+
使用HTML&CSS创建一个网页课程表整体布局加入表头数据合并上下单元格并加入课表信息美化页面最终效果 整体布局 对于课程表，其实就是一个表格，其中加入CSS样式。 因此，我们先创建一个九行八列的表格（以我的课表为例）。 <table border="1"> <tr> <td> </td> <td> </td> <td> </td> <td> </t
课程表html,
05-21
课程表html,排课课程表，课程表html,排课课程表，课程表html,排课课程表
前锋PHP课程表,练手Lab课程表小程序源码 v1.0.0
weixin_34617955的博客
03-17 397
练手Lab课程表小程序源码是一个基于Thinkphp系统进行开发的前后端分离系统。源码功能介绍1、情侣功能2、情侣间留言3、情侣间互相设置课程表背景4、自己日、周课程表背景设置5、教务系统课程表导入6、导入别人分享的课表7、导入别人分享的单课8、多校支持9、首页顶部氛围设置(管理员设置，节日氛围)环境要求1、服务端：php+mysql(基于fastadmin)2、小程序端：原生+colorui准备...
html课程表页面
11-26
html课程表页面
课表HTML源码
07-13
加入css的炫彩课表，加有 时钟效果
东北大学软件学院web前端课程实验代码及报告
12-19
综合以上信息，这个压缩包文件是东北大学软件学院Web前端课程的一个教学资源包，包含实验代码和相关报告，学生可以通过这些资料学习到Web前端开发的基础知识和实践经验，同时提升编程技能和问题解决能力。
web课程的实验课所有
05-29
【标题】"Web课程的实验课所有"涵盖了Web开发的基础知识和实践经验，是学习Web技术的重要环节。在Web课程中，实验课通常包括了HTML、CSS、JavaScript等基础语言的学习，以及服务器端编程、数据库交互、前端框架应用...
web大作业实验报告学生信息管理系统样本.doc
12-15
Tomcat服务器是一种免费开放源代码Web应用服务器，属于轻量级应用服务器，在中小型系统和并发访问童虎不是诸多场合下被普遍使用，是开发和调试JSP程序首选。Tomcat服务器可以独立运营，支持多种编程语言，包括Java、...
《Web应用开发实践》实验课教学大纲.docx
最新发布
12-15
《Web应用开发实践》实验课教学大纲旨在通过一系列实践活动，深化学生对Web开发技术的理解，提升其实际应用能力。课程设计注重理论与实践相结合，强调动手能力和团队合作精神的培养。 课程的主要目标是使学生掌握...
web实验指导书
08-28
实验要求学生熟练掌握常用的Web技术，如XHTML、CSS、JavaScript和PHP等，并能创建基本的Web页面，应用层叠样式表（CSS）进行页面布局，进行基本的动态文档开发，以及掌握服务器端编程的基本方法，积累小型项目开发...
html-课程表
01-20
课表 *{ margin: 0; padding: 0; } td{ text-align: center; } .math{ width: 90px; height: 250px; } .more{ width: 60px; } .time{ width: 110px; } .emp{ width: 60px; } .cour{ width: 108px } .col{ background-color: rgba(224,
学生课程表源代码
03-04
学生课程表源代码，非常实用，绝对值得学习的代码。
简单的html课表
07-31
用html制作一个简单的个人课表模板，用html制作一个简单的个人课表模板，
Thinkphp课程表小程序源码v1.0.0全开源版 前后端分离.rar
06-23
Thinkphp课程表小程序源码v1.0.0全开源版 前后端分离.rar
利用Html完成一张课程表的网页
yyy__yyy_的博客
07-17 5871
利用HTML中表格的相关知识，完成课程表的网页开发。
HTML制作课表源代码
weixin_51763809的博客
09-19 6247
<!DOCTYPE html> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>课表</title> </head> <body align="center"> <table align="center" border="1" ...
html做一个课程表
热门推荐
博客
07-09 5万+
学习了html的表格，作为练习做一个课程表，先给大家看一下需要达成的目标来看一看我完成的结果先在这里献上代码&lt;html&gt; &lt;title&gt;课程表&lt;/title&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;table border = 6 frame = void align = center width = 650px ...
用HTML写一个超级课程表页面
Mr_jianghanlin的博客
03-09 4852
用HTML写一个超级课程表页面 首先给大家展示一下效果图，他家可以根据自己的喜好，换成自己喜欢的颜色 看到这个图可以把它肯成一个大的表格来进行做，将一些单元格进行相应的合并就可以达到上面所期望的图片效果，然后在用css选择器进行颜色的修饰，最终可以达到上图的效果。 下面我来一起看下代码部分： <!DOCTYPE html> <html> <head> ...
WEB实验1
08-03
本次WEB实验一主要包括了三个功能模块：用户登录、信息添加和信息查询。首先，实现了系统的用户登录功能，要求用户输入正确的用户名和密码才能成功登录系统。其次，实现了对单表的信息添加功能，用户可以在界面上...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值