表格练习

Paste_Image.png

开始，先构造基本的框架

    
最新公告
    



    
【置顶】2017秋季学期运营计划及工资制度（9月试行）
    
2017-09-06


    
【置顶】校园司令团队工作纪律
    
2017-05-05


    
【置顶】工资、奖惩，及实习证明申请办法公示
    
2017-09-06



    
【NEW】浙江工业大学抄袭事件及相关人员处理办法
    
2017-09-08


    
关于校园司令转载其他主体内容的处理办法
    
2017-07-03


    
更多
    

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.合并单元格

行合并

    最新公告

合并之后摆放文字位置。设置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;
}

最后效果如下图

最终效果图

总结：

这次练习涉及到单元格的合并，单元格中文本的对齐，以及伪类选择器的使用。不足就是没有对表格在页面上进行定位。