当前位置:编程学习 > JS >>

CSS美化表格边框为凹陷立体效果的实现方法

这个CSS美化实例应该属于布局的范畴吧。这里的重点是CSS,因此表格使用了TABle,用CSS控制Table的边框像Windows系统窗体里的边线一样,表格边框为凹陷立体效果,当然,这里仅提供一种思路,你可以灵活修改使用。
答案:<html>
<head>
<title>CSS美化表格边框</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><br>
  <form name="form1" method="post" action="">
    <p align="left"> 
      <input type="checkbox" name="checkbox" value="checkbox">
      <span style="font size:12px">AJAX专栏</span> <br>
    </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><br>
  </fieldset><br><br><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><br>
  <form name="form1" method="post" action="">
    <p align="left"> 
      <input type="checkbox" name="checkbox4" value="checkbox">
      <span style="font size:12px">AJAX专栏</span> <br>
    </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><br>
  </fieldset> 
</center></body>
</html>

上一个:JavaScript未知高度元素的垂直居中
下一个:CSS和Js演示网页绝对定位与相对定位

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,