css用ul取代table实用响应式表格效果

来源:https://www.sucaihuo.com/js/1870.html 2017-05-03 21:39浏览(2505) 收藏

一直以前网友们对table样式美化都头痛,现在很多页面布局都已经丢弃了使用table布局,今天刚好在浏览网页的时候看到一个样式很好看的代码就把它整理出来分享给大家了,css用ul取代table实用响应式表格效果,只用了纯css样式代码,没有任何的jquery或javascript代码参考,可以直接拿来使用。。。
css用ul取代table实用响应式表格效果
分类:css3 > 响应式 难易:初级
查看演示 下载资源 下载积分: 20 积分

样式代码如下:

html {
	font-size:100%;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%
}
a:focus {
	outline:thin dotted #333;
	outline:5px auto -webkit-focus-ring-color;
	outline-offset:-2px
}
a:hover,a:active {
	outline:0
}
ul,ol {
	padding:0;
	margin:0;
	list-style:none
}
li {
	line-height:20px
}
ul.inline,ol.inline {
	margin-left:0;
	list-style:none
}
ul.inline > li,ol.inline > li {
	display:inline-block;
	*display:inline;
	*zoom:1;
	padding-left:5px;
	padding-right:5px
}
ul.table {
	clear:both;
	margin:0 0 16px 5px;
}
.table ul {
	border-left:1px solid #D6DBE0;
	border-top:1px solid #D6DBE0;
	margin-bottom:15px;
	margin-right:-1px;
	margin-left:0px;
	overflow:auto;
}
.table ul li {
	float:left;
	width:25%;
	list-style:none;
	background:none;
	padding:0px;
	margin:0px;
	text-align:center;
}
.table ul li a {
	border-bottom:1px solid #D6DBE0;
	border-right:1px solid #D6DBE0;
	display:block;
	height:22px;
	overflow:hidden;
	padding:6px 5px;
	text-decoration:none;
	color:#333;
	font-size:14px;
	font-weight:bold;
}
.table ul li a:hover,.table ul li a.hover04 {
	border-bottom:2px solid #F60;
	font-weight:bold;
	height:21px;
	color:#F60;
	text-decoration:none;
}
.table ul li img {
	margin:0 10px 0 5px;
	position:relative;
	top:-1px;
}
</style>
标签: 表格
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2