一、制作前提：
-
我们的目标：
-
熟读文章《网页编程中叫不上名的色彩是如何准确表达的？》用截图或其他你能想到的方式获取到表头周一到周五5个单元格的背景色，并记录下来；获取到语、数、英、化、物理五个科目的字体颜色并记录下来；获取到奇数列的背景颜色并记录下来。
-
熟读文章《任何人都可以做网页！幸运的你，快来试试看！》知道以下样式的含义及用法：
内边距:padding
背景色:background-color
字体大小: font-size
文字对齐：text-align: left或right或center -
完成《怎么用记事本做一个漂亮的网页课程表(1)？》布置的任务，因为该课程任务就相当于盖好了一个毛坏房，而这个课程的任务就是完成装修！
二、样式类名属性
在文章《任何人都可以做网页！幸运的你，快来试试看！》中介绍style这个属性，这个属性是对当前容器的样式进行定义，所以又叫行内样式。使用行内样式会这样的问题：比如我们要把课程表里所有“语文”字体颜色改成桔色，就需要把所有含“语文”的单元格找出来，添加上相同的行内行样式。这会造成严重的代码冗余，致使代码的可读性变差。针对这个问题HTML提供了class(样式类名)属性，利用这个属性我们可以事先定义好一个样式类，如果哪个容器需要这个样式，就给这个容器赋值这个样式类名就好了。相比较而言，行内样式更适用于样式比较特殊的地方。可能说起来比较抽象，且看示例：
<style>
/*
自定义一个名为yuwen的样式类，
字体颜色: rgb(121,21,210);
*/
.yuwen {
color: rgb(121,21,210);
}
.shuxue{
/**自行完善**/
}
/**
语文和数学共同的样式
字体大小：14像素;
字体权重：粗体，
内边距-左： 20像素;
内边距-右： 20像素;
内边距-上： 5像素;
内边距-下： 5像素;
**/
.yuwen,
.shuxue{
font-size: 14px;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
/**
设置奇数列的单元格背景
**/
.jishulie{
background: rgb(252,254,231);
}
/**
给所有的td,th容器的边框设置成
边线-宽度： 1像素
边线-颜色：红色
**/
td,
th{
border-width: 1px;
border-color: red;
}
/**
把表格边框折起来，默认是分开的，所以比较丑
**/
table{
border-collapse: collapse;
}
</style>
<table>
<tr>
<td class="yuwen jishulie">语文</td>
<td class="shuxue">数学</td>
<td class="yuwen jishulie">语文</td>
</tr>
</table>
style 样式容器，只能用于放置各种样式定义，对语法有严格的要求，不能用于放置其它容器。
三、其它问题
1. “上午”和“下午”如何实现竖向显示？
有Excel经验的同学可能知道“上(ALT+ENTER 换行)午”这样实实，但是网页中回车换行会被换略，取而代之的是<br >签行。即把"上午”改为”上<br >午"即可。
2. 其它样式该怎么处理？
如“中午”单元格的样式是特殊样式，可采用行内样式解决。如何你要是觉得行内样式不好看，也可以自定义样式解决，方法上文中介绍过了。
四、结语
如果你已经掌握了以上知识点，我相信你很快就可以独立做出一张漂亮的课程表。如果你成功做出来请告诉我，你的进步非常大。没有做成的话也请告诉我，有任何疑问都可以留言，大家一起帮忙解决。
网友评论