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

最新推荐文章于 2022-04-25 08:26:16 发布

Andone_hsx

最新推荐文章于 2022-04-25 08:26:16 发布

阅读量676

点赞数

分类专栏： CSS基础文章标签： html css 标签

本文链接：https://blog.csdn.net/Andone_hsx/article/details/54236256

版权

CSS基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果图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>