CSS 美化表格边框为凹陷立体效果的实现方法
作者:bea
当然,这里仅提供一种思路,你可以灵活修改使用。 <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> <center> <FIELDSET ID=shop style="
当然,这里仅提供一种思路,你可以灵活修改使用。
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<center>
<FIELDSET ID=shop style="width:200;"> <legend><span style="font size:12px"></span></legend>
<form name="form1" method="post" action="">
<p align="left">
<input type="checkbox" name="checkbox" value="checkbox">
<span style="font size:12px">AJAX专栏</span>
</p>
<p align="left">
<input type="checkbox" name="checkbox2" value="checkbox">
<span style="font size:12px">FW专栏</span></p>
<p align="left">
<input type="checkbox" name="checkbox3" value="checkbox">
<span style="font size:12px">FLASH专栏</span></p>
</form>
<span style="font size:12px"><font color="#990000">此边框为默认风格</font></span>
</fieldset>
<FIELDSET ID=shop style="width:200;border:inset;border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px;">
<legend><span style="font size:12px"></span></legend>
<form name="form1" method="post" action="">
<p align="left">
<input type="checkbox" name="checkbox4" value="checkbox">
<span style="font size:12px">AJAX专栏</span>
</p>
<p align="left">
<input type="checkbox" name="checkbox22" value="checkbox">
<span style="font size:12px">FW专栏</span></p>
<p align="left">
<input type="checkbox" name="checkbox32" value="checkbox">
<span style="font size:12px">FLASH专栏</span></p>
</form>
<span style="font size:12px"><font color="#990000">此边框为凹陷效果</font></span>
</fieldset>
</center></body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<center>
<FIELDSET ID=shop style="width:200;"> <legend><span style="font size:12px"></span></legend>
<form name="form1" method="post" action="">
<p align="left">
<input type="checkbox" name="checkbox" value="checkbox">
<span style="font size:12px">AJAX专栏</span>
</p>
<p align="left">
<input type="checkbox" name="checkbox2" value="checkbox">
<span style="font size:12px">FW专栏</span></p>
<p align="left">
<input type="checkbox" name="checkbox3" value="checkbox">
<span style="font size:12px">FLASH专栏</span></p>
</form>
<span style="font size:12px"><font color="#990000">此边框为默认风格</font></span>
</fieldset>
<FIELDSET ID=shop style="width:200;border:inset;border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px;">
<legend><span style="font size:12px"></span></legend>
<form name="form1" method="post" action="">
<p align="left">
<input type="checkbox" name="checkbox4" value="checkbox">
<span style="font size:12px">AJAX专栏</span>
</p>
<p align="left">
<input type="checkbox" name="checkbox22" value="checkbox">
<span style="font size:12px">FW专栏</span></p>
<p align="left">
<input type="checkbox" name="checkbox32" value="checkbox">
<span style="font size:12px">FLASH专栏</span></p>
</form>
<span style="font size:12px"><font color="#990000">此边框为凹陷效果</font></span>
</fieldset>
</center></body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- Javascript isArray 数组类型检测函数
- JavaScript 监听textarea中按键事件
- jquery 最简单的属性菜单
- Javascript 日期处理之时区问题
- 学习ExtJS table布局
- 学习ExtJS accordion布局
- 学习ExtJS form布局
- 学习ExtJS fit布局使用说明
- 学习ExtJS border布局
- 学习ExtJS Column布局
- 学习ExtJS 访问容器对象
- 学习ExtJS Window常用方法
- 学习ExtJS Panel常用方法
- 学习ExtJS TextField常用方法
- 学习ExtJS(二) Button常用方法
- 学习ExtJS(一) 之基础前提
- JavaScript 控制文本框的值连续加减
- 兼容多浏览器的JS 浮动广告[推荐]
- CSS 布局一个漂亮的滑块