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

秒速五厘米 2022-07-13 11:56 136阅读 0赞

效果图1：![SouthEast][]

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

![SouthEast 1][]

页面结构分析：

![20170108193848203][]

实现代码如下：

<!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>

[SouthEast]: /images/20220713/21051c5f189546dd93f3595205dcb619.png
[SouthEast 1]: /images/20220713/846aef4c38ec44999f8423ee4e03bdf3.png
[20170108193848203]: /images/20220713/33623ab64e154de48413541392db925c.png