CSS替代表格的经典实例

原创 2004年07月06日 23:35:00

<!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" lang="gb2312">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>不用表格的菜单</title>

<style type="text/css">
<!--
body {font-size:12px;}
#menu {
MARGIN: 15px 20px 0px 15px;  /*定义层的外边框距离*/
PADDING:15px;    /*定义层的内边框为15px*/
BACKGROUND: #dfdfdf;   /*定义背景颜色*/
COLOR: #666;    /*定义字体颜色*/
BORDER:#fff 2px solid;  /*定义边框为2px白色线条*/
WIDTH:160px;    /*定义内容的宽度为160px*/
}
#menu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: medium none; /*不显示边框*/
LINE-HEIGHT: normal;
LIST-STYLE-TYPE: none}
#menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;}
 #menu li a {
PADDING:5px 0px 5px 15px;
DISPLAY: block;
FONT-WEIGHT: bold;
BACKGROUND: url(http://www.w3cn.org/images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}
#menu li a:hover { BACKGROUND: url(http://www.w3cn.org/images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }
-->
</style>
</head>

<body>
<div id="menu">
<ul>
<li><a title="网站标准" href="http://www.w3cn.org/webstandards.html">什么是网站标准</a></li>
<li><a title="标准的好处" href="http://www.w3cn.org/benefits.html">使用标准的好处</a></li>
<li><a title="怎样过渡" href="http://www.w3cn.org/howto.html">怎样过渡</a></li>
<li><a title="相关教程" href="http://www.w3cn.org/tutorial.html">相关教程</a></li>
<li><a title="工具" href="http://www.w3cn.org/tools.html">工具</a></li>
<li><a title="资源及链接" href="http://www.w3cn.org/resources.html">资源及链接</a></li>
</ul>
</div>
</body>
</html>

由CSS+div来替代表格的布局

1.CSS布局常用的方法:float : none | left | right 取值:none : 默认值。对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边它是...
  • caiguoxing
  • caiguoxing
  • 2006-06-07 10:17:00
  • 4203

CSS实例(一):漂亮的表格样式

WEB2.0提倡使用div布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择。 现在使用介绍使用CSS样式表来控制、美化表格的方法。 Html代码   ...
  • qq1162195421
  • qq1162195421
  • 2013-08-19 21:53:52
  • 3123

漂亮的网站后台CSS JS 经典表格

  • 2010年12月25日 21:54
  • 1.64MB
  • 下载

CSS+DIV 20个经典实例(上)

  • 2008年11月01日 03:03
  • 1.72MB
  • 下载

DIV + CSS 实现最经典的布局

我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等。这样的形式是国内经典式的布局,我们这里不对...
  • u011340807
  • u011340807
  • 2014-02-14 16:39:44
  • 2985

CSS复杂表格的设计

一方法: &amp;lt;!--1、先制作表格用tr th和tr td 2、若要建立叠加的表格,必须建立一个盒子通过覆盖将表格分成两份 3、新见得盒子必须绝对定位于表格。 4、然后将盒子和表格覆...
  • qq_33322074
  • qq_33322074
  • 2018-03-25 18:07:43
  • 82

国外CSS经典实例国外CSS经典实例

  • 2009年09月08日 09:41
  • 78KB
  • 下载

css实现经典管理系统布局,三栏式

  • 2016年06月23日 18:53
  • 534B
  • 下载

CSS表格边框50多种精美标签样式(边框也精彩)

  • 2009年07月30日 18:22
  • 43KB
  • 下载

【转载】【html】双色表格css实例

双色表格CSS实例#DataGrid1 tr {    background-color: expression(        this.sectionRowIndex == 0 ? "#FFCCC...
  • janpohorse
  • janpohorse
  • 2007-11-23 13:53:00
  • 285
收藏助手
不良信息举报
您举报文章:CSS替代表格的经典实例
举报原因:
原因补充:

(最多只允许输入30个字)