实验二、制作一个本学期使用的课程表页面，要求内容清晰，格式规整，有背景图像单击某一门课程名称，可以跳转到该课程的简介（同一页面）

努力向大佬看齐的小菜菜

于 2021-11-27 17:17:52 发布

阅读量1.7k

点赞数 6

分类专栏： html前端设计与开发实验文章标签： html 前端 html5

本文链接：https://blog.csdn.net/m0_53984658/article/details/121579969

版权

本文档展示了如何使用HTML和CSS创建一个课程表，点击课程名称会在同一页面显示课程简介。课程表设置了合适的宽度、高度和背景图片，并通过CSS美化。课程单元格通过rowspan属性进行合并，实现课程跨越多节的显示。点击课程链接利用锚点实现页面内跳转，显示课程的上课地点、周数、节数和教师信息。课程简介部分同样采用表格布局，详细介绍了每门课程的相关信息。

摘要由CSDN通过智能技术生成

首先看实验内容，要做一个课程表，并且单击某一门课程名称，可以跳转到该课程的简介，而且是在同一个页面上。所以肯定要用到两个表格，一个是关于课程表的表格，一个是关于课程介绍的表格。

第一，关于课程表，把表格的宽设置成1430，高设成720，这是我经过好多次修改后，感觉让课程表看起来最合适最美观的数据了。然后将表格设置成居中，然后把表格里面那些单元格的线条清理掉，不显示线条，因为显示出来我感觉不好看。接下来再设置背景，还有背景的大小。接下来就是设置单元格的内容，包括星期几和第几节等等，然后我是按照从上到下，从左到又设置的单元格内容.因为大学的课程，是一次性占两节课的，甚至更多，所以需要合并单元格.例如Python程序设计和概率论分别占了一二节和三四节，所以在编写的时候需要将第二列的二三两行、四五两行进行合并。所以用到了rowspan，它的作用就是跨行合并，以上两个课程占了两节课，所以rowspan设置为2，在另一个图中前端这门课程是从第一节到第六节，需要向下跨6个单元格，所以rowspan=6.在设置单元格内容的时候，关于内容的颜色、字体、大小等等，都是相同的.

第二、关于点击后课程介绍的表格,其实该表格的设置和上面课程表的设置是一样的，只是替换了内容。总体上来说是先建成一个表格的总体框架，然后再向里面填充具体内容。关于课程表具体内容格式方面，我参考的是超级课程表的形式，在相关课程下面附上上课的地点，然后点击课程后出现课程的上课周数、节数、地点和授课的老师。因为实验内容里面要求点击后要出现关于这门课程的简介，所以我在最初的格式上又添加了课程简介这一内容。关于课程介绍这一个表格，和课程表表格非常相似，在课程介绍这里，我将课程名字分别设置成了同色调的不同颜色，因为我感觉非常美观。然后关于课程简介的内容，我是从百度百科、教学计划和智慧树上进行获取的。以上就是关于课程介绍这个表格的代码及设置想法。

第三、关于如何实现点击后可以到跳转到本页面的的该课程的课程简介的功能，我用的是课本上所说的锚点的方法，即<a></a>，将其嵌入到<td></td>中去。

整体代码如下：

<html>
<head>
<title>我的课表</title>
<!--
   <style type="text/css"> 
td{
       border-radius: 4%;
}
   </style>  
-->
</head>

<body>

<table border="0"  width="1430" align="center" height="720"  background="C:\Users\beixi\Desktop\20211120223434.jpg" background-size:100% 100%>
                                
<tr align="middle">
<td width="30" ></td>
<td width="50" align="center" height="30">周一</td>
<td width="50"align="center"  height="30">周二</td>
<td width="50" align="center" height="30">周三</td>
<td width="50" align="center" height="30">周四</td>
<td width="50" align="center" height="30">周五</td>	
<td width="50" align="center" height="30">周六</td>	
<td width="50" align="center" height="30">周日</td>				
</tr>
<tr align="middle">

<td >1 </td>
 <td></td>	
 <td  rowspan="2">
     <a style="color=black;text-decoration: none;text-decoration: none;" href="#python程序设计"> python程序设计<br/>
      <font>@2号公教楼JT104</font><br/>
      </a>
     </td>

 <td rowspan="2">
    <a style="color=black;text-decoration: none;text-decoration: none;" href="#前端设计与开发">前端设计与开发<br/>
    <font>@2号公教楼JT205</font><br / >
    </a>
    </td>

 <