给大家带来使用CSS的Clip属性来制造多彩笔墨

只看该作者 · 发表于 2015-1-16 00:23:07

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

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

x

使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
道理

将二个不异而色采分歧的笔墨重合在一同，经由过程分离给其加clip属性，使下面和上面的笔墨被剪切地位分歧，从而发生二种分歧的色采。
clip:摘自苏沈细雨CSS手册

clip:auto|rect(numbernumbernumbernumber)参数：auto:　工具无剪切rect(numbernumbernumbernumber):根据上-右-下-左的按次供应自工具左上角为(0,0)坐标盘算的四个偏移数值，个中任一数值都可用auto交换，即此边不剪切申明：检索或设置工具的可视地区。地区外的部分是通明的。必需将position的值设为absolute，此属性方可以使用。

复制代码

测试情况

Firefox1.5、IE6.0、Opera8.5、IE5.01绿色版经由过程。
CSS
以下是援用片断：
.textBottom{
color:#333333;
position:absolute;
left:3em;
top:1em;
font:26pxCenturyGothic,Arial,Helvetica,sans-serif;
clip:rect(18pxautoautoauto);
}
.textTop{
color:#CC0000;
position:absolute;
left:3em;
top:1em;
font:26pxCenturyGothic,Arial,Helvetica,sans-serif;
clip:rect(0auto18px0);
}
.container{
width:28em;
height:5em;
margin:1emauto;
position:relative;
background:#F6F6F6;
}

xhtml
以下是援用片断：
<divclass="container">
<ahref="#"class="textTop">CascadingStyleSheet</a>
<ahref="#"class="textBottom">CascadingStyleSheet</a>
</div>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="Keywords"content="多彩笔墨,MultiColoredText"/><metahttp-equiv="Description"content="使用CSS的Clip属性来制造多彩笔墨(MultiColoredText)"/><metacontent="all"name="robots"/><metahttp-equiv="pragma"content="no-cache"/><metaname="author"content="forestgan"/><metaname="copyright"content="forestgan"/><title>多彩笔墨(MultiColoredText)</title><styletype="text/css">body{background:#FFFFFF;color:#333333;font-family:Arial,Helvetica,sans-serif;font-size:100%;line-height:140%;text-align:center;padding:0;margin:0;}p{margin:0;}address{font-size:75%;}body,html{height:100%;}*html,*htmlbody{overflow:hidden;}#top{min-height:90%;overflow:auto;}*html#top{height:90%;}#footer{height:10%;background:#CC0000;color:#FFFFFF;}address{padding-top:1em;font-style:normal;}a{text-decoration:none;}.textBottom{color:#333333;position:absolute;left:3em;top:1em;font:26px"CenturyGothic",Arial,Helvetica,sans-serif;clip:rect(18pxautoautoauto);}.textTop{color:#CC0000;position:absolute;left:3em;top:1em;font:26px"CenturyGothic",Arial,Helvetica,sans-serif;clip:rect(0auto18px0);}.container{width:28em;height:5em;margin:1emauto;position:relative;background:#F6F6F6;}.textTop:hover{color:#808080;}.textBottom:hover{color:#FF4646;}</style></head><bodylang="en"><divid="top"><divclass="container"><ahref="#"class="textTop">CascadingStyleSheet</a></div><p>笔墨的上半部分</p><divclass="container"><ahref="#"class="textBottom">CascadingStyleSheet</a></div><p>笔墨的下半部分</p><divclass="container"><ahref="#"class="textTop">CascadingStyleSheet</a><ahref="#"class="textBottom">CascadingStyleSheet</a></div><p>二组笔墨重合的效果</p></div><divid="footer"><address>Designby<ahref="http://www.forest53.com">forestgan</a>本演示接纳<ahref="http://www.creativecommons.cn/">创作共用受权</a>--签名和非贸易用处。</address></div><scriptsrc="http://www.google-analytics.com/urchin.js"type="text/javascript"></script><scripttype="text/javascript">_uacct="UA-152060-1";urchinTracker();</script><noscript>google-analytics</noscript><scriptsrc="http://www.forest53.com/stat/mystat.asp?siteid=1"type="text/javascript"></script><noscript>stat.</noscript><scriptlanguage="Javascript">varnow=newDate();document.write("</noscript></body></html>
运转代码复制代码另存代码

参考材料：http://www.ibloomstudios.com/article8/
</p>
更好的控制页面布局。不用多说。

只看该作者 · 发表于 2015-1-18 06:30:16

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-1-25 22:47:39

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

只看该作者 · 发表于 2015-2-4 13:19:36

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-2-9 23:31:03

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-2-28 08:51:39

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

只看该作者 · 发表于 2015-3-9 21:59:01

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-23 17:40:51

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 给大家带来使用CSS的Clip属性来制造多彩笔墨

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

相关帖子