动威9号-Flex、Flash技术探讨

神奇的CSS3画的哆啦A梦

Wed, 19 May 2010 15:33:55 +0000

谷歌、苹果浏览器会完美的显示上图的效果，而且眼睛会跳啊跳的
火狐里眼睛不会跳外其他都正常
但是其他的IE系列中浏览就会惨不忍睹，特别是IE6，那简直是石器时代的哆啦A梦。

CSS3的哆啦A梦样式：

body{
  background:#fff;
    width:901px;
    margin:auto;
}
#doraemon{
  position:fixed;
  margin:50px;
  float:left;
  width:500px;
}
#instr{
  float:right;
  width:400px;
  font-size:14px;
  border-left:2px solid black;
  padding-left:20px;
}
#head_light{
  width:50px;
  height:50px;
  transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
  box-shadow:80px 20px 50px #fff;
    -webkit-box-shadow:80px 20px 55px #fff;
    -moz-box-shadow:80px 20px 50px #fff;
  border-radius:45px;
    -webkit-border-radius:45px;
    -moz-border-radius:60px;
  position:absolute;
  top:-20px;
  left:170px;
  opacity:0.5
}

#face{
  position:relative;
  width:310px;
  height:300px;
  border-radius:146px;
    -webkit-border-radius:146px;
    -moz-border-radius:146px;
  background:#07beea;
  background: -webkit-gradient(linear, right top, left bottom, from(#fff) ,color-stop(0.20, #07beea), color-stop(0.73, #10a6ce),color-stop(0.95, #000), to(#444));
  background: -moz-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%);
  border:#333 2px solid;
  top:-15px;
  box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
    -webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
    -moz-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);

}

#base{
  position:relative;
  top:-5px;
}

#base_white{
  position:absolute;
  border:#000 2px solid;
  width:264px;
  height:196px;
  border-radius: 150px 150px;
    -webkit-border-radius: 150px 150px;
    -moz-border-radius: 150px 150px;
  background:#FFF;
  background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
  background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000);
  z-index:1;
  top:85px;
  left:22px;
}

#eyes{
  position:relative;
  top:-5px;
}

div.eye{
  position:absolute;
  border-radius: 35px 35px;
    -webkit-border-radius: 35px 35px;
    -moz-border-radius: 35px 35px;
  border:2px solid #000;
  width:72px;
  height:83px;
  z-index:20;
  background:#fff;
}

div.black_eye{
  position:absolute;
  width:15px;
  height:15px;
  border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
  background:#333;
  z-index:21;
    -webkit-animation-name: cate;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 200;
}

@-webkit-keyframes cate{
  0%{
    margin:0 0 0 0;
  }
  80%  {
    margin:0px 0 0 0;
  }
  85%  {
    margin:-20px 0 0 0;
  }
  90%{
    margin:0 0 0 0;
  }
  93%{
    margin:0 0 0 7px;
  }
  96%{
    margin:0 0 0 0;
  }
  100%{
    margin:0 0 0 0;
  }
}

div.black_left{
  top:100px;
  left:130px;
}

div.black_right{
  top:100px;
  left:170px;
}

div.eye_left{
  top:45px;
  left:82px;
}

div.eye_right{
  top:45px;
  left:156px;
}

#nose{
  width:32px;
  height:32px;
  border:2px solid #000;
  border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
  background:#c93e00;
  position:absolute;
  top:117px;
  left:139px;
  z-index:30;
}

#nose_light{
  width:10px;
  height:10px;
  border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
  box-shadow:19px 8px 5px #fff;
    -webkit-box-shadow:19px 8px 5px #fff;
    -moz-box-shadow:19px 8px 5px #fff;
  position:relative;
  top:0px;
  left:0px;
}

#nose_line{
  background:#000;
  width:4px;
  height:100px;
  top:125px;
  left:156px;
  position:absolute;
}

#nose_line{
  background:#333;
  width:3px;
  height:100px;
  top:140px;
  left:155px;
  position:absolute;
    z-index:20;
}

