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

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

添加时间:2021-03-13 20:57:36
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:响应式
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

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

样式代码如下:

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>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:css用ul取代table实用响应式表格效果

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.113395s