|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
凡是和我讨论客户段效率的全是脑子有问题的,影响的全是图片和Flash,所以我一直建议一个提交按钮就不要用图片带代替了。
网页制造poluoluo文章简介:本文只是做一个复杂得测试,其目标在于举一反三。这类办法实在用性事实有多年夜,咱临时不管,但最少能够给我们一种办理成绩的思绪。但愿此文能对你有所匡助。
明天萌生一个设法,用css来完成透视效果。后来,我想到的是我们罕见的增加暗影效果的办法,用多个div经由过程偏移来完成,但这必要良多div,不敷幻想。随后,我想到css的一个属性:border,在border相毗连处能够发生对角线效果。如许用两个div就能够完成,我们先看看最后的效果,然后再剖析完成历程。
起首,我们看看border怎样天生的对角线效果,在你的html的头部增添以下代码,你就会看到如许的效果。
.border{width:0;height:0;border-width:50px;border-color:#f00#0f0#00f#000;border-style:solid;}
有了下面的基本,我们就能够用两个分外的div来完成透视效果。
1、html代码以下:
<divclass="perspective-outer">
<divclass="perspective-r"></div>
<divclass="perspective-b"></div>
<divclass="perspective-inner">透视效果元素</div>
</div>
2、Css代码:
.perspective-outer{
position:relative;
width:170px;/*要完成透视效果元素的宽度+透视间隔*/
height:140px;/*要完成透视效果元素的高度+透视间隔*/
}
.perspective-inner{
border:1pxsolid#f60;
height:118px;
width:148px;
background-color:#fff;
}
.perspective-r,
.perspective-b{
position:absolute;
width:0;
height:0;
}
.perspective-r{
right:0;
height:100px;/*要完成透视效果元素的高度(120px)-(border-top:20px)*/
border-left:20pxsolid#000;/*右侧透视间隔*/
border-top:20pxsolid#fff;/*下边透视间隔*/
}
.perspective-b{
bottom:0;
width:150px;/*最外元素的宽度(170px)-border-left*/
border-left:20pxsolid#fff;
border-top:20pxsolid#000;
}
.perspective-outer界说高度和宽度,并绝对定位,确保右侧和下边的透视地区能定位的响应的地位,高度值和宽度值为要完成透视效果元素的高度加上响应的透视间隔。.perspective-r只需设置高度值,其值为.perspective-outer的高度减往border-top,.perspective-b只需设置宽度值,其值为.perspective-outer的宽度减往border-left。.perspective-r的border-top和.perspective-b的border-left的width值决意透视角度。.perspective-r的border-left和.perspective-b的border-top的width值决意透视间隔。个中.perspective-r的border-top和.perspective-b的border-left的color为父元素的背景色彩,我这里的测试页面父元素为body,以是为红色。
3、跋文
本文只是做一个复杂得测试,其目标在于举一反三。这类办法实在用性事实有多年夜,咱临时不管,但最少能够给我们一种办理成绩的思绪。但愿此文能对你有所匡助。
原文:http://www.denisdeng.com/?p=474;
</p>
学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。 |
|