#mouth{
  width:240px;
  height:500px;
  border-bottom:3px solid #333;
  border-radius:120px;
    -webkit-border-radius:120px;
    -moz-border-radius:120px;
  position:absolute;
  top:-263px;
  left:36px;
  z-index:10;
}

#mouth_rewrite{
  background:#fff;
  width:240px;
  height:90px;
  position:relative;
  top:115px;
  left:35px;
  z-index:12;
  border-radius:45px;
    -webkit-border-radius:45px;
    -moz-border-radius:60px;
}

#firefox_mouth, x:-moz-broken, x:last-of-type, x:indeterminate {
  position:relative;
  width:170px;
  height:150px;
  -moz-border-radius:85px;
  border:3px solid #000;
  background:#FFF;
  z-index:11;
  top:-3px;
  left:70px;
}

.whiskers{
  background:#333;
  height:2px;
  width:60px;
  position:absolute;
  z-index:20;
}
.whi_right{
  top:165px;
  left:210px;
}

.whi_right_top{
  top:145px;
  left:210px;
}

.whi_right_bottom{
  top:185px;
  left:210px;
}

.whi_left{
  top:165px;
  left:50px;
}
.whi_left_top{
  top:145px;
  left:50px;
}

.whi_left_bottom{
  top:185px;
  left:50px;
}

.rotate20{
  transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
}

.rotate160{
  transform: rotate(160deg);
    -webkit-transform: rotate(160deg);
    -moz-transform: rotate(160deg);
    -o-transform: rotate(160deg);
}

#choker{
  position:relative;
  top:-55px;
  left:35px;
  z-index:100;
}

#belt{
  width:230px;
  height:20px;
  border:#000 solid 2px;
  background:#ca4100;
  background: -webkit-gradient(linear, left top, left bottom, from(#ca4100), to(#800400));
  background: -moz-linear-gradient(top, #ca4100, #800400);
  border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    position:relative;
  left:5px;
}

#bell{
  width:40px;
  height:40px;
  border-radius:50px;
    -webkit-border-radius:50px;
    -moz-border-radius:50px;
  border:2px solid #000;
  background:#f9f12a;
  background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));
  background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
  box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
    -webkit-box-shadow:-5px 3px 5px rgba(0,0,0,0.25);
    -moz-box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
  position:relative;
  top:-15px;
  left:100px;
}

#bell_line{
  width:36px;
  height:2px;
  background:#f9f12a;
  border:#333 solid 2px;
  position:relative;
  top:10px;
}

#bell_circle{
  width:12px;
  height:10px;
  border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
  background:#000;
  position:relative;
  top:14px;
  left:14px;
}

#bell_under{
  width:3px;
  height:15px;
  background:#000;
  position:relative;
  top:10px;
  left:18px;
}

#bell_light{
  width:10px;
  height:10px;
  border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
  box-shadow:19px 8px 5px #fff;
    -webkit-box-shadow:19px 8px 5px #fff;
    -moz-box-shadow:19px 8px 5px #fff;
  position:relative;
  opacity:0.7;
  top:-35px;
  left:5px;
}

#doutai{
  position:absolute;
  width:220px;
  height:165px;
  background:#07beea;
  background: -webkit-gradient(linear, right top, left top, from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));
  background: -moz-linear-gradient(right, #07beea, #0073b3 50%,#0096be 75%,#00b0e0 ,#0096be 100% ,#333 114%);
  border:#333 2px solid;
  top:262px;
  left:46px;
}

div.base_white2{
  position:absolute;
  width:170px;
  height:170px;
  border-radius:85px;
    -webkit-border-radius:85px;
    -moz-border-radius:85px;
  border:2px solid #000;
  background:#FFF;
  background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
  background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000);
}

.doutai_center{
  top:230px;
  left:72px;
}

#circle{
  position:relative;
  width:130px;
  height:130px;
  border-radius:65px;
    -webkit-border-radius:65px;
    -moz-border-radius:65px;
  background:#fff;
  background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
  background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88% , #fff);
  border:2px solid #000;
  top:-120px;
  left:92px;
}
#circle_rewrite{
  position:relative;
  width:134px;
  height:60px;
  background:#fff;
  border-bottom:2px solid #000;
  top:-250px;
  left:92px;
}

