UL+LI纯CSS表格效果,DL+DT+DD纯CSS表格效果 - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
Oct 17

UL+LI纯CSS表格效果,DL+DT+DD纯CSS表格效果 不指定

tommyhu , 13:00 , 大前端 » CSS3 , Comments(0) , Trackbacks(0) , Reads(13263) , Via Original Large | Medium | Small
前端设计都会遇到做表格,以前用TABLE TR TD布局的时候用TABLE,现在W3C的XHTML+CSS(DIV+CSS)了很多朋友还在用TABLE,其实我也是,如何更好地运动标准标签做表格呢,以下文档给需要的朋友做个参考,欢迎留言提出给好建议!
Highslide JS
UL+LI纯CSS表格效果
文件下载:
Download ( 12 downloads)
Only registered users can download this file. Please Register or Login


Highslide JS
DL+DT+DD纯CSS表格效果
文件下载:
Download ( 4 downloads)
Only registered users can download this file. Please Register or Login



查看相关代码↓:
UL+LI纯CSS表格效果代码:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IE7+IE6</title>
<style type="text/css">
#ulDate{
width:404px;
margin:0;
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
}
#ulDate li{
float:left;
width:100px;
height:30px;
list-style-type:none;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
/*非必须*/
line-height:30px;
font-size:12px;
text-align:center;

}
</style>
</head>

<body>
<ul id="ulDate">
<li style="width:403px;background:#F7F7FF;text-align:center;">时间</li>
<li>2008-7-30</li>
<li>2008-7-30</li>
<li>2008-7-30</li>
<li>2008-7-30</li>
<li>2008-7-30</li>
<li>2008-7-30</li>
<li>2008-7-30</li>
<li>2008-7-30</li>
<li>2008-7-30</li>
<li>2008-7-30</li>
<li></li>
<li></li>
</ul>
</body>
</html>


DL+DT+DD纯CSS表格效果代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IE7+IE6</title>
<style>
*{ margin:0; padding:0;}
#box{ margin:10px; padding:10px; width:400px; float:left; border:1px solid #CCC;
background:#FFFFCC; font-size:12px; line-height:1.9;}
dl{ background:#CCCC00; margin:0; width:120px;
text-align:center; float:left; margin:5px;}
dt{ background:#CC0033;}dt img{display:block;
margin:0 auto;}
dd{ background:#FFFF00; }
</style>
</head>

<body>
<h3><a href="http://tommyhu.cn/" title="欢迎访问tommyhu的博客">www.tommyhu.cn</a></h3>
<div id="box">
  <dl>
    <dt> <img src="wish.png" /> </dt>
    <dd>母亲节-祝福短信</dd>
  </dl>
  <dl>
    <dt> <img src="wish.png" /> </dt>
    <dd>母亲节-祝福短信</dd>
  </dl>
  <dl>
    <dt> <img src="wish.png" /> </dt>
    <dd>母亲节-祝福短信</dd>
  </dl>
  <dl>
    <dt> <img src="wish.png" /> </dt>
    <dd>母亲节-祝福短信</dd>
  </dl>
  <dl>
    <dt> <img src="wish.png" /> </dt>
    <dd>母亲节-祝福短信</dd>
  </dl>  
</div>

</body>
</html>


▲返回顶部
Last modified by tommyhu on2009/11/09 20:59

Add a comment

Nickname

emotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemot