导航
首页
Tags列表
管理
简繁转换
站外搜索
站内搜索
« 如何准确对焦
微软开通了网络硬盘 »
圆角表格的几种做法
收集于blueidea:
css+html做圆角表格:
<html> <head> <title>css圆角效果</title> <meta http-equiv="content-type" content="text/html; charset=gb2312"> <style type="text/css"> div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{display:block;background: #FFF} b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} </style> </head> <body> <div class="RoundedCorner"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <br>无图片实现圆角框<br><br> <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div> </body> </html>
提示:您可以先修改部分代码再运行
使用 VML:
<html xmlns:v> <style> v\:*{behavior:url(#default#VML)} </style> <body> <v:RoundRect style="position:relative;width:150;height:240px"> <v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/> <v:TextBox style="font-size:10.2pt;">VML</v:TextBox> </v:RoundRect> </body> </html>
提示:您可以先修改部分代码再运行
图片+div:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Flexible box with custom corners and borders | Lab | 456 Berea Street </title> <style type="text/css" media="screen,print"> html,body { margin:0; padding:0; color:#000; background:#fff; } body { padding:10px; font:76%/135% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; } /* CSS for the box starts here */ .box { padding:0 12px 0 0; background:#fff url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/borders.gif) 100% 0 repeat-y; } .bi { padding:0 0 0 12px; background:#fff url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/borders.gif) 0 0 repeat-y; } .bt { height:17px; margin:0 -12px; background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 100% 0 no-repeat; } .bt div { width:18px; height:17px; background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 0 0 no-repeat; } .bb { height:17px; margin:0 -12px; background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 100% 100% no-repeat; } .bb div { width:18px; height:17px; background:url(http://www.456bereastreet.com/lab/flexible_custom_corners_borders/box.gif) 0 100% no-repeat; } .box h1 { margin:0; padding:0.3em 10px; background:#efece6; font:bold 1.2em/1 Arial, Helvetica, sans-serif; } .box p, .box ul { margin:0; padding:4px 10px; background:#fff; } .box li { margin:0 0 0 2em; padding:0; } </style> </head> <body> <div class="box"> <div class="bi"> <div class="bt"> <div> </div> </div> <h1>Flexible box with custom corners and borders</h1> <p>This is a demo of a flexible box with custom corners and custom borders. The box will expand to contain any amount of content vertically, will handle any text size, and can become very wide before the horizontal borders start breaking up. How wide depends on the width of one of the background images.</p> <p>Two images are used. <a href="box.gif"><code>box.gif</code></a> is a complete box. For the sake of this demo I’ve made it 1600 pixels wide. It is used for the corners and the horizontal borders. The other image, <a href="borders.gif"><code>borders.gif</code></a>, contains the vertical borders. Why use a single, large image for the corners instead of several smaller ones? There are several reasons:</p> <ul> <li>Splitting the image into a bunch (six in this case – one for each corner plus the top and bottom borders) of smaller images may actually increase the total file size, depending on the look of the corners and borders.</li> <li>To minimize the number of HTTP requests sent to the server.</li> <li>Convenience. When changing the look of the borders and corners, replacing two files is faster than replacing eight files.</li> </ul> <p>Some extra markup is needed to put the corners and borders in place. A bit annoying, yes, but this extra, non-semantic XHTML is quite minimal, and won’t get in the way if CSS is off, so I think I can live with it. It is possible to get rid of some more markup by using the <code>:before</code> and <code>:after</code> pseudo-elements, but since Internet Explorer doesn’t support them I’ll leave the extra markup in there.</p> <p>The main content area of this box can be filled with any elements you like, as long as their background colour is set to white (or whatever colour the inside of your box has), and their margins are zeroed. If the content is transparent the left border will be doubled because the image used to create it also contains the right border. You can avoid the need for that by splitting the image in two, or adding an extra <code>div</code> to put all your content in.</p> <div class="bb"> <div> </div> </div> </div> </div> </body> </html>
提示:您可以先修改部分代码再运行
Tags:
web
相关文章:
发布:yufuzi | 分类:web相关 | 评论:0 | 引用:0 | 浏览: | 2006-8-25 11:20:26
点击这里获取该日志的TrackBack引用地址
发表评论:
名称(*)
邮箱
网站链接
验证(*)
正文(*)(留言最长字数:1000)
记住我,下次回复时不用重新输入个人信息
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。
网站目录
flash学习日志 (20)
[RSS]
web相关 (9)
[RSS]
摄影学习 (12)
[RSS]
photoshop相关 (1)
[RSS]
互联网络 (90)
[RSS]
网络文摘 (33)
[RSS]
生活小常识 (14)
[RSS]
生活随笔 (80)
[RSS]
影像生活 (6)
[RSS]
家常菜谱 (0)
[RSS]
Search
互联网
站内搜索
最新留言
最近发表
站点统计
文章总数:265
评论总数:251
引用总数:0
浏览总数:440366
当前样式:default
当前语言:zh-CN
图标汇集
Powered By
Z-Blog 1.6 Final Build 60802
Copyright Yufuzi Some Rights Reserved.
E-mail:yufuzi80@126.com QQ:20168130
备案序号:苏ICP备06015492号