#hand_right{
  position:absolute;
  top:272px;
  left:248px;
  width:100px;
  height:100px;
}

#arm_right{
  position:relative;
  width:80px;
  height:50px;
  background:#07beea;
  background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));
  background: -moz-linear-gradient(top, #07beea, #07beea 85%, #555);

  border:solid 1px #000;
  z-index:-1;
  top:17px;
  transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -o-transform: rotate(35deg);
  box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
    -webkit-box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
    -moz-box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
}

#hand_left{
  position:absolute;
  top:272px;
  left:-46px;
  width:100px;
  height:100px;
}

#arm_left{
  position:relative;
  width:80px;
  height:50px;
  background:#0096be;
  border:solid 1px #000;
  z-index:-1;
  top:17px;
  left:36px;
  transform: rotate(145deg);
    -webkit-transform: rotate(145deg);
    -moz-transform: rotate(145deg);
    -o-transform: rotate(145deg);
  box-shadow:5px -7px 10px rgba(0,0,0,0.25);
    -webkit-box-shadow:5px -7px 10px rgba(0,0,0,0.25);
    -moz-box-shadow:5px -7px 10px rgba(0,0,0,0.25);
}

div.hand_circle{
  position:absolute;
  width:60px;
  height:60px;
  border-radius:30px;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
  border:2px solid #000;
  background:#fff;
  background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));
  background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
}

.hand_right{
  top:32px;
  left:40px;
}

.arm_rewrite_right{
  position:relative;
  width:4px;
  height:45px;
  background:#07beea;
  top:-51px;
  left:18px;
}

.hand_left{
  top:34px;
  left:10px;
}

.arm_rewrite_left{
  position:relative;
  width:4px;
  height:50px;
  background:#0096be;
  top:-52px;
  left:92px;
}

#foot{
  position:relative;
  width:280px;
  height:40px;
  top:-141px;
  left:20px;
}

#foot_left{
  width:125px;
  height:30px;
  background:#fff;
  background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
  background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999);
  border:solid 2px #333;
  border-top-left-radius:80px;
  border-bottom-left-radius:40px;
  border-top-right-radius:60px;
  border-bottom-right-radius:60px;
    -webkit-border-top-left-radius:80px;
    -webkit-border-bottom-left-radius:40px;
    -webkit-border-top-right-radius:60px;
    -webkit-border-bottom-right-radius:60px;
    -moz-border-radius-topleft:80px;
    -moz-border-radius-bottomleft:40px;
    -moz-border-radius-topright:60px;
    -moz-border-radius-bottomright:60px;
  position:relative;
  left:8px;
  top:2px;
  box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
    -webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
    -moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
  z-index:-1;
}

#foot_right{
  position:relative;
  width:125px;
  height:30px;
  background:#fff;
  background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
  background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999);
  border:solid 2px #333;
  border-top-left-radius:60px;
  border-bottom-left-radius:60px;
  border-top-right-radius:80px;
  border-bottom-right-radius:40px;
    -webkit-border-top-left-radius:60px;
    -webkit-border-bottom-left-radius:60px;
    -webkit-border-top-right-radius:80px;
    -webkit-border-bottom-right-radius:40px;
    -moz-border-radius-topleft:60px;
    -moz-border-radius-bottomleft:60px;
    -moz-border-radius-topright:80px;
    -moz-border-radius-bottomright:40px;
  top:-32px;
  left:141px;
  box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
    -webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
    -moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
  z-index:-1;
}

#foot_rewrite{
  position:relative;
  width:20px;
  height:10px;
  background:#fff;
  background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));
  background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);
  top:-76px;
  left:127px;
  border-top:2px solid #000;
  border-right:2px solid #000;
  border-left:2px solid #000;
  border-top-right-radius:40px;
  border-top-left-radius:40px;
    -webkit-border-top-right-radius:40px;
    -webkit-border-top-left-radius:40px;
    -moz-border-radius-topleft:40px;
    -moz-border-radius-topright:40px;
}

