Chinaunix

标题: 用css能实现弧形的表格吗? [打印本页]
作者: nemanman    时间: 2006-01-31 13:27
标题: 用css能实现弧形的表格吗?
单纯用css能实现弧形的表格吗?  不用图片.  就是表格的4个角是弧形的.

如果可以的话,请贴出示例代码,谢谢!
作者: imbiss    时间: 2006-01-31 19:27
用CSS可以，但是要用背景图片。完全不用图片不行。
作者: nemanman    时间: 2006-02-02 11:06
请具体的说说好吗？ 你的方法能够只用一个图片就满足不同的表格大小吗?
作者: Osment    时间: 2006-02-03 20:43
可以。但是不是很正规。用 <b> 标签嵌套完成。

详细代码看这里 http://pro.html.it/esempio/nifty/nifty1.html
作者: imbiss    时间: 2006-02-04 01:59
可以用一个图片完成，满足特定宽度，任意长度的弧形背景。
关键是使用一个大的背景图片，图片上下分割开
通过

把图片的左上顶点定在对象的左上方
background: url ("your picture.png") 0 0 no-repeat;
把图片的右下顶点定在对象的右下方
background: url ("your picture.png") 100% 100% no-repeat;

实例
firefox 下载按钮
其使用的背景图片 地址  

其关键xhtml部分由一段js输出，类似
var gDownloadItemTemplate = "<a href=\"%DOWNLOAD_URL%\" class=\"download-link download-firefox\"><span><strong>Download Firefox<\/strong> <em>%VERSION% for %PLATFORM_NAME%, %LANGUAGE_NAME%&nbsp;(%FILE_SIZE%)<\/em><\/span><\/a>";

其关键css部分
#main-feature a.download-thunderbird {
                background: url("/images/template/download-firefox.png") 0 100% no-repeat;
        }
#main-feature a.download-firefox span {
                background: url("/images/template/download-firefox.png") 0 0 no-repeat;
        }

观看实际效果
http://www.mozilla.com/firefox/

一看就明白了。同样还能实现任何对象的鼠标over，移动背景图片，达到rollover的效果。所有这一切只用一个背景图片和一段巧妙嵌套的xhtml和css
作者: bitifirefly    时间: 2006-02-12 23:43
标题: 有一个组件可以用
http://openrico.org/
作者: gaga    时间: 2006-02-13 09:16
原帖由 imbiss 于 2006-2-4 01:59 发表
可以用一个图片完成，满足特定宽度，任意长度的弧形背景。
关键是使用一个大的背景图片，图片上下分割开
通过

把图片的左上顶点定在对象的左上方
background: url ("your picture.png") 0 0 no- ...


这个效果 html 的 legend 不就可以吗？
作者: imbiss    时间: 2006-02-13 21:41
html legende 只是对form元素分组，和这里讨论的东西完全没有关系。

legende例子
http://de.selfhtml.org/html/formulare/anzeige/fieldset_legend.htm
作者: Antigue    时间: 2006-02-14 00:23
原帖由 Osment 于 2006-2-3 20:43 发表
可以。但是不是很正规。用 <b> 标签嵌套完成。

详细代码看这里 http://pro.html.it/esempio/nifty/nifty1.html

请问这个的原理是什么？不太看的明白
作者: gaga    时间: 2006-02-15 02:01
原帖由 imbiss 于 2006-2-13 21:41 发表
html legende 只是对form元素分组，和这里讨论的东西完全没有关系。

legende例子
http://de.selfhtml.org/html/formulare/anzeige/fieldset_legend.htm



和这里讨论的东西完全没有关系

这句的意思是说 这个讨论的是 css 如何实现 而不是用html实现

所以毫无关系

还是别的意思呢？

我的意思是 反正要个圆弧的表格么，legend是可以的啊。

  1. <table width="200" cellpadding="0" cellspacing="0">
  2. <tr>
  3. <td><fieldset style="width:200" align="center"> <legend></legend>
  4. <p align="right">
  5. </fieldset></td>
  6. </tr>
  7. </table>
