XHTMT HTML5 CSS HTML DOM

jQuery JSON AJAX LESS HTML Bootstrap Foundation AngularJS Ember.js TypeScript AngularJS2 React jQuery UI jQuery EasyUI Node.js Highcharts Echarts Vue.js CoffeeScript Ext.js Meteor SASS Omi Markdown 前端开发规范浏览器 webpack JavaScript CSS3

用户登录

还没有账号?立即注册

用户注册

点击换图

css创意ul+li实现的细线表格实现代码

作者: 处破了
来源: 51数据库
2020-08-14

非常用创意的用ul+li实现的细线表格效果，不用table

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>write by 阿会楠 环境：IE7+IE6</title> 
<style type="text/css"> 
#ulDate{ 
    width:404px; 
    margin:0; 
    border-top:1px solid #cccccc; 
    border-left:1px solid #cccccc; 
} 
#ulDate li{ 
    float:left; 
    width:100px; 
    height:30px; 
    list-style-type:none; 
    border-right:1px solid #cccccc; 
    border-bottom:1px solid #cccccc; 
    /*非必须*/ 
    line-height:30px; 
    font-size:12px; 
    text-align:center; 
     
} 
</style> 
</head>

<body> 
<ul id="ulDate"> 
<li style="width:403px;background:#F7F7FF;text-align:center;">时间</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li>2008-7-30</li> 
<li></li> 
<li></li> 
</ul> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

推荐阅读

热点文章

CSS原生嵌套语法来了！使用指南速览！

CSS原生嵌套语法来了！使用指南速览！

聊聊CSS中怎么让auto height支持过渡动画

聊聊CSS中怎么让auto height支持过渡动画

让交互更加生动！巧用CSS实现鼠标跟随 3D 旋转效果

让交互更加生动！巧用CSS实现鼠标跟随 3D 旋转效果

“saturate”，又get了新的CSS知识！

“saturate”，又get了新的CSS知识！

巧用距离、角度及光影制作炫酷的 3D 文字特效

巧用距离、角度及光影制作炫酷的 3D 文字特效

13 个实用CSS技巧，助你提升前端开发效率！

13 个实用CSS技巧，助你提升前端开发效率！

手把手教你用CSS实现简单大气的输入框

手把手教你用CSS实现简单大气的输入框

聊聊怎么利用CSS实现波浪进度条效果

聊聊怎么利用CSS实现波浪进度条效果

手把手教你使用CSS实现酷炫六边形网格背景图

手把手教你使用CSS实现酷炫六边形网格背景图

带你吃透Flex布局的三个属性：flex-grow、flex-shrink、flex-basis

带你吃透Flex布局的三个属性：flex-grow、flex-shrink、flex-basis

软件

前端设计

程序设计

Java相关