#shadow_doutai_left{
  width:30px;
  height:200px;
  box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
    -webkit-box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
    -moz-box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
  position:absolute;
  top:250px;
  left:46px;
  z-index:-10;
}

#shadow_doutai_right{
  width:30px;
  height:200px;
  box-shadow:10px 10px 15px rgba(0,0,0,0.35);
    -webkit-box-shadow:10px 10px 25px rgba(0,0,0,0.35);
    -moz-box-shadow:10px 10px 15px rgba(0,0,0,0.35);
  position:absolute;
  top:240px;
  left:230px;
  z-index:-10;
}

#shadow_doutai_arm{
  width:85px;
  height:165px;
  box-shadow:-100px 10px 15px rgba(0,0,0,0.0);
    -webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
    -moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
  position:absolute;
  top:230px;
  left:113px;
  z-index:10;
  opacity:0.5;
  transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
  border-bottom-left-radius:40px;
    -webkit-border-bottom-left-radius:40px;
    -moz-border-radius-bottomleft:40px;
  border-top-left-radius:20px;
    -webkit-border-top-left-radius:20px;
    -moz-border-radius-topleft:20px;
}

#shadow_belt{
  width:40px;
  height:30px;
  box-shadow:-100px 10px 15px rgba(0,0,0,0);
    -webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
    -moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
  position:absolute;
  top:240px;
  left:130px;
  z-index:10;
  border-bottom-left-radius:40px;
    -webkit-border-bottom-left-radius:40px;
    -moz-border-radius-bottomleft:40px;
  z-index:300;
}

#arm_left:not(\*|*), .arm_rewrite_left:not(\*|*){
  background:#07beea;
}

#arm_left, .arm_rewrite_left{
  background:#07beea\9;
  *background:#07beea;
  _background:#07beea;
}

#kiji{
  position:relative;
  top:-150px;
}

页面文件代码：

Tags - css3 , 哆啦a梦

菜单栏背景自动延伸

Sat, 15 May 2010 09:10:45 +0000

话说很多门户的头部菜单都如下图所示

这个是文字较少的情况，要是菜单名字很长呢？

那就得做成背景图片自动延伸的才行，多做几个不同长度的背景图片这一方案是可以，但是你肯定是个空闲时间很多的人。
其实原理很简单
总共3层
最底层为菜单大背景层
起名为bg.png
第二层为选中状态左起延伸背景层
最上层为选中状态右部结束延伸层
起名为bg1.png

样式代码如下：

