`
xiang588
  • 浏览: 303861 次
  • 性别: Icon_minigender_1
  • 来自: 甘肃平凉
社区版块
存档分类
最新评论

css+div打造圆角“表格”

CSS 
阅读更多

应该说是圆角矩形区域比较确切,因为这些块虽然是“圆角”的,但没有一种是“表格”,所以说“圆角表格”的叫法是不确切的。

 

<style>
div.bg
{...}{background:#ffc20e;width:50%}
b
{...}{display:block;}
/**//*将所有B标签转成块级元素*/
div b.topb b,div b.bottomb b
{...}{height:1px;overflow:hidden;background:#ffc20e;}
/**//*div标签内类名为topb/bottomb的那个b标签的css属性值--高为1px,溢出部份隐藏,背景色同div.bg的背景色*/
div b.topb,div b.bottomb
{...}{background:white}
/**//*div标签内类名为topb/bottomb的背景色要与body背景色一致*/
b.t1
{...}{margin:0 5px}
/**//*标签margin值将决定溢出的多少值被隐藏*/
b.t2
{...}{margin:0 3px}
b.t3
{...}{margin:0 2px}
b.t4
{...}{margin:0 1px;height:2px;}
</style>

 

<div align="center">
<div class="bg">
<class="topb"><!--**此b标签所包含的b标签要进行溢出隐藏**-->
<class="t1"></b>
<class="t2"></b>
<class="t3"></b>
<class="t4"></b>
</b>
<br>
年度总结:涉世未深,好吃懒做,眼高手低,胆小心粗,
<br>爱慕虚荣,贪图富贵,眷恋美色,才疏学浅。
<br>
<br>
<class="bottomb">
<class="t4"></b>
<class="t3"></b>
<class="t2"></b>
<class="t1"></b>
</b>
</div>
</div>

 

分享到:
评论
1 楼 ws2011 2011-07-21  
试了,但并没有所谓的圆角表格出现。
请问是什么情况?

相关推荐

    div css圆角代码各种圆角表格_圆角边框css圆角

    div css圆角代码各种圆角表格_圆角边框css圆角

    DIV+CSS实现圆角.rar

    DIV+CSS实现圆角DIV+CSS实现圆角DIV+CSS实现圆角

    JQuery&CSS;&CSS;+DIV实例大全.rar

    站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....

    CSS文集

    利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...

    超多CSS Div圆角特效代码集.rar

    超多CSS Div圆角特效代码集,有DIV圆角,圆角菜单、圆角列表、圆角混合布局、圆角图片边框等,一共有10款圆角框效果,全部兼容ie8、火狐或Chrome浏览器,没有用到CSS3,传统CSS技术实现,是学习CSS的好资料。

    无图片的圆角表格

    用css控制的无图片圆角table &lt;style type="text/css"&gt; div#nifty{ margin: 0 10%;background: #9BD1FA} p {padding:10px}

    CSS 用ul li做圆角表格

    这两天和表格纠结上了…工作需要做表格,但是不想重复相同的方法,前两天用dl dt dd,今天用ul li做个圆角表格,圆角用了背景图片。再次声明:数据输出型的表格不推荐使用div+css。测试浏览器:IE6\IE7\IE8\FF3.0\...

    《CSS全程指南》随书光盘

    第10章 div+CSS打造Blog版面 218 10.1 页面布局和规划 219 10.1.1 页面设计 220 10.1.2 文档目录和模版设计 221 10.2 首页设计 222 10.2.1 首页框架设计 222 10.2.2 导航条设计 225 10.2.3 主体设计 226 10.3 详细...

    H5+CSS3.zip

    css盒模型:块级元素,内联元素,内敛块状元素,none使元素隐身,设置宽度、高度、背景色、边框、圆角,padding内边距,margin外边距; css布局模型:流动模型flow,浮动模型float,层模型layer,层模型的绝对定位、...

    零基础学HTML CSS源代码

    div.css 名为div的样式文件。 style.css 名为style的样式文件。 第15章(源代码\第15章) 示例描述:本章演示CSS基础部分知识。 CSS基础.html 演示CSS基础链接知识用法。 style1.css ...

    《CSS设计彻底研究》【中文PDF+源代码】

    盒子模型、标准流、浮动、定位创建主流流览器全兼容的网站:IE 6/UE 7/ Firefox讲解各类网页布局方法:固定宽度布局、变宽布局制作流行的网页元素:导航、菜单、圆角、面板为学习者提供:CSS常用单词英汉对照表内容...

    《CSS设计彻底研究》光盘源码

    第10章 表格也精彩  第 11章 圆角设计  第12章 应用Spry制作高级网页组件  第13章 固定宽度布局剖析与制作  第14章 变宽度网页布局剖析与制作  第15章 “CSS禅意花园”作品研究  第16章 综合案例研究 ...

    CSS网站布局实录 (第二版)PDF版

    6.7.1 圆角表格 6.7.2 圆角矩形 6.8 滑动门技术 6.9 小提示窗口 6.10 图像地图 6.11 垂直居中 6.12 折叠标签 6.13 CSS数据图表 6.13.1 初级样式(进度条) 6.13.2 复合样式(滑动条) 6.13.3 柱状图 6.14 切换样式表...

    css设计彻底研究 源代码

     …… 第6章 链接与导航 第7章 竖直排列的导航菜单 第8章 水平导航菜单 第9章 下拉菜单 第10章 表格也精彩 第11章 圆角设计 第12章 应用Spry制作高级网页组件 第13章 固定宽度布局剖析与制作 第14...

    Java面试宝典2017版

    目录 HTML&CSS;部分... 1、HTML中定义表格的宽度用80px和80%的区别是什么?...5、用Css3语法中,如何实现一个矩形框的圆角效果和50%红色透明效果?,请写出关键脚本. ...............................

    《程序天下:JavaScript实例自学手册》光盘源码

    5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的...

    程序天下:JavaScript实例自学手册

    5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的...

    JavaScript完全自学宝典 源代码

    roundcorner.css JavaScript使用CSS模拟图片的圆角效果时使用的CSS样式文件。 第13章(\c13) 示例描述:介绍JavaScript与XML。 13.1.xml 表示书籍信息的XML信息。 13.2.js 跨浏览器兼容的XPath实现。 ...

    Java面试宝典2020修订版V1.0.1.doc

    5、用css3语法中,如何实现一个矩形框的圆角效果和50%红色透明效果?,请写出关键脚本 12 6、Div与Table的区别 13 7、行级标签转块级标签,块级标签转行级标签 13 二、Java基础部分 13 1、java中有哪些基本类型? 13...

Global site tag (gtag.js) - Google Analytics