首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
CSS 用ul li做圆角表格
所属分类：
网页制作
/
CSS
阅读数： 1793
收藏 0
赞 0
分享
这两天和表格纠结上了...工作需要做表格，但是不想重复相同的方法，前两天用dl dt dd，今天用ul li做个圆角表格，圆角用了背景图片。再次声明：数据输出型的表格不推荐使用div+css。测试浏览器：IE6\IE7\IE8\FF3.0\Opera 9.6
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><html><head><title> new document </title><meta name="generator" content="editplus"><meta name="author" content=""><meta name="keywords" content=""><meta name="description" content=""><style type="text/css"><!--*{margin:0px;padding:0px;}body{text-align:center;font-family:"宋体"}#table{margin:0 auto;width:960px;text-align:left;}li{width:958;*width:100%;height:36px;line-height:36px;border:1px solid #c9dff7;border-bottom:none;list-style-type:none;vertical-align:bottom;}li.title{width:960px;height:34px;line-height:34px;background:url(//img.jbzj.com/demoimg/200911/1_091314.gif);border:none;font-size:13px;font-weight:800;color:#fff;}li.title span{padding-left:20px;}li.bottom{width:960px;height:37px;background:url(//img.jbzj.com/demoimg/200911/1_091332.gif);border:none;}li a{float:left;width:88px;*width:89px;height:36px;overflow:hidden;border-right:1px solid #c9dff7;}li a.left{float:left;width:67px;*width:68px;height:36px;overflow:hidden;background:#E3EFFC}li a.b_l{width:68px;*width:69px;background:none;}li a.right{border-right:none;}--></style></head><body><div id="table"><ul><li class="title"><span>脚本之家--脚本学习类网站</span></li><li><a class="left" href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a class="right" href=""></a></li><li><a class="left" href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a class="right" href=""></a></li><li><a class="left" href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a class="right" href=""></a></li><li><a class="left" href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a class="right" href=""></a></li><li><a class="left" href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a class="right" href=""></a></li><li><a class="left" href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a class="right" href=""></a></li><li><a class="left" href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a class="right" href=""></a></li><li><a class="left" href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a class="right" href=""></a></li><li><a class="left" href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a class="right" href=""></a></li><li class="bottom"><a class="left b_l" href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a><a class="right" href=""></a></li></ul></div></body></html>
提示：您可以先修改部分代码再运行
更多精彩内容
其他人还在看
2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼
这篇文章主要介绍了2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
前端设计师需要了解的9个问题
这篇文章主要介绍了前端设计师需要了解的9个问题以及注意事项，非常的实用，是篇非常不错的文章，这里推荐给大家
评论 0
收藏 0
赞 0
分享
CSS强制性换行的方法区别详解
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
评论 0
收藏 0
赞 0
分享
CSS语义化命名方式及常用命名规则
本文搜集了一些CSS语义化命名方式以及命名规则。如有错误或不妥之处，敬请指出，欢迎你提出更好的建议，加插更多的命名规范。
评论 0
收藏 0
赞 0
分享
ul li内容宽度的问题的解决方案
在IE6下只要我设置LI的宽度为auto，不论LI里面的内容多长，LI的宽度始终是100%，即UL的宽度(这里我已经写死了UL的宽度)。设置max-width也没用。高手们，在IE系列浏览器中如何使LI的宽度真正的随着内容增长而增长呢？像FF那样。
评论 0
收藏 0
赞 0
分享
html5+css3气泡组件的实现
本文是html5+css3系列教程的第一篇，给大家讲述html5+css3实现气泡组件，讲解的十分的详细，这里推荐给大家，希望对大家能有所帮助
评论 0
收藏 0
赞 0
分享
html5+css3之CSS中的布局与Header的实现
本文从CSS3的布局（CSS的布局的演化、CSS3盒模型-box-sizing、float布局中的bfc、Flexbox简介）Header布局的实现（float实现布局、Header js的实现）向我们展示了HTML5与CSS3的魅力。
评论 0
收藏 0
赞 0
分享
一款恶搞头像特效的制作过程 利用css3和jquery
今天给大家介绍一款恶搞头像特效的制作过程，你可以把任意一张照片放到跳舞的漫画中，为他带上不同的帽子，让他翩翩起舞，下面我们一起来看一下制作过程和效果
评论 0
收藏 0
赞 0
分享
大图片根据分辨率自适应宽度仍居中显示
一个1920*900的大图，在1024*768的分辨率下仍居中显示，如何做到这一点，下面是一个可行的解决方案
评论 0
收藏 0
赞 0
分享
CSS3提交意见输入框样式代码
这个提交意见输入框，结构使用到了table，样式用的css3，包含了多方面的知识，比较适合新手朋友们
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
从世界杯观赛看，“移动视频”就是个伪命题
怎么才能做好移动互联网营销？
主观臆断,百度联盟审核的条件
网络赚钱靠骗吗？
新手站长谈谈如何做好广告联盟
Papi酱首次直播的八大平台是哪些 打赏90万服不服
站长故事
更多
站长故事 新站两个月权重上升到3的经验分享
微营销实例之一个80后妈妈的微商之旅
分享我经营网站的方法心得,希望大家能学到知识
2013 敢问网站建设的路究竟在何方
就是这7个步骤 让我6个月做到了100万用户
做好网站维护 持续吸引用户浏览
