仓酷云

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

[DIV+CSS] 带来一篇CSS教程:clip属性具体解说

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

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

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

x
表现和结构分离,在团队开发中更容易分工合作而减少相互关联性
破洛洛文章简介:此属性界说了相对(absolute)定位工具可视地区的尺寸。必需将position属性的值设为absolute,此属性方可以使用。
  clip属性是一个对照有效的属性,但常常在实践使用中,其实不多见,而webjx.com先容的也很少。使用clip属性必要注重的两点:
  1、clip属性必需和定位属性postion一同利用才干失效。
  2、clip裁切的盘算坐标都是以左上角即(0,0)点入手下手盘算,如图三所示,这点不像padding和margin,它们两个的右侧距和下边距是从最右侧和最下边入手下手盘算的。
clip属性基本语法:
clip:auto|rect(numbernumbernumbernumber)
取值:
auto: 默许值。工具无剪切
rect(numbernumbernumbernumber): 根据上-右-下-左的按次供应自工具左上角为(0,0)坐标盘算的四个偏移数值,个中任一数值都可用auto交换,即此边不剪切
clip属性申明:
  检索或设置工具的可视地区。可视地区外的部分是通明的。
  此属性界说了相对(absolute)定位工具可视地区的尺寸。必需将position属性的值设为absolute,此属性方可以使用。
  自IE5入手下手,此属性在MAC平台上可用。
  对应的剧本特征为clip。
  CSS中的clip属性除能够制造黑色笔墨外,还能够无效地裁切其他网页中的元素。
  clip属性设置元素的外形。这个属性用于界说一个剪裁矩形。在这个矩形内的内容才可见,出了这个剪裁地区的内容和overflow:hidden的效果不异。剪裁地区大概比元素的内容区年夜,也大概比内容区小。
  clip属性值:auto|rect(top,right,bottom,left)
  auto代表不裁切,rect中的上右下左四个偏向填进的应是数值,暗示裁切的地位。
  上面我举一个对图片举行裁切的复杂例子。
  起首筹办一张图片,如图一中所示,它的尺寸是159px*99像素。我盘算使用clip属性将图片举行裁切,只让图中的年夜红点显现出来。
  我先制造一个安排图片的div外框,它的CSS界说以下:
#imgClip{
position:relative;
width:159px;
height:99px;
background:#FFF985;
margin:0auto;
}
  这个div的定位属性设置为绝对定位是为了让图片以它为定位尺度,将背景界说为#FFF985是为了让显现效果更分明。
  然后界说图片的裁切属性,CSS界说以下:
#imgClipimg{
position:absolute;
clip:rect(21px68px51px38px);
}
  这里的相对定位是相对id为imgClip的div而言的,clip中的数值依照上右下左的按次分列的。
  html代码:
<divid="imgClip">
<imgsrc="http://www.webjx.com/clipimg.gif"width="159"height="99"/>
</div>

可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
活着的死人 该用户已被删除
沙发
发表于 2015-1-17 23:52:01 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
深爱那片海 该用户已被删除
板凳
发表于 2015-1-26 23:01:33 来自手机 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
愤怒的大鸟 该用户已被删除
地板
发表于 2015-2-5 03:32:43 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
冷月葬花魂 该用户已被删除
5#
发表于 2015-2-11 03:57:45 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
小妖女 该用户已被删除
6#
发表于 2015-3-1 21:26:23 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
因胸联盟 该用户已被删除
7#
发表于 2015-3-11 01:03:31 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
小女巫 该用户已被删除
8#
发表于 2015-3-17 18:08:16 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
admin 该用户已被删除
9#
发表于 2015-3-24 19:57:59 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-23 01:20

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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