表格练习
2017-09-28 本文已影响25人
baobaodz
Paste_Image.png
开始，先构造基本的框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台主页</title>
<link rel="stylesheet" href="表格练习（仿校园司令）1.css">
</head>
<body>
<table>
<tr>
<td>最新公告</td>
<td></td>
</tr>
<tr>
<td>【置顶】2017秋季学期运营计划及工资制度（9月试行）</td>
<td>2017-09-06</td>
</tr>
<tr>
<td>【置顶】校园司令团队工作纪律</td>
<td>2017-05-05</td>
</tr>
<tr>
<td>【置顶】工资、奖惩，及实习证明申请办法公示</td>
<td>2017-09-06</td>
</tr>
<tr>
<td>【NEW】浙江工业大学抄袭事件及相关人员处理办法</td>
<td>2017-09-08</td>
</tr>
<tr>
<td>关于校园司令转载其他主体内容的处理办法</td>
<td>2017-07-03</td>
</tr>
<tr>
<td>更多</td>
<td></td>
</tr>
<tr>
</table>
</body>
</html>
css如下
table{
border: thin solid black;
}
td,tr{
border: thin solid black;
}
效果如下
Paste_Image.png
对比原图，需要做以下几点
- 表格间距需要变成细线
- 宽高需要调整
- 第一行和最后一行需要合并单元格且文字分别居中和居右
- 内边距需要增大一些
- 超链接
1.首先将边框间距去掉
table{
border: thin solid black;
border-collapse: collapse;
}
2.调整表格宽和高
width: 570px;
height: 188px;
3.合并单元格
行合并
<tr>
<td colspan="2">最新公告</td>
</tr>
合并之后摆放文字位置。设置id属性
#firstcol{
text-align: center;
}
#lastcol{
text-align: right;
}
效果如下图
效果图
仔细观察会发现，第二行至第五行的第一列垂直向上对齐且上下边距要大些，而第二行至第六行的第二列日期居中，上下边距随前者变化。所以可以设置前者为一类stuff，后者为date，分别进行设置。
.stuff{
vertical-align: top;
}
.date{
text-align: center;
padding: 10px;
}
这时设置好内边距会发现，整个表格的高度似乎也变高了
原图
怎么办呢？
.date{
text-align: center;
height: 29px;
padding: 0px 15px;
}
这样好了些。开始增加超链接和颜色效果啦。首先去掉超链接的下划线，因为默认情况下超链接是有下划线的。然后当鼠标放在超链接上时，会出现下划线。这需要伪类选择器来搞定。
a{
text-decoration: none;
}
a:hover{
color: #ff3ca7;
text-decoration: underline;
}
最后效果如下图
最终效果图
总结：
这次练习涉及到单元格的合并，单元格中文本的对齐，以及伪类选择器的使用。不足就是没有对表格在页面上进行定位。
