仓酷云

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

[DIV+CSS] 来看看:CSS技能:网页笔墨突变效果

[复制链接]
蒙在股里 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:41:05 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
有了CSS,我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题,改变字体颜色,字体样式等等
网页制造poluoluo文章简介:本文先容的手艺很典范,也算是一篇老文章了,信任良多人也都看过,之前神飞有注重到国际有些翻译,可是不周全,这里我就将其完全的翻译了一下。
本文先容的手艺很典范,也算是一篇老文章了,信任良多人也都看过,之前神飞有注重到国际有些翻译,可是不周全,这里我就将其完全的翻译了一下。
你想制造大度的题目而不必将每一个题目都做成图片吗?这里是一个复杂的CSS技能,它将向你展现利用一个png图片制造突变笔墨的办法(纯CSS、无Javascript或Flash)。而你所必要的仅仅是在题目内里的一个空<span>标签,它利用背景图片和position:absolute属性将题目掩盖。该技能经支流扫瞄器测试:Firefox,Safari,Opera,和InternetExplorer6。
优点



  • 这是一个纯CSS技能,无需JS或Flash。它兼容支流扫瞄器包含IE6(必要利用PNGhack)。
  • 它关于计划题目是很完善的。你无需利用Photoshop制造每个题目。这也明显可以节俭你的工夫和带宽。
  • 你固然能够是用任何收集字体和字体型号。
它是怎样事情的?

这个小技能很复杂。基础上我们只是在笔墨下面增加了一个1px的突变PNG图片(利用alpha通明)

HTML代码
  1. <h1><span></span>CSSGradientText</h1>
复制代码
CSS代码

这里的关头点是h1{position:relative}和h1span{position:absolute}
  1. h1{font:bold330%/100%"LucidaGrande";position:relative;color:#464646;}h1span{background:url(gradient.png)repeat-x;position:absolute;display:block;width:100%;height:31px;}
复制代码
是的,就这些,你已弄定了。点击此处检察演示页面。
让它在IE6中可用

由于IE6不克不及准确衬着24位PNG图片,为了显现通明的png图片,上面的hack是必需的。(利用HTML前提正文的办法)在head部分的任何一个中央增加以下代码:
  1. <!--[ifltIE7]><style>h1span{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=gradient.png,sizingMethod=scale);}</style><![endif]-->
复制代码
这正式我们为何憎恨IE6的缘故原由之一!
jQuery静态到场版本(对语义喜好者有效)

假如你不想在题目内里有个空的<span>标签,你可使用Javascript静态到场<span>标签。利用jQuery的prepend办法能够很简单的完成:
  1. <scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){//prependspantagtoH1$("h1").prepend("<span></span>");});</script>
复制代码
更多的例子

想要完成Web2.0的平滑笔墨?

云云类推,你能够将此技能用于任何流动背景致的情形(突变色和背景致一样)






图案/纹理

你也能够用一个砖瓦背景图片。看呀,这就是这就是一个斑马图案。——那末,随便发扬吧!

范围性…



  • 这个技能只合用于流动背景致的元素。你的突变色(PNG图片)必需与背景致是统一个色彩。
  • 假如你想兼容IE6,就必要利用IE6的PNGhack(好比滤镜或JS办法)
  • 假如你的突变图片比题目要高,那末这个笔墨将是不克不及被选择的。
PS:关于范围性的第一条,倡议在demo页面利用firebug调试一下,改动一下背景致,就能够看出变更了——神飞。

另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用他的ID进行控制。
爱飞 该用户已被删除
沙发
发表于 2015-1-17 23:42:25 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
活着的死人 该用户已被删除
板凳
发表于 2015-1-25 14:54:01 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
金色的骷髅 该用户已被删除
地板
发表于 2015-2-2 22:35:38 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
柔情似水 该用户已被删除
5#
发表于 2015-2-8 19:55:23 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
分手快乐 该用户已被删除
6#
发表于 2015-2-26 02:08:12 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
不帅 该用户已被删除
7#
发表于 2015-3-8 11:37:27 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
只想知道 该用户已被删除
8#
发表于 2015-3-15 23:08:11 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
变相怪杰 该用户已被删除
9#
发表于 2015-3-22 18:12:38 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-5-10 07:26

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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