您的位置：首页 > Web前端 > CSS

CSS练习三之渐变、文本格式化、表格

2017-01-08 19:36 399 查看

效果图1：

效果图2：当鼠标悬停于蓝色字体上时，链接出现下划线

页面结构分析：

实现代码如下：

<!doctype html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<style>
body{
font-size:12px;
}
#comment{
width:990px;
border-top:5px solid #999999;
background:#FFFFFF;
margin:0 auto;
}
#comment #mt{
width:990px;
height:38px;
border:1px solid #DCDCDC;
background:#F7F7F7;
}
#container{
width:990px;
border:1px solid #E2E2E2;
}
#discruss-datas{
width:990px;
}
#comment thead td{
font-weight:bold;
font-family:"mircsoft yahei";
color:#60636C;
padding:5px 0;
border-bottom:1px solid #DCDCDC;
text-align:center;
}
#comment tbody td{
color:#9CA3A9;
padding:5px 0;
border-bottom:1px dotted #DCDCDC;
text-align:center;
}
#comment td.coll{
width:620px;
text-align:left;
}
#discruss-datas i.shai{
/*因为行内元素没有宽高，所以不能用使用width和height去设置，考虑到是用padding将其撑开*/
padding-left:21px;/*(21*17;17=12+2+3)*/
/*距离字体上边距的距离为2px*/
padding-top:2px;
/*距离字体下边距的距离为3px*/
padding-bottom:3px;
margin-right:5px;
background-image:url(images/iconlist_1.png);
background-position:-110px -220px;
background-repeat:no-repeat;
}
#discruss-datas i.lun{
padding-left:21px;
padding-top:2px;
padding-bottom:3px;
margin-right:3px;
background-image:url(images/iconlist_1.png);
background-position:-152px -220px;
background-repeat:no-repeat;
}
#discruss-datas a{
color:#005495;
text-decoration:none;
}
#discruss-datas a:hover{
text-decoration:underline;
}
</style>
</head>
<body>
<div id="comment">
<div id="mt"></div>
<div id="container">
<table id="discruss-datas">
<thead>
<tr>
<td class="coll">主题</td>
<td>回复/浏览</td>
<td>作者</td>
<td>时间</td>
</tr>
</thead>
<tbody>
<tr>
<td class="coll"><i class="shai"></i><a href="#">好大一瓶，不错</a></td>
<td>0/0</td>
<td><a href="#">2001年冬天</a></td>
<td>2014-11-19 13:54:40</td>
</tr>
<tr>
<td class="coll"><i class="lun"></i><a href="#">洗衣液超级划算，活动给力</a></td>
<td>0/0</td>
<td><a href="#">xpx2001</a></td>
<td>2014-11-18 13:23:32</td>
</tr>
<tr>
<td class="coll"><i class="lun"></i><a href="#">洗衣液超级划算，活动给力</a></td>
<td>0/0</td>
<td><a href="#">xpx2001</a></td>
<td>2014-11-12 12:15:50</td>
</tr>
<tr>
<td class="coll"><i class="shai"></i><a href="#">好大一瓶，不错</a></td>
<td>0/0</td>
<td><a href="#">2001年冬天</a></td>
<td>2014-11-11 13:52:14</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css 标签

相关文章推荐

新的分享

章节导航