用CSS 而不是Table来制作圆角框

最新推荐文章于 2022-05-08 15:10:13 发布
最新推荐文章于 2022-05-08 15:10:13 发布
阅读量5k 收藏
点赞数
分类专栏： 网络编程 文章标签： css table border 框架 qq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ablo_zhou/article/details/576266
版权

 
周海汉：用CSS而不是表格Table来做圆角的框
CSS的 箱子模式：

作者：周海汉
msn: ablo_zhou@hotmail.com
QQ: 7268188

在网页制作中，为了美观，需将边框制作成圆角。以往都是采用表格来定位。而表格嵌套有许多缺陷。能不能不用表格直接用CSS制作漂亮的圆角边框？这是我自己用CSS制作的一个例子。查看原文件就可以看到，这个框架没有一处用到Table。

margin:加边，设置后会导致元素的框移动，页边空白增加
padding:填料，框内部的空白会增加
border：元素的框

也可直接设置元素的这几个属性的四边。
margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom , padding-left

Margin box
Border box
Padding box
Element box

 
html table的边框线怎么变圆角_CSS偶有所得 - table 边框加圆角踩坑
weixin_39612720的博客
02-06 1028
1.发现问题看到代码里，关于表格，大家不是很喜欢用原生的table，基本都是div来做。究其原因，大概是table的样式有时候难把控，不像直接操作div那么方便。比如：我们想做一个表格，然后希望这个表格带有边框，且最外层的边框是圆角的。2. 实践采坑ing2.1 - 【踩坑】 这是什么鬼，有空隙????css 代码如下:table {border: 1px solid #d8d8d8;border-ra...
table 圆角 html5 css3
10-16
在HTML5和CSS3的世界里，为表格（table）添加圆角效果是一项常见的美化任务，可以使得网页设计更具现代感和优雅。本文将深入探讨如何使用HTML5和CSS3实现表格的圆角效果，以及相关的知识点。 首先，HTML5虽然在语义...
圆角和边框
kite30的博客
05-21 883
这里用的是TableLayout布局的。先看效果图 下面看下布局文件 xml version="1.0" encoding="utf-8"?>   LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android"       android:layout_width="fill_parent"  
最简单的方法设置table圆角与去掉TABLE内边框
jothy1023的专栏
03-23 1万+
最简单的方法设置table圆角
css table圆角设置
TianGaojie123abc的专栏
05-09 9669
table{ border: 1px solid #F1F1F1; border-radius:1px; /*圆角设置属性*/ overflow:hidden;  border-top-left-radius:1em; border-top-right-radius:1em; border-bottom-right-radius:1em; border-bottom-left-rad
解决table边框圆角无效
lu900618的专栏
11-13 1万+
将 border-collapse 设置为 separate css 样式 给 border border-radius
table 能设圆角 css,table&css圆角边框效果
weixin_33871933的博客
08-04 638
挺好用的放在最下面比较好看所以就一个下圆角的实例上圆角按照代码很容易做。。。图传不上来head区body{font:100.01% "Trebuchet MS",Verdana,Arial,sans-serif}h1,h2,p{margin: 0 10px}h1{font-size: 250%;color: #FFF}h2{font-size: 200%;color: #f0f0f0}p{...
table 能设圆角 css,巧用css代码打造圆角table
weixin_36245032的博客
08-04 924
我们都知道css是一种层叠样式表(英文全称:Cascading Style Sheets)，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。那么今天就教大家一个小的技巧用css代码打造圆角table，当然也可以制造圆角div。效果如下图：CSS打造圆角...
Css table 圆角处理
m0_62367247的博客
05-08 619
table { width: 100%; border-collapse: separate; border-spacing: 0; } table td { border: 1px solid rgb(226, 226, 226); border-left: none; border-bottom: none; padding: 5px; } table tr:first-child td:first-child { border-top-left-radius: 5.
html table 圆角,巧用css代码打造圆角table
weixin_34862561的博客
06-15 405
我们都知道css是一种层叠样式表(英文全称:Cascading Style Sheets)，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。那么今天就教大家一个小的技巧用css代码打造圆角table，当然也可以制造圆角div。效果如下图：CSS打造圆角...
用<TABLE>语句来实现圆角表格可以省去制作圆角图片之苦！
10-30
在网页设计中，表格（TABLE）是HTML中非常重要的元素之一，它被广泛用于页面布局和数据呈现。随着Web标准的发展，虽然现在更倾向于使用CSS和Div来布局，...因此，在实际开发中推荐使用CSS来实现圆角以及其他视觉效果。
putty的复制和粘贴
热门推荐
周海汉的开发专栏
01-16 8万+
 周海汉/文 2009.1.16ablozhou # gmail.comhttp://blog.youkuaiyun.com/ablo_zhou 本文是putty/pietty操作的tips，可以让操作提高效率。因为复制粘贴经常使用，比重新敲入要方便许多。putty的粘贴可以配置为鼠标中键或右键，此文假设为右键。（某些环境下配置不一样，对应本文中的右键和中键切换） 1.在windows中复制往
什么是RIA 技术？
周海汉的开发专栏
03-01 1万+
周海汉/文RIA:Rich Internet Application ,富网络应用，最近比较火热。我和一个做视频会议的朋友联系，问他在关注什么，告诉我在关注RIA。那么什么叫RIA富网络应用呢？最开始的网页，都是html静态网页，浏览者只是看，内容有图片和文字，有超链接，相比书本而言强大百倍。但浏览者没法交互和反馈。后面脚本语言和CGI得到大量应用，就叫动态网页了。以.net,jsp,as
主流远程登录客户端使用难点和比较
周海汉的开发专栏
07-03 1万+
本文可以免费自由使用，但不得去掉作者信息。作者: ablo主页：http://blog.youkuaiyun.com/ablo_zhouEmail:ablozhou at gmail.com日期：2007.7.3搞Linux开发维护的，经常用到远程登录客户端。比较著名的产品有SecureCRT，SSH  Secure  Shell，Xmanager，PuTTY/PieTTY。本文对这些软件进行比较评价，偏重于
各大网站使用web server抽样统计分析
周海汉的开发专栏
09-26 8613
<br />周海汉 2010.9.25<br />http://abloz.com<br /> <br />本文对中国网站所使用的web服务器软件进行抽样调查。以得出当前apache,Microsoft iis, nginx和其他web服务器的市场占有率。<br /> 抽样代码如下，将python代码保存为testserver.py：#!/usr/bin/env python#--coding:utf8--#author: zhouhh#date: 2010.9.25#python to test ht
什么是SCGI
周海汉的开发专栏
12-29 7891
周海汉/文 2008.12.29http://blog.youkuaiyun.com/ablo_zhouSCGI(Simple Common Gateway Interface),简单通用网关接口。是CGI的替代协议，与FastCGI相似，但更简单。据测试SCGI实现的效率比CGI和FastCGI更高，也更稳定。SCGI和CGI一样，分为客户端和服务器端。客户端放在http服务器侧。如apache有mod_s
远程访问和文件传输介绍
周海汉的开发专栏
01-14 5322
周海汉/文ablozhou # gmail.comhttp://blog.youkuaiyun.com/ablo_zhou2009.1.141. 常用远程访问和文件传输方式windows远程访问linux，telnet已经基本不用了。因为telnet是明文传输，不安全。取而代之的是ssh，而且现在一般都是ssh2. 远程文件传输和共享，常用的有ftp,tftp,http,samba,rsync,scp,s
apache移web目录后拒绝访问
周海汉的开发专栏
06-03 5250
周海汉/文 将apache的web目录由/var/www/html移到/home/zhouhh/php,结果出现下面的问题： ForbiddenYou dont have permission to access /install/index.php on this server.Apache/2.2.3 (CentOS) Server at 192.168.12.1
实现HTML5和CSS3中Table圆角的技巧
本文将详细介绍如何使用HTML5和CSS3来实现具有圆角效果的表格。 首先，我们需要理解HTML5中的基本表格结构。HTML5的表格由`<table>`标签定义，可以包含`<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, 和 `<td>`...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值