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>

利用div+css实现几种经典布局的详解,样式以及代码!

一、左右两侧,左侧固定宽度200px,右侧自适应占满 html代码 css代码 *{ margin: 0px; padding: 0px; ...
  • kongkongyou
  • kongkongyou
  • 2017年01月15日 14:15
  • 1737

一个好例子:DIV+CSS布局-固定页面开度布局

DIV+CSS布局中主要CSS属性介绍: Float:        Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道标签默认一行只能显示一个,而使用...
  • u014801801
  • u014801801
  • 2016年12月11日 22:20
  • 4612

DIV + CSS 实现最经典的布局

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

20 个经典的 Ajax + CSS 表格

并不是所有的Web 开发者都会对美化表格数据感兴趣,今天我们收集了20 个功能强大,外观漂亮的基于Ajax + CSS 的表格效果,你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表...
  • HarryHuang1990
  • HarryHuang1990
  • 2012年03月22日 09:29
  • 636

CSS布局实例用ul、li来实现表格

  • 2009年08月29日 09:42
  • 165KB
  • 下载

正点CSS实例--表格2

.datalist{     border:1px solid #0058a3;        font-family:Arial;     border-collapse:collapse;...
  • zxc22436
  • zxc22436
  • 2011年09月19日 08:22
  • 438

CSS+HTML实例集合二,表格行颜色间隔显示,加有鼠标移入移出高亮效果,还有单击选中高亮再单击消除高亮

CSS_HTML实例集合二,表格行颜色间隔显示,加有鼠标移入移出高亮效果,还有单击选中高亮再单击消除高亮 无标题文档 table{ border:1px solid #000...
  • wjw_java
  • wjw_java
  • 2012年10月10日 17:52
  • 2893

一个经典的CSS实例

  • 2007年11月23日 15:01
  • 10KB
  • 下载

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

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

一个经典的CSS滑动门学习实例

  • 2007年08月08日 10:41
  • 6KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS替代表格的经典实例
举报原因:
原因补充:

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