关闭

网页 滚屏特效,用flash做背景,定时滚动,ccs背景代码效果语法,使用CSS处理表格边框样式化

标签: flashcssfunctionjavascriptscrolltimer
1679人阅读 评论(0) 收藏 举报

别    都做了这么多天的班级网站呢.也学到了不少的东东.下面这些对做网站很有用.不妨看看吧.XIXI

 

<marquee behavior="scroll" direction="up" width="200" height="150" loop="-1" scrollamount="1" scrolldelay="1" style="font:12px;" onMouseOver="this.stop();" onMouseOut="this.start();">

鼠标移到图片上后页面自动上滚或下滚

第一步:把如下代码加入到<head>区域中
<style type="text/css">
#item {position:absolute; visibility:hidden; left:0px}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var isNS=(document.layers);
var _all=(isNS)? '' : 'all.' ;
var _style=(isNS)? '' : '.style' ;
var _visible=(isNS)? 'show' : 'visible';
var w_x, w_y, item, okscroll=false, godown;
function init(){
item=eval('document.'+_all+'item'+_style);
getwindowsize();
item.visibility=_visible;
scrollpage();
}
function getwindowsize() {
w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth;
w_y=(isNS)? window.innerHeight : document.body.clientHeight;
(isNS)? item.clip.width=42: item.width=42;
(isNS)? item.clip.height=20 : item.height=20;
moveitem();
}
function resizeNS() {
setTimeout('document.location.reload()',400);
}
function moveitem() {
if (isNS) {
item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50))
}else{
item.pixelLeft=document.body.scrollLeft+w_x-70;
item.pixelTop=w_y+document.body.scrollTop-50;
      }
}
window.onload=init;
(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;
function scrollpage() {
status = '';
if (okscroll) {
if (godown) {
(isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ;
} else {
(isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ;
      }
}
moveitem();
setTimeout('scrollpage()', 40);
}
//     End -->
</script>
第二步:把如下代码加入到<body>区域中
<div id="item">
<a href="javascript:void(0)" onMouseover="okscroll=true; godown=true"
onMouseout="okscroll=false"><img src="http://www.jojoo.net/include/1.jpg" border="0"></a><a href="javascript:void(0)"
onMouseover="okscroll=true; godown=false" onMouseout="okscroll=false"><img src="http://www.jojoo.net/include/2.jpg"
border="0"></a>
</div>

推荐理由:
       在网上经常可以看到自动滚屏的网页,是不是有点心动呢?这篇文章就能带你由浅入深地去学习这个很实用的网页特效。

       制作步骤:

       滚屏特效之基础篇:   
       将下面这段代码放入你网页的末尾(注意不能是开头,那样就看不到效果了):

       language="JavaScript">
         window.scroll(0,100);
        </SCRIPT>
    
        如果这个网页中出现滚动条的话,那么打开时你就会发现:滚动条不像平时处于最顶端,而是距顶端有一小段的距离。这就是要实现滚屏的基础:用window对象的scroll方法改变滚动条的位置。其中的第一个参数为水平滚动条左端的位置(单位px),第二个为垂直滚动条顶端的位置(单位px)。
    
        如果我们把这两个参数有规则的动态改变,那不就能实现滚屏了吗?比如使用简单的
       FOR 循环,把下面这段代码加到网页的最后:

       language="JavaScript">
         for (I=1; I<=1000; I++){
          window.scroll(0,I);
    
        //将 for 循环中的 I 的值代入scroll 方法的第二个参数中来改变垂直滚动条的位置
  
     }
        </SCRIPT>
     
       看到了吗?滚动条是不是在动。由于我们只需要网页的垂直滚动,因此就只改变第二个即垂直滚动条的参数,而将第一个参数设为0。

    
       滚屏特效之进阶篇:

       上面的代码虽然能够实现滚屏,但是速度好像太快了点,我可不是能够一目十行的人:)。那就们就需对上面的代码进行改进:
  
        language="JavaScript">
         var timer;
        var y = 0;
  
         //定义一个滚屏的函数
  
         function scrollwindow(){
          window.scroll(0,y);
        y++;
          timer=setTimeout("scrollwindow()", 30);
  
         //每隔30毫秒执行一次 scrollwindow()函数,以此来实现参数 y 的递增
  
     }
         </SCRIPT>
     
       这段代码就可以放到网页的任何位置了,不过建议放在<head>和 </head>之间。再用 <body onload="scrollwindow()">替换 <body>。这次是不是慢多了呢?而且你可以将timer=setTimeout("scrollwindow()", 30) 中的30换成其它数字,就能改变速度了,数字越小速度越快。

       滚屏特效之高级篇:

       速度我们是能够控制了,而且无论多长的网页都能够从头到尾“将滚屏进行到底”。但是您发觉没有?就是一进入网页就立即开始滚动,这样就可能错过网页项端的精彩内容哦。还有就是滚屏中或滚屏后我们都不能改变滚动条的位置,这就不像在看网页了,到有点像看电视。我们还应当设计滚动:

        language="JavaScript">
         var currentpos,timer;
  
         //开始滚动函数,执行后网页开始滚动
  
         function initialize(){
        timer = setTimeout("scrollwindow()",30);
  
         //每隔30毫秒执行一次 scrollwindow() 函数
  
     }
  
         //停止滚动函数,执行该函数后停止网页滚动
  
         function stopscroll(){
         clearInterval(timer);
  
         //清除setTimeout函数的句柄 timer,停止执行scrollwindow() 函数
  
     }
         function scrollwindow(){
         currentpos = document.body.scrollTop;
  
         //得到当前滚动条顶端位置,请注意 scrollTop 的大小写
  
         window.scroll(0,++currentpos);
  
         //将currentpos累加的值赋给scroll方法的第二个参数
  
         if (currentpos != document.body.scrollTop){
         stopscroll();
  
         //如果 currentpos的值不等于当前滚动条的位置,则停止网页滚动
  
         }else{
         initialize();
  
         //否则继续网页的滚动
     }
     }
         document.ondblclick = initialize;
  
         //双击左键执行initialize,网页开始滚动,注意这里不同于一般调动函数的方法,这里函数名后不能有括号
  
         document.onmousedown = stopscroll;
  
         //单击左键停止网页的滚动
  
         </SCRIPT>
    
        这段代码就能实现,浏览者通过双击鼠标来开始滚屏,并通过单击来停止,而且滚动过程中,您可以随意拖动滚动条。当然了,您也可以单击某个按钮来开始滚屏,将这句加入网页适当位置:<input type="button" value="单击这儿开始滚屏"onclick="javascript:initialize()"> 就能实现。

       滚屏特效之终极篇:

           每个人的浏览速度都不同,我们到底将滚屏的速度设置成多快好呢?还是留给浏览者自己决定吧。用过“ReadBook”的朋友都知道,它的鼠标控制的无级变速滚屏非常人性化。其实我们网页中也能实现:
  
        language="JavaScript">
         var mousey, currentpos, timer;
         function currentmousey() {
          mousey = window.event.y;

         //得到鼠标在网页中的Y坐标,请注意 event 的大小写

     }
         function initialize(){
        timer = setTimeout("scrollwindow()",mousey);

         //用鼠标在网页中的Y坐标来决定执行scrollwindow()函数的频率,从而动态改变网页的滚动速度

     }
         function stopscroll(){
          clearInterval(timer);
     }
         function scrollwindow(){
         currentpos = document.body.scrollTop;
         window.scroll(0,++currentpos);
         if (currentpos != document.body.scrollTop){
         stopscroll();
         }else{
         initialize();
     }
     }
         document.ondblclick = initialize;
         document.onmousedown = stopscroll;
         document.onmousemove = currentmousey;

         //当在网页上触了鼠标的移动事件,就运行currentmousey函数

         </SCRIPT>
          双击然后移动鼠标试试,当鼠标指针约靠近屏幕上端滚动速度就越快,反之则越慢。
         代码下载地址:http://www.cbifamily.com/down/200414/network/wyjava.txt

何用FLASH做网页背景?这的确是一个难题.因为FLASH的级别最高。不过,同样是有办法的。
1、在网页中插入一个表格,设置其宽度、高度为100%,再插入FLASH的SWF文件;

2、设置SWF文件宽度和高度均为100%,点击其paramenters,参数设置为wmode,变量设置为transparent,功能为设置一个有透明效果的SWF;

3、在SWF文件上插入一个层,大小不要超过SWF的大小,在层上写上字,大功告成!

 

 

 

 

      最近在改版公司的网站时需要使用Flash文件,同时网页上还有个漂浮的图片,结果发现漂浮的图片一到Flash处就被遮挡住了,于是开始想办法解决这一问题。研究了一下Flash的相关属性的代码,发现异常简单,在Flash代码中加入一行“<param name="wmode" value="transparent">”即可。同时发现了如何将Flash文件作为网页背景的方法,留此备忘。
       方法一:
      1、在网页中插入一个表格,设置其宽度、高度为100%,再插入FLASH的SWF文件;
      2、设置SWF文件宽度和高度均为100%,添加属性代码“<param name="wmode" value="transparent">”;
      3、在SWF文件上插入一个层,大小不要超过SWF的大小,在层上写上字,大功告成!
      方法二(来自百度搜索):  
      在网页制作中,flash是不能直接作为网页的背景的。Frontpage没有相关的设置可以直接操作。因此,我们需要换一个策略:大家是否还记得flash中“层”的概念,我们在这里就要运用到这个概念。在我们的网页层上面在新建一个层。在这个层中插入flash,但注意,插入flash后,会遮挡下面网页层相应的位置,因此,我们需要将flash透明化,以达到让网页层的内容正常显示的目的。而本质是,插有flash的层是在网页层的上面的。“背景”,是相对而言的。以下是html代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 2</title>
</head>
<body>
//这一段就是flash做网页背景,实际上是建了一个层,又将flash透明化。而本质是这个层实际上在其他层之上,但由于flash透明化了,因此看上去像背景。
<div id="Layer1" style="position:absolute; left:0; top:0; width:700; height:500; z-index:1">
<div align="center">
        <embed src="fish.swf" width="700" height="500" wmode="transparent">
      </div></div>
//开始就是常规网页制作的代码。

</body>
</html>  

 

定时滚动

 

<script>
var scrollerwidth=200
var scrollerheight=300
var scrollerbgcolor='#FFFFFF'
//3000 miliseconds=9 seconds
var pausebetweenimages=6000

var slideimages=new Array()
slideimages[0]='<img src=9.jpg width=110><img src=ghost/9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110>'
slideimages[1]='<img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110>'
slideimages[2]='<img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110>'
slideimages[3]='<img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110><img src=9.jpg width=110>'
  

if (slideimages.length>1)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=4){
tlayer.top=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=4
setTimeout("move1(tlayer)",100)
}
else{
tlayer.top=scrollerheight
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=4){
tlayer2.top=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=4
setTimeout("move2(tlayer2)",100)
}
else{
tlayer2.top=scrollerheight
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=4){
tdiv.style.pixelTop=0
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2)",pausebetweenimages)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=4
setTimeout("move3(tdiv)",100)
}
else{
tdiv.style.pixelTop=scrollerheight
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=4){
tdiv2.style.pixelTop=0
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2)",pausebetweenimages)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=4
setTimeout("move4(second2)",100)
}
else{
tdiv2.style.pixelTop=scrollerheight
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (document.all){
move3(first2)
second2.style.top=scrollerheight
}
else if (document.layers){
move1(document.main.document.first)
document.main.document.second.top=scrollerheight+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll

if (document.layers)
document.write(slideimages[0])

if (document.layers)
document.write(slideimages[1])

if (document.layers)
document.write(slideimages[0])

if (document.all){
document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
</script>

 

 

ccs背景代码效果语法,使用CSS处理表格边框样式化

 

代码:<style type=text/css>
body{
       background:url(背景图片地址) #ffffff no-repeat scroll!important;
}
</style>
代码说明:
将括号里面的红色的背景图片地址替换为你所要显示的背景图片地址;
#ffffff表示背景颜色为#ffffff(白色),也可修改为你想要的背景颜色代码(相关颜色代码见http://alab.bokee.com/viewdiary.12101845.html),当然也可以不要;
no-repeat表示图片不平铺,平铺改为repeat;
scroll表示图片随对象滚动,图片固定不滚动改为fixed;
!important表示这里的设置优先,不要将它去掉,否则有可能会引起冲突,造成显示不正常!
示例:
<STYLE type=text/css>
body{
background:url("http://images.blogcn.com/2006/2/14/6/rainbow827,2006021410459.jpg") no-repeat scroll!important;
}
</STYLE>

ccs背景代码效果语法
1、css背景:background-repeat
语法:
background-repeat : repeat | no-repeat | repeat-x | repeat-y?
取值:
repeat? : 默认值。背景图像在纵向和横向上平铺?
no-repeat? : 背景图像不平铺?
repeat-x? : 背景图像仅在横向上平铺?
repeat-y? : 背景图像仅在纵向上平铺
说明:
设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像( background-image )。
此属性对于 currentstyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 backgroundrepeat 。?
2、css背景:background-position
语法:
background-position : length
background-position : position
取值:
length? : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位??
position? : top | center | bottom | left | center | right?
说明:
设置或检索对象的背景图像位置。必须先指定 background-image 属性。
该属性定位不受对象的补丁属性( padding )设置影响。
默认值为: 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值,第二个值将用于纵坐标。
如果设置值为 right center ,因为 right 作为横坐标值将会覆盖 center 值,所以背景图片将被居右定位。
对应的脚本特性为 backgroundposition 。
?
3、css背景:background-attachment
语法:
background-attachment : scroll?/ fixed
取值:
scroll ?: ?默认值。背景图像是随对象内容滚动
fixed ?: ?背景图像固定

说明:
设置或检索背景图像是随对象内容滚动还是固定的。
此属性对于 currentstyle 对象而言是只读的。对于其他对象而言是可读写的。
请参阅 bgproperties 属性(特性)。对应的脚本特性为 backgroundattachment
?
4、css背景:background-color
语法:
background-color : transparent | color?
取值:
transparent : 默认值。背景色透明?
color : 指定颜色。
说明:
设置或检索对象的背景颜色。
当背景颜色与背景图像( background-image )都被设定了时,背景图片将覆盖于背景颜色之上。
此属性对于 currentstyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 backgroundcolor 。

以例子说明一下语法的用法语法应该加在代码的什么地方。
先回到我们的背景ccs代码上,语法所加入的地方是在
background-image: url(图片地址连接);
以下
}
以上的任何地方
意思为:检索对象的背景图像位置,指定 background-image 属性
?
下面,我们将以例子说明语法的具体用法
例子目标:制作一个不平铺,不滚动,图片范围外填充为黑色的ccs背景
例子材料图片为:

?
仔细看看图片的像素、宽度都不适合用在ccs背景图片制作
如果直接用上面的代码,效果是平铺图片显示不完整,很不美观。
效果如下面的帖子

为了解决以上问题,我们试着利用以上的语法
现在开始编写我们的代码
?
首先,对于此类宽度像素不足1024的非背景性质图片,我们第一个要解决的,就是平铺的问题
我们开到代码background-repeat 的作用中有这个效果
所以可以选择在background-image下加进此代码
取值为no-repeat(不平铺)
即:background-repeat :no-repeat
?
接着,我们试着把图片放到中间,
选择代码background-position
取值为 top(以图片最高处对起界面最高处居中)
即:background-position:top
?
图片居中后,我们发现一个问题,就是狗论坛原背景色为白色
于是我们利用background-color代码把图片以外的范围填充颜色
我们的图片是黑色,所以可以选择填充值为:black,或者黑色的代码#000000
即:background-color:black
?
最后,我们把背景固定,不让它随帖子往下拖动而滚动
选择background-attachment代码
取值为:fixed (固定)
即:background-attachment:fixed
?
我们把所有的代码综合之后得到以下代码:
===================================================
<style type=text/css>?
<!--
body {
      background-image: url(http://images.blogcn.com/2006/2/14/6/rainbow827,2006021410459.jpg);
background-repeat: no-repeat;
background-position:top;
background-attachment: fixed;
background-color:black
}

-->

 

 

 

使用CSS处理表格边框样式化

在以前的web开发栏目中,我介绍了不少处理HTML表格的方法,尽管现在使用表格来布局网页的方法已经不再时髦了,但是您依然可以使用表格来显示表列数据。
  显示和样式化表格的方法有很多种,在这篇文章中,我将介绍使用CSS对表格边框进行样式化的方法。
  链接
  CSS2表格模型是基于HTML 4.01表格模型的。表格包含了一个可选的锚标记和单元格以及数据行,表格模型包含以下的元素:表格、锚、数据行、数据行组、数据列、数据列组和单元格。这篇文章将集中讲解表格中各个元素的边框处理方法。
  边框
  根据不同的需求,您可以对表格和单元格应用不同的边框。您可以定义整个表格的边框也可以对单独的单元格分别进行定义。CSS的边框属性可以指定边框的大小以及颜色和类型。以下的代码定义了宽度为5个像素的黑色实线边框:
  TABLE { 5px solid black; }
  除此以外,您还可以使用相同的语法为表格中单独的单元格分别指定边框属性。您可以使用以下的属性值来定义边框类型:
  l none: 指定表格没有边框,所以边框宽度为0。
  l dotted: 由点线组成的表格边框。
  l dashed: 由虚线组成的表格边框。
  l solid: 由实线组成的表格边框。
  l Double: 由双实线组成的表格边框。
  l Groove: 槽线效果边框。
  l ridge: 脊线效果边框,和槽线效果相反。
  l inset: 内凹效果边框。
  l outset: 外凸效果边框,和内凹效果相反。
  每个边框类型都可以指定一种颜色,边框是绘制在背景颜色上的,列表A使用边框属性来样式化整个表格以及锚标记和单独的单元格。
  <html>
  <head><title>HTML Table</title></head>
  <style type="text/css">
  TABLE {
  background: blue;
  border-collapse: separate;
  border-spacing: 10pt;
  border: 5px solid red; }
  TD, TH {
  background: white;
  border: inset 5pt;
  horizontal-align: right; }
  CAPTION { border: ridge 5pt blue; }
  </style><body>
  <table summary="TechRepublic.com - Tables and CSS">
  <caption>First Quarter Sales</caption>
  <thead><tr>
  <thabbr="salesperson" scope="col">Person</th>
  <thabbr="sales" scope="col">Sales</th>
  </tr></thead>
  <tbody><tr>
  <td>Mr. Smith</td>
  <td>600.00</td>
  </tr><tr>
  <td>Mr. Jones</td>
  <td>0000.00</td>
  </tr><tr>
  <td>Ms. Williams</td>
  <td>0000.00</td>
  </tr></tbody>
  <tfoot><tr>
  <td colspan="2">Let's sale, sale, sale!</td>
  </tr></tfoot></table></body></html>
  列表A
  这个例子展示了很多可供使用的表格边框的选项,您可以使用您熟悉的度量单位(像素、磅,行长单位等)。设定边框的尺寸,您可以使用十六进制数值或颜色名称来指定边框颜色。以下的例子演示了定义边框的方法。
  border: 5px solid red;
  在这一条语句中融合了宽度、样式和颜色属性的定义,但是您也可以对这些元素进行单独定义,如下所示:
  border-width: 5px;
  border-style: solid;
  border-color: red;

除了将表格作为一个整体进行定义,您也可以将表格边框的四个部分分别进行定义,包括顶部、底部、左边和右边。列表B中的代码将刚才的例子中的表格分成四个部分单独定义。
  <HTML><head><title>HTML Table</title></head>
  <style type="text/CSS">
  TABLE {
  background: blue;
  border-collapse: separate;
  border-spacing: 10pt;
  border-top: 15px solid red;
  border-left: 15px solid red;
  border-right: 5px dashed black;
  border-bottom: 10px dashed blue; }
  TD, TH {
  background: white;
  border: outset 5pt;
  horizontal-align: right; }
  CAPTION {
  border: ridge
5pt blue;
  border-top: ridge 10pt blue; }
  </style><body>
  <table summary="TechRepublic.com - Tables and CSS">
  <caption>First Quarter Sales</caption>
  <thead><tr>
  <thabbr="salesperson" scope="col">Person</th>
  <thabbr="sales" scope="col">Sales</th>
  </tr></thead>
  <tbody><tr>
  <td>Mr. Smith</td>
  <td>600.00</td>
  </tr><tr>
  <td>Mr. Jones</td>
  <td>0000.00</td>
  </tr><tr>
  <td>Ms. Williams</td>
  <td>0000.00</td>
  </tr></tbody>
  <tfoot><tr>
  <td colspan="2">Let's sale, sale, sale!</td>
  </tr></tfoot></table></body></html>
  列表B
  您可能注意到了整个CAPTION元素的边框定义为蓝色5磅的脊线效果,而CAPTION边框的顶部设定为10磅。如果单独的边框设定(左边、右边、顶部、底部)出现在后面将覆盖原有的整体边框设定。
  除此以外,在上一个例子中,通过分配TABLE元素的边框属性,可以在一个表格中实现多重边框(锚标记、表格主体、表头、单独的单元格等等)。
  边框间距
  您可以通过边框间距属性来指定相邻的单元格之间的距离,您可以指定一个或两个值,如果指定了一个值,那么水平和垂直间距都将使用这一个值;如果指定了两个值,那么第一个值规定了水平间距而第二个值指定了垂直间距。这些值不能是负值,我在这个例子中使用了10磅的间距值。
  表格行为
  边框的collapse属性设定了表格的边框模型,该属性的默认值是独立的边框模型,单独的边框模型使用border-spacing属性作为不同边框之间的间距,该间距使用表格元素作为填充背景。
  对于边框模型中,万维网联盟(World Wide Web Consortium)定义了以下的规则来解决表格样式的冲突:
  l 使用‘隐藏’边框属性的边框优先于其他的边框属性,任何使用‘隐藏’属性的边框比其它的边框属性处理优先级要高。
  l 使用‘无样式’边框的优先级最低,如果在同一位置所有元素的边框属性都是‘无样式’,表格边框才会被忽略。(注意,‘无样式’是边框样式的默认值。)
  l 如果没有样式设置为‘隐藏’而且至少有一个样式没有设置为‘无样式’,那么宽边框的优先级高于细边框。边框样式的优先级如下:双实线、单实线、虚线、点线、脊线、外凸、槽线,级别最低的是内凹。
  l 如果边框样式只有颜色不同,那么单元格的样式优先级高于行的优先级,而且高于行组、列、列组和整个表格。
  边框
  表格和其他的HTML元素一样,拥有很多CSS样式选项。表格和单元格的边框是一个很好的例子,CSS应当可以满足您对表格样式的需要。但是使用CSS格式化的表格在不同的浏览器中会显示出不同的效果,因此需要进行广泛的测试。
  您是CSS的‘粉丝’么?您在HTML表格的样式上使用了那些选项?请在文章的讨论区共享您的经验

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:22481次
    • 积分:370
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:9篇
    • 译文:0篇
    • 评论:1条
    最新评论