用HTML5编写一个课程表界面

最新推荐文章于 2024-04-30 22:05:29 发布
最新推荐文章于 2024-04-30 22:05:29 发布
阅读量2.3k 收藏 16
点赞数 3
分类专栏： 前端学习 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DollyCat/article/details/108553704
版权

方法：用li列表常见表格。
效果图如下
在这里插入图片描述
源代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的课程表</title>
        <style>
    body{
      margin:0% auto;
      padding:0;
      background:#fff;
      text-align:center;
      }
    body>div{
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }
    div,form,ul,ol,li,span,p,dl,dt,dd,img{
          margin: 0;
          padding: 0;
          border: 0;
    }
    h1,h2,h3,h4,h5,h6{
        margin: 0;
        padding: 0;
        font-size: 12px;
        font-weight: normal;
    }
    ul,ol,li{
        list-style: none;
    }  /*清除列表默认样式*/
/*设置浮动*/
      .fl{float: left;}
/*课程背景颜色*/
      .xsyzc{background-color:#00ff40;}
      .czxt{background-color:#A349A4;}
      .ui{background-color:#ffff17;}
      .dl{background-color:#ff5858;}
      .sjsj{background-color:#ff8040;}
      .ps{background-color:#400080;}
      .rg{background-color:#408080;}
      .web{background-color:#804040;}
      .nr{
        width:890px;
        height:1180px;
        background-image: url(bg.jpg);
        margin: 0 auto;
      }
/*设置标题CSS规则*/
      .bt{
        padding-top: 35px;
        margin: 0 auto;
      }
      .bt p{
        font-size: 40px; font-family: 微软雅黑;color: #fff;
      }
/*设置星期CSS规则*/
      .TL{
        width: 890px;
        height: 4px;
        background-color: #d2d2d2;
        margin-top: 30px;
      }
      .Week{
        width: 890px;
        height: 58px;
最低0.47元/天 解锁文章
DollyCat
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用HTML5 编写课程表界面
weixin_46439490的博客
03-07 964
下面是用HTML5 编写的一个课程表界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的课程表</title> <link rel="stylesheet" href="kcb.css" t...
利用Html完成一张课程表的网页
yyy__yyy_的博客
07-17 5901
利用HTML中表格的相关知识，完成课程表的网页开发。
用HTML制作一个课程表
2201_75650749的博客
09-17 1791
表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）以上是简单的HTML表格用来展示一个星期的课程安排。表格使用了css样式来美化。
Web实验一：课程表
最新发布
landexiangmz的博客
04-30 202
课表css（style2.css）
用html写一个简单课表
tory886的博客
03-29 8831
html实例-课表 本文章主要介绍由html中的表格table来制作课表，完成图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的课表</title> <style type="text/css"> ...
HTML制作简单课表
IPhoneP40Pro的博客
06-23 1万+
html，css制作一张简单又美观的课表
利用Html和CSS做一张课程表
a1k2l45k的博客
05-14 1万+
一 思路 利用HTML和CSS的知识建立一个表格，然后对表格进行美化和相关的单元格合并处理 二 步骤 建立一个七行六列的表格 将第一列的第二行到第四行合并成一个单元格（rowspan） 将第一列的第五行到第七行合并成一个单元格 （rowspan） 在相应的单元格中填上时间和课程 三 注意点 一定要将要合并的单元格注销掉 四 代码片段 &lt;!DOCTYPE html&g...
用xml.xsl 写的课程表
11-12
标题中的“用xml.xsl 写的课程表”指的是使用XML（可扩展标记语言）和XSL（可扩展样式表语言）技术创建的课程表应用。XML是一种用于标记数据的语言，它允许数据以结构化的方式表示，而XSL则是一种转换XML文档的样式...
android课程表爬取教务处课表app
04-17
在Android开发领域，"android课程表爬取教务处课表app"是一个常见的项目实践，旨在帮助学生自动获取并展示其个人的课程安排。这个项目的核心技术主要包括Android应用开发、网络爬虫以及数据解析。下面将详细介绍这些...
HTMLS-CSS：HTML5和CSS课程
02-12
在这个"HTMLS-CSS：HTML5和CSS课程"中，你将深入学习这两门核心技术，掌握创建现代、响应式且富有表现力的网页的关键知识。 HTML5是HTML的最新版本，引入了许多新特性以提高网页开发的效率和用户体验。其中，一些...
课表HTML源码
07-13
加入css的炫彩课表，加有 时钟效果
ReactProject:React课程表
04-30
在这个名为"ReactProject"的项目中，我们将深入探讨如何使用React来创建一个课程表应用。这个应用可能是针对在线教育平台或者学习管理系统，提供用户查看和管理课程的界面。 首先，我们要了解React的基本概念。...
html课程设计（鲜花网站）
11-15
在本项目中，我们主要探讨的是使用HTML5、JavaScript和CSS设计的一个鲜花网站。这个网站不仅界面美观，而且功能完善，是HTML课程设计中的一个典型示例。下面将详细介绍这三个核心技术以及它们在构建鲜花网站中的应用...
学生课程表
12-31
这款代码项目适合编程新手学习，通过阅读和理解代码，可以了解到如何实现一个简单而实用的课程表应用。 在编程领域，创建一个课程表应用涉及到多个知识点： 1. **数据结构与算法**：为了存储和处理课程信息，我们...
学校网站-web界面.zip
08-16
这个压缩包“学校网站-web界面.zip”是一个关于大学第二学期的课程设计项目，专注于Web界面的构建，主要使用了CSS和HTML技术。该项目针对的是刚入门Web开发的学生，提供了一个基础的实践平台，帮助他们理解和掌握Web...
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制作表格，并对表格上色
weixin_52272028的博客
04-01 736
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
html前端学习记录，利用html+css创建简单课程表
AdSensca的博客
03-23 821
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&g
帮我用php建一个班级学生成绩管理系统包含学生表课程表选课表的基础界面成绩查询界面
06-09
好的，我可以为你提供一个使用PHP语言编写的班级学生成绩管理系统的示例代码，包括学生表、课程表、选课表和成绩表的基础界面和成绩查询界面。注意，这只是一个示例代码，你需要根据自己的实际需求进行修改和完善。 1. 学生表（student.php） ``` <?php // 连接数据库 $conn = mysqli_connect("localhost", "root", "", "school"); // 查询学生信息 $sql = "SELECT * FROM student"; $result = mysqli_query($conn, $sql); // 输出学生信息 echo "<table>"; echo "<tr><th>学生编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>年级</th><th>班级</th></tr>"; while($row = mysqli_fetch_assoc($result)) { echo "<tr>"; echo "<td>".$row['student_id']."</td>"; echo "<td>".$row['name']."</td>"; echo "<td>".$row['gender']."</td>"; echo "<td>".$row['age']."</td>"; echo "<td>".$row['grade']."</td>"; echo "<td>".$row['class']."</td>"; echo "</tr>"; } echo "</table>"; // 关闭连接 mysqli_close($conn); ?> ``` 2. 课程表（course.php） ``` <?php // 连接数据库 $conn = mysqli_connect("localhost", "root", "", "school"); // 查询课程信息 $sql = "SELECT * FROM course"; $result = mysqli_query($conn, $sql); // 输出课程信息 echo "<table>"; echo "<tr><th>课程编号</th><th>课程名称</th><th>学分</th></tr>"; while($row = mysqli_fetch_assoc($result)) { echo "<tr>"; echo "<td>".$row['course_id']."</td>"; echo "<td>".$row['name']."</td>"; echo "<td>".$row['credit']."</td>"; echo "</tr>"; } echo "</table>"; // 关闭连接 mysqli_close($conn); ?> ``` 3. 选课表（selection.php） ``` <?php // 连接数据库 $conn = mysqli_connect("localhost", "root", "", "school"); // 查询选课信息 $sql = "SELECT s.name AS student_name, c.name AS course_name FROM course_selection cs JOIN student s ON cs.student_id = s.student_id JOIN course c ON cs.course_id = c.course_id"; $result = mysqli_query($conn, $sql); // 输出选课信息 echo "<table>"; echo "<tr><th>学生姓名</th><th>课程名称</th></tr>"; while($row = mysqli_fetch_assoc($result)) { echo "<tr>"; echo "<td>".$row['student_name']."</td>"; echo "<td>".$row['course_name']."</td>"; echo "</tr>"; } echo "</table>"; // 关闭连接 mysqli_close($conn); ?> ``` 4. 成绩表（score.php） ``` <?php // 连接数据库 $conn = mysqli_connect("localhost", "root", "", "school"); // 查询成绩信息 $sql = "SELECT s.name AS student_name, c.name AS course_name, sc.score FROM score sc JOIN student s ON sc.student_id = s.student_id JOIN course c ON sc.course_id = c.course_id"; $result = mysqli_query($conn, $sql); // 输出成绩信息 echo "<table>"; echo "<tr><th>学生姓名</th><th>课程名称</th><th>成绩</th></tr>"; while($row = mysqli_fetch_assoc($result)) { echo "<tr>"; echo "<td>".$row['student_name']."</td>"; echo "<td>".$row['course_name']."</td>"; echo "<td>".$row['score']."</td>"; echo "</tr>"; } echo "</table>"; // 关闭连接 mysqli_close($conn); ?> ``` 5. 成绩查询界面（query.php） ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>成绩查询</title> </head> <body> <h1>成绩查询</h1> <form method="get" action="query.php"> <label>学生编号：</label> <input type="text" name="student_id"> <input type="submit" value="查询"> </form> <?php // 如果学生编号不为空，则进行成绩查询 if(!empty($_GET['student_id'])) { $student_id = $_GET['student_id']; // 连接数据库 $conn = mysqli_connect("localhost", "root", "", "school"); // 查询该学生所选的所有课程及成绩 $sql = "SELECT c.name AS course_name, sc.score FROM score sc JOIN course c ON sc.course_id = c.course_id WHERE sc.student_id = '$student_id'"; $result = mysqli_query($conn, $sql); // 输出查询结果 echo "<h2>学生编号为 $student_id 的成绩如下：</h2>"; echo "<table>"; echo "<tr><th>课程名称</th><th>成绩</th></tr>"; while($row = mysqli_fetch_assoc($result)) { echo "<tr>"; echo "<td>".$row['course_name']."</td>"; echo "<td>".$row['score']."</td>"; echo "</tr>"; } echo "</table>"; // 关闭连接 mysqli_close($conn); } ?> </body> </html> ``` 以上是一个使用PHP语言编写的班级学生成绩管理系统的示例代码，你可以根据自己的实际需求进行修改和完善。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值