divcss透明表格(css div透明度)
在网页中如何用css+div实现表格效果
在网页中用css+div实现表格效果，首先我们需要理解的就是div是一个块级元素，可以在里面包裹其他的div，通过给这些div这是不同的高度，宽度，还有一些float属性，就可以实现如同表格一样的布局，具体看代码来理解下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
link rel="stylesheet" type="text/css" href="CSS-kuaidu.css"/
title宽度的学习/title
/head
body
div style="width:960px; height:700px; margin:0 auto; border:solid 1px #999999"
div style="width:960px; height:25px; border:solid 1px #CCCCCC;"
导航条
/div
div style="width:960px; height:80px; border:solid 1px #CCCCCC;"
店铺图片
/div
div style="width:200px; height:400px; border:solid 1px #CCCCCC; float:left;"
左侧目录
/div
div style="width:750px; height:400px; border:solid 1px #CCCCCC; float:right;"
右侧内容
/div
div style="width:960px; height:17px; border:solid 1px #CCCCCC; float:left;"
尾区
/div
div style="width:960px; height:173px; border:solid 1px #CCCCCC; float:left;"
尾招
/div
/div
/body
/html
如何用DIV+CSS制作表格
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " "
html xmlns=" "
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta name="author" content="Chomo" /
link rel="start" href=" " title="Home" /
title表格外观的无序列表/title
style type="text/css"
* { margin:0; padding:0; list-style:none;}
ul { margin-left:1px; margin-top:1px; width:505px;}
li { float:left; height:23px; border:1px solid #cfdae8; width:100px; margin-left:-1px; margin-top:-1px;}
/style
/head
body
ul
li/li
li/li
li/li
li/li
li/li
li/li
li/li
li/li
li/li
li/li
li/li
li/li
li/li
li/li
li/li
li/li
li/li
li/li
li/li
li/li
/ul
/body
/html
css里设置表格背景半透明但表格内容不透明
这样的HTML结构是没法实现楼主的效果。
方法：
把背景单独拿出一个DIV来透明，然后把表格数据放在这个DIV的上面！
请简单说明表格布局网页和DIV+CSS布局网页的不同之处?
(1)表格布局
表格布局容易掌握，布局方便。但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距，这样布局的网页中表格会生成大量难以阅读和维护的代码；而且表格布局的网页要等整个表格下载完毕后才能显示所有内容，所有表格布局浏览速度较慢。
(2)CSS+DIV布局
通常要实现比较精确和自适应的层布局需要设置层的样式，即用CSS控制层的位置。CSS+DIV布局采用Div来定位，通过Div的border(边框)、padding(填充)、margin(边界)和Float（浮动）等属性来控制板块的间距，具体实施是通过创建Div标签并对其应用CSS定位及浮动属性来实现。
CSS+DIV布局需要编写大量CSS样式代码来控制各布局DIV层，因此要掌握它相对表格布局会困难一些。但CSS+DIV布局较表格布局更加灵活实用，网站布局后很容易就能调整网站的布局结构；而且CSS+DIV布局的各布局DIV层可以依次下载显示，因此其访问速度较表格布局要快。
试述div + CSS布局方式相对于表格布局可能带来的优势。
DIV+CSS布局的方式并不意味着就一定会比表格布局来的优势,这也要分情况的..
因为在制表的时候,比如要输出大量相同格式的信息,或者学生的一些成绩信息的时候就需要用到表格,这样来的方便,而且代码量也会少.
或许你会发现DIV+CSS在一些地方它的代码量远远超过表格布局的代码量,但是从整站的角度来讲,同样的布局,用DIV+CSS做出的代码量会少的多.
表格布局带来的问题是整个页面都是表格套表格,代码会一锅粥..而且表格布局有一个很明显不如DIV+CSS的地方.就是需要空白的地方,,表格必须插入空格符或者放一个透明的占位图片.而DIV+CSS却不用这样做..直接padding或者margin就可以了..这样图片的量就会少的多.图片越多网站加载的速度就会越慢.所以图片是尽量越少越好.
而且创建浮动层的时候,必须要用到DIV..因为表格不可能单独的让一个td浮动.还有很多特效都需要DIV元素来实现
