"刘华栋"的个人网站 » CSS

"刘华栋"的个人网站 » CSS http://www.liuhuadong.com 我的日子依旧很简单，梦想一直没改变 Thu, 29 Jul 2010 22:36:03 +0000 en hourly 1 http://wordpress.org/?v=3.0 用css制作不带图片的圆角边框（纯css平滑圆角边框） http://www.liuhuadong.com/archives/83/index.html http://www.liuhuadong.com/archives/83/index.html#comments Fri, 31 Aug 2007 07:54:31 +0000 admin http://www.liuhuadong.com/archives/83/index.html 正所谓挑战极限运动的人总会想方设法的制造一些挑战并最终成功挑战之。这就是典型一例。圆角边框最初table实现->css+pic实现->利用锯齿实现圆角边框->纯css无锯齿实现，我们不得不感叹人类思维的伟大。IE和firefox2下正常。代码如下：

下载: div.css

<style type="text/css">
   .spiffy{
   display:block;
   }
   .spiffy *{
   display:block;
   height:1px;
   overflow:hidden;
   background:#0a67e6;
   }
   .spiffy1{
   border-right:1px solid #95bdf4;
   padding-right:1px;
   margin-right:3px;
   border-left:1px solid #95bdf4;
   padding-left:1px;
   margin-left:3px;
   background:#478dec;
   }
   .spiffy2{
   border-right:1px solid #e6effc;
   border-left:1px solid #e6effc;
   padding:0px 1px;
   background:#3883ea;
   margin:0px 1px;
   }
   .spiffy3{
   border-right:1px solid #3883ea;
   border-left:1px solid #3883ea;
   margin:0px 1px;
   }
   .spiffy4{
   border-right:1px solid #95bdf4;
   border-left:1px solid #95bdf4;
   }
   .spiffy5{
   border-right:1px solid #478dec;
   border-left:1px solid #478dec;
   }
   .spiffy_content{
   padding:0px 5px;
   background:#0a67e6;
   }
</style>
<div>
   <b class="spiffy">
   <b class="spiffy1"><b></b></b>
   <b class="spiffy2"><b></b></b>
   <b class="spiffy3"></b>
   <b class="spiffy4"></b>
   <b class="spiffy5"></b>
   </b>
   <div class="spiffy_content">
   
   </div>
   <b class="spiffy">
   <b class="spiffy5"></b>
   <b class="spiffy4"></b>
   <b class="spiffy3"></b>
   <b class="spiffy2"><b></b></b>
   <b class="spiffy1"><b></b></b>
   </b>
</div>

]]> http://www.liuhuadong.com/archives/83/index.html/feed 0 叹为观止的css特效 http://www.liuhuadong.com/archives/64/index.html http://www.liuhuadong.com/archives/64/index.html#comments Wed, 20 Jun 2007 10:38:05 +0000 admin http://www.liuhuadong.com/archives/64/index.html 学习过css与js的，开下眼界吧，保存这个html打开看看。

且再看网友评论：

2006-6-10 22:36:17
盖茨他爹：老夫活了大半辈子，头一次见这么NB的JS特效
——————————————————————————————

2006-6-10 22:39:06
小星：很少见，一般会直接用flash实现，学习了阿
——————————————————————————————

2006-6-11 22:40:05
dreame：开眼界
——————————————————————————————

2006-7-15 11:45:17
zxxlg205：我也算是开眼界了
——————————————————————————————

2006-7-28 16:22:40
hangxj：何止是一个N字了得?　那应该就是太N了~`
——————————————————————————————

2006-8-9 13:21:55
可可℃乐：俺…俺…俺都不说拉简直不敢相信。终于体会到JS的强大拉
——————————————————————————————

2006-8-29 11:48:56
angeldidi：cool!　不过有没有人可以帮忙解释一下这些代码？
——————————————————————————————

2006-11-3 11:05:45
〖←冷似雪：厉害,I服了YOU
——————————————————————————————

2006-11-5 00:33:45
尤来尤去：不是太牛，是真TMD的牛！！！

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

<title>css菜单</title>

<style>

body{

background-color:#B8B8A0;

}

#fbtn{

display:none;

overflow:hidden;

border-style:solid;

border-width:1px;

border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;

padding:1 1 1 1;

width:115px;

height:30px;

}

#fbtn_txt{

position:relative;

}

#fbtn_txt div{

height:30px;

padding-top:11px;

font-size:12px;

color:#800080;

text-align:center;

cursor:hand;

}

#fbtn_mask{

background-color:#ffffff;

position:relative;

width:100%;

height:100%;

}

</style>

</head>

<body>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>G1</div>

<div>good morning</div>

</div>

</div>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>G2</div>

<div>good evening</div>

</div>

</div>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>M1</div>

<div>my name is fireyy</div>

</div>

</div>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>M2</div>

<div>mm mm i love u</div>

</div>

</div>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>G1</div>

<div>good morning</div>

</div>

</div>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>G2</div>

<div>good evening</div>

</div>

</div>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>M1</div>

<div>my name is fireyy</div>

</div>

</div>

<div id=fbtn>

<div id=fbtn_mask></div>

<div id=fbtn_txt>

<div>M2</div>

<div>mm mm i love u</div>

</div>

</div>

<script>

var current=null;

var t=null;

for(var i=0;i<fbtn.length;i++){

fbtn_txt[i].style.posTop=-30;

fbtn_mask[i].style.posTop=-30;

fbtn[i].index=i;

fbtn[i].style.display=”block”;

fbtn[i].onmouseover=function(){

if(!current){

current=this;

domove(this.index);

}

else

if(current!=this){

domove(current.index);

domove(this.index);

current=this;

}

}

fbtn[i].onmouseout=function(){

if(event.toElement==this.parentElement&t==this){

domove(this.index);

current=null;

}

}

}

function domove(num){

var o=fbtn_txt[num];

var m=fbtn_mask[num];

if(o.style.posTop<-60){

o.style.display=”none”;

var t=o.children[1].innerHTML;

o.children[1].innerHTML=o.children[0].innerHTML;

o.children[0].innerHTML=t;

o.style.posTop=-30;

o.style.display=”block”;

if(m.style.posTop>30)

m.style.posTop=-30;

else

m.style.posTop=0;

}

else{

m.style.posTop+=3;

o.style.posTop-=3;

setTimeout(‘domove(‘+num+’)',15);

}

}

</script>

</body>

</html>

]]> http://www.liuhuadong.com/archives/64/index.html/feed 2