仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 705|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:CSS复杂实例:用css来完成透视效果

[复制链接]
再现理想 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:35:50 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
凡是和我讨论客户段效率的全是脑子有问题的,影响的全是图片和Flash,所以我一直建议一个提交按钮就不要用图片带代替了。
网页制造poluoluo文章简介:本文只是做一个复杂得测试,其目标在于举一反三。这类办法实在用性事实有多年夜,咱临时不管,但最少能够给我们一种办理成绩的思绪。但愿此文能对你有所匡助。
CSS完成透视效果

明天萌生一个设法,用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基础。
愤怒的大鸟 该用户已被删除
沙发
发表于 2015-1-17 23:36:16 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
飘飘悠悠 该用户已被删除
板凳
发表于 2015-1-25 21:49:46 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
深爱那片海 该用户已被删除
地板
发表于 2015-2-4 08:20:43 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
乐观 该用户已被删除
5#
发表于 2015-2-9 20:02:23 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
谁可相欹 该用户已被删除
6#
发表于 2015-3-9 14:11:33 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
小妖女 该用户已被删除
7#
发表于 2015-3-17 00:10:28 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
若天明 该用户已被删除
8#
发表于 2015-3-23 10:06:14 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-10 16:54

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表