.box{ width:500px; height:30px; background:url(bg.png) 0 -35px repeat-x;}
  .box li{ margin:0px 10px; line-height:35px; float:left; font-size:14px; font-weight:bold;white-space:nowrap; overflow:hidden}
  .box a{ color:#FFF; text-decoration:none;}
  .ccc{ background:url(bg1.png) left 0;}
  .ccc a{ background:url(bg1.png) right 0; display:block;padding:0 15px; color:#000; text-decoration:none;}
ul,li{ margin:0; padding:0; list-style:none;}

页面代码如下：

标题1

较长的标题

标题2

OK,就是如此，很是简单的东西。如果你用的是table，那就不要问我了，虽然方法一样，但是那玩意还是别用了。
Tags - 菜单背景自动延伸 , 背景自动延伸

DIV三行三列自适应高度布局

Tue, 23 Feb 2010 14:40:48 +0000

原文：http://matthewjamestaylor.com/blog/perfect-3-column.htm

.colmask、.colmin、.colleft，分别为三列背景的容器，最外层的.colmask设定overflow:hidden;，通过相对定位分成三列。而内容容器.col1、 .col2、 .col3都放在最内层的.colleft里面，通过相对定位定好位置，所以不管.col1、 .col2、 .col3哪一个伸长或缩短，外部的.colmask、.colmin、.colleft都会跟着伸长与缩短，也就实现了我们所要的效果。

demo

这里是中间

这里是左栏

这里是右栏

Tags - div , 自适应高度布局

关于a:hover img的东西

Tue, 23 Feb 2010 14:13:05 +0000

a:hover img这种写法还是挺实用的
但是在IE6这玩意里面似乎很不爽
竟然没效果

最后找到方法了
如下

XXX

Tags - a:hover , img

BBOX样式框架已经成型

Wed, 10 Feb 2010 08:40:46 +0000

/*BBOX框架样式 www.Dv9.org*/
/*一经调用，万事俱休！*/
/*V0.0.6-010210*/
html, body{ margin:0; padding:0; font-size:12px; width:100%; height:100%; background:#FFFFFF; font-family:Arial, Helvetica, sans-serif;}
div,ul,li,form,p,dl,dt,dd,h1,h2,h3,h4,h5,h6,img,a,form,img{ margin:0; padding:0; list-style:none;}

/*所有浏览器下去虚线框全局类，及除下划线*/
a { text-decoration: none;}
a:hover {text-decoration: none;}
a{blr:expression(this.onFocus=this.close());}
a{blr:expression(this.onFocus=this.blur());}
a:focus { -moz-outline-style: none; }
a:focus { outline: none; }

/*页面高度自动延伸,目前该类只适用于IE6这垃圾东西*/
.autoheight{font: 0px/0px sans-serif; height:100%; clear: both; display: block;}

/*页面文字左右对齐类*/
.text_text{text-align:justify; text-justify:inter-ideograph;}

/*隐藏多余部分和解决ie6嵌套自动延伸bug*/
.over{ overflow:hidden;}

/*左浮动*/
.f{ float:left;}

/*右浮动*/
.r{ float:right;}

/*左右居中,不可与左、右对齐共用*/
.c{ margin:0 auto;}

/*鼠标指针手型*/
.s{ cursor:pointer;}

今天进行年前的最后次修改，应聘网应用了该框架。结构上还是得多多思索，目前已经完成了几个重点页面的html化。也为自己找到了属于自己的style风格而高兴
Tags - bbox框架 , bbox样式

使用iepngfix后页面无法缓存

Wed, 11 Feb 2009 01:21:16 +0000

iepngfix解决了png图片在ie6以下浏览器无法使用透明效果的问题
但是问题就出来了
加了iepngfix的页面� 就会发现调用了iepngfix图片资源无法缓存
每刷新
资源就会重新下载一次
目前最好的方法就是不用png格式，改用gif
小型网站对缓不缓存到是无所谓
大型网站就不行了
IE6的确该退休了
Tags - iepngfix , png图片 , 页面无法缓存 , ie6 , 浏览器

关于ie7下高度自适应问题

Mon, 09 Feb 2009 05:49:32 +0000

我是使用的hack写法*+html

在父级容器写入overflow:visible //visible查手册就可以知道就是溢出后延伸的意思
在需要自适应的地方*+html .test{height:auto;} //auto就不用说了，为什么是hack写，� 为ie6下容器本身就会自适应不能说这是6做的好总的来说就是不要让容器自身和父级有绝对高度便是

自己曾经迷惘过IE7下对� �式的依赖很大这很好很好
对了要想用*+html这种ie7专属css hack写法就必须让页面基于w3c� �准，也就是头部必须�

Tags - ie7 , 高度 , 自适应 , 问题

背景颜色和背景图片共存的问题

Mon, 09 Feb 2009 02:54:07 +0000

昨日在给页面� 背景的时候
忽然发现背景颜色和背景图片不能一起显示出来
后来才发现其中的一个小技巧

background:#000000 url('images/bg.gif') no-repeat;
颜色一定要写在图片路径前面
background-position不能用，不然图片会显示不出来
想要图片居中text-align就行了

当
background:#000000;
background: url('images/bg.gif') no-repeat;
这种情况是理所当然的错的

Tags - 背景颜色 , 背景图片 , 共存 , 显示 , 共同