`
xiang588
  • 浏览: 315515 次
  • 性别: 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  
试了,但并没有所谓的圆角表格出现。
请问是什么情况?

相关推荐

    css+div控制表格 标签代码

    `div`元素常作为容器,通过CSS的`position`属性(如`relative`、`absolute`、`fixed`)配合`top`、`right`、`bottom`、`left`属性,可以实现表格的绝对定位,从而实现浮动表格或其他特殊布局效果。 最后,我们还...

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

    本篇文章将深入探讨如何使用 `div` 和 `CSS` 实现各种圆角表格和圆角边框。 首先,我们了解 `div` 元素。`div` 是一个通用的容器元素,用于组合网页上的其他元素。通过应用样式,我们可以让 `div` 元素呈现不同的...

    JQuery模板、css+div开发

    同时,CSS3引入了更多高级特性,如过渡、动画、阴影、圆角等,为网页带来了更丰富的视觉效果。 在这个JQuery模板中,我们可以预见到它可能包含以下部分: 1. **基础样式**:包括字体、颜色、间距等全局样式,用于...

    用CSS样式定义的圆角表格

    通过分析提供的文件信息,我们可以提炼出以下几个与CSS样式定义的圆角表格相关的知识点: ### CSS样式定义圆角表格的关键技术点 #### 1. **HTML结构** - 在本示例中,圆角表格主要是通过一个`&lt;div&gt;`元素来实现的...

    DIV+CSS实现圆角.rar

    "DIV+CSS实现圆角"是这个主题的核心,它涉及到CSS3中的一些关键属性,如`border-radius`,用于创建非矩形的、具有圆角边框的元素。接下来,我们将深入探讨这个知识点。 首先,`&lt;div&gt;`是HTML中的一个块级元素,常...

    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制作圆角表格 3步搞定

    本文将详细介绍如何通过简单的三步骤,利用CSS来实现圆角表格的制作。 ### 第一步:设置基本CSS样式 首先,我们需要定义一些基本的CSS样式规则,以确保表格元素能够正确显示,并具备我们想要的圆角效果。以下代码...

    CSS文集

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

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

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

    DIV 实现表格布局

    在网页设计中,传统的表格布局通常使用`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`等HTML标签来实现,但随着CSS技术的发展,我们可以通过使用`div`元素结合CSS样式来实现类似表格的布局,这被称为“CSS布局”或“DIV布局”。...

    HTML加CSS实现圆角效果

    本示例将详细介绍如何使用纯 CSS 实现一个简单的圆角表格效果。 首先,我们需要理解 CSS 的边框半径属性(border-radius),这是实现圆角效果最直接的方法。`border-radius` 属性允许我们指定元素四个角落的圆角...

    Div+Css模版

    1. **CSS3新特性**:描述中提到有模板使用了CSS3,这意味着我们可以期待看到如阴影效果、渐变、圆角、过渡、动画等CSS3的新特性。这些特性可以增强网页的视觉吸引力和用户体验。 2. **响应式设计**:随着移动设备的...

    CSS+HTML教程(完整版).zip

    8. CSS3新特性:如Flexbox和Grid布局,动画、过渡效果,阴影、圆角等。 9. 媒体查询:使用`@media`实现响应式设计,使网页在不同设备上表现良好。 通过这个压缩包提供的教程,你可以系统地学习HTML和CSS,逐步建立...

    韩顺平 轻松搞定网页设计 html+css+js笔记完整版

    div+css笔记可能涉及: 1. CSS选择器:类选择器、ID选择器、标签选择器、后代选择器等。 2. 属性:颜色、字体、边距、填充、边框、背景等。 3. 盒模型:内容、内边距、边框和外边距的概念及计算方式。 4. 布局模式...

    div+css讲解

    2. 通过CSS实现div的背景色、边框、圆角等视觉效果。 3. 应用CSS动画和过渡效果,使div元素具有动态效果。 4. 实现响应式设计,让网页在不同设备上显示良好。 总之,`div+css`是网页设计的基础,理解并熟练掌握这...

    无图片的圆角表格

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

    Div CSS网站布局视频教程_设置表格与表单的样式

    本教程“Div CSS网站布局视频教程_设置表格与表单的样式”着重讲解了如何通过CSS来控制表格和表单的样式,从而创建美观且功能完善的网页。以下将详细阐述这两个核心知识点。 1. 表格(Tables)的CSS样式: - `...

    CSS 用ul li做圆角表格

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

Global site tag (gtag.js) - Google Analytics