复制代码

  1. <fieldset><legend>表单中input标签的使用</legend>
  2. <table width="590" height="229" border="1" cellpadding="0" cellspacing="0" >
  3.   <tr>
  4.     <td align=left>type=text</td>
  5.     <td align=left><input type="text" name="textname" value="默认值" size="20"></td>
  6.   </tr>
  7.   <tr>
  8.     <td align=left>type=password</td>
  9.     <td align=left><input type="password" name="passwordname" value="默认值zzz" size="20"></td>
  10.   </tr>
  11.   <tr>
  12.     <td align=left>type=button</td>
  13.     <td align=left><input type="button" name="buttonname" value="显示按钮文本"></td>
  14.   </tr>
  15.   <tr>
  16.     <td align=left>type=image</td>
  17.     <td align=left><input type="image" src="image.gif"></td>
  18.   </tr>
  19.   <tr>
  20.     <td align=left>type=reset</td>
  21.     <td align=left><input type="reset" value="将表单中的各个标签恢复默认值的按钮"></td>
  22.   </tr>
  23.   <tr>
  24.     <td align=left>type=submit</td>
  25.     <td align=left><input type="submit" value="自动提交表单的按钮"></td>
  26.   </tr>
  27.   <tr>
  28.     <td align=left>type=radio</td>
  29.     <td align=left>单选1<input type="radio" name="radioname" checked value="r1">单选2<input type="radio" name="radioname"  value="r2">单选3<input type="radio" name="radioname"  value="r3"></td>
  30.   </tr>
  31.   <tr>
  32.     <td align=left>type=checkbox</td>
  33.     <td align=left>多选1<input type="checkbox" name="checkboxname"  value="c1">多选2<input type="checkbox" name="checkboxname" checked value="c2">多选3<input type="checkbox" name="checkboxname" checked value="c3">多选4<input type="checkbox" name="checkboxname" checked value="c4"></td>
  34.   </tr>
  35.   <tr>
  36.     <td align=left>type=hidden</td>
  37.     <td align=left><input type="hidden" value="隐藏起来的表单数据" name="hiddenname"></td>
  38.   </tr>
  39.   <tr>
  40.     <td align=left>type=file</td>
  41.     <td align=left><input type="file" value="文件路径" name="filename" ></td>
  42.   </tr>
  43. </table>
  44. </fieldset>
复制代码


这个是我的出发点，

还有，为什么说只是对form分组呢？，，这句我很难理解，

小女是才自学了html，对css只是说刚刚接触，

可能我的回复都很幼稚

在大家看来我是菜鸟中的菜鸟

这样回复 不是蓄意 较真 找事，

只是我想

学到的东西 不敢说是要懂原理，起码要会灵活使用 不是只是拿来代码copy替换，

实在是疑惑，请答疑，谢谢
作者: gaga    时间: 2006-02-15 17:02
ding
作者: Osment    时间: 2006-02-16 00:56
原帖由 gaga 于 2006-2-15 02:01 发表



和这里讨论的东西完全没有关系

这句的意思是说 这个讨论的是 css 如何实现 而不是用html实现

所以毫无关系

还是别的意思呢？

我的意思是 反正要个圆弧的表格么，legend是可以的啊。

[code]& ...

我们讨论的CSS标准的实现。不是XP系统下IE6的自己的美化。明白了吧？
你自己换个浏览器（不是IE6）去看看你自己的代码就明白了。
这个我们要做的是个通用的东西。保证在大多数系统，大多数浏览器下都是弧形的表格。

PS:怎么觉得大家觉得XP+IE6就是所有人的系统似的。。ft。
作者: gaga    时间: 2006-02-16 08:31
这个理解了,息怒

可是偶不明白为什么说是form的分组捏

甚是愚钝,还请热心的朋友耐心说来.非常非常非常地感谢
作者: Osment    时间: 2006-02-16 17:37
原帖由 gaga 于 2006-2-16 08:31 发表
这个理解了,息怒

可是偶不明白为什么说是form的分组捏

甚是愚钝,还请热心的朋友耐心说来.非常非常非常地感谢

我没有怒啊

fieldset标签本来就是form的分组标签啊：）
在标准的HTML语言中，只能嵌套到 form 标签之中。只是现在的浏览器容错性很好，你单独使用也不会出错。而 legend标签是fieldset标签的 title，只能嵌套到fieldset标签之中，且只能使用一次。

希望你多了解一下 HTML4.0或者4.01的官方手册：）
作者: gaga    时间: 2006-02-17 11:22
原帖由 Osment 于 2006-2-16 17:37 发表

我没有怒啊

fieldset标签本来就是form的分组标签啊：）
在标准的HTML语言中，只能嵌套到 form 标签之中。只是现在的浏览器容错性很好，你单独使用也不会出错。而 legend标签是fieldset ...

原来自己真是菜鸟中到菜鸟，一点都不了解

十分感谢您的指导

还有一事相求

能不给给偶找找4.01的中文官方手册泥

偶找的都是什么什么教程　ｅｘｅ电子书　和　ｐｐｔ格式的东西

刚才又搜了也搜不到

偶想系统地了解下，ｈｔｍｌ

谢谢啦
作者: Osment    时间: 2006-02-18 09:08
中文的？我也不知道那里有。汗。

一般都是这里看的 http://www.w3.org/TR/html4/ 可惜是E文。
作者: gaga    时间: 2006-02-18 16:01
好吧。。。

这是知道的，所以要中文的

偶英文不怎么样的



欢迎光临 Chinaunix (http://bbs.chinaunix.net/) Powered by Discuz! X3.2