仓酷云

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

[DIV+CSS] 给大家带来jQuery插件完成css3效果

[复制链接]
愤怒的大鸟 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:54:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了。
网页制造poluoluo文章简介:css3能够轻松完成良多比如图片边框、多重背景、笔墨暗影等效果,可是今朝撑持css3的扫瞄器少之又少,常常了完成圆角效果要往写一堆代码,上面先容的这些壮大的jQuery插件能够轻松帮你完成良多庞大的视觉效果。
css3能够轻松完成良多比如图片边框、多重背景、笔墨暗影等效果,可是今朝撑持css3的扫瞄器少之又少,常常了完成圆角效果要往写一堆代码,上面先容的这些壮大的jQuery插件能够轻松帮你完成良多庞大的视觉效果。
在这之前我们先来看一下几个CSS3实例代码是怎样完成各类效果的。
1.多重背景
#backgrounds-box{
background:url(top-backgroundg.png)topleftno-repeat,
url(bottom-backgroundg.png)bottombottomleftno-repeat,
url(middle-backgroundg.png)leftrepeat-y;
padding:35px;
}
2.笔墨暗影
b{text-shadow:5px5px5px#666666;}
3.圆角
#rounded-corners-box{
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-top-rightright-radius:8px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-rightright-radius:8px;
}
4.通明效果
.div-name{background:#333333;opacity:0.8;width:380px;height:70px;}
上面来看看jQuery插件完成css3效果的插件:
jQueryCorners0.3
轻松地完成大度的圆角,无需分外的标签或图片。撑持iPhone.、Chrome、Firefox、Safari2+、Opera9.0+、InternetExplorer6+。

jQueryCanvasRoundedCorners
经由过程canvas完成圆角的jQuery插件,撑持IE7、FF。

HowToBorderImagewithCSS3andjQuery
CSS3draft先容灰墙壮大的图片边框手艺。


HowToCSSMultipleBackgrounds/BackgroundLayeringwithjQuery
完成多重图片背景的这个插件能够极年夜地削减xhtml标签,精简你的代码,多重背景的观点相似于PS的图层,一个图层叠在另外一个图层下面。

HowToDropShadowwithjQuery
为页面上的笔墨和通明图片增加温和和暗影效果。

HowToText-shadowinInternetExplorerusingjQuery
这个教程会教你怎样在IE中轻松完成笔墨暗影效果。

HowToElementGradientwithjquery
同意你自界说元素的添补突变效果,撑持指定突变的偏向。

HowtoRoundedCornersinjQuery
一个浅易的用jQuery完成圆角的教程。

CSS3TemplateLayoutrealizedwithjQuery
完成CSS3结构。

CreatingapolaroidphotoviewerwithCSS3andjQuery
分离CSS3的BoxShadow属性Rotate完成拖动图片过程当中的暗影效果。

jSlickmenu:AjQuerypluginforslickCSS3menus
jSlickmenu经由过程相似CSS3的rotation和shadows属性现十分酷的菜单效果。


业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站。
只想知道 该用户已被删除
沙发
发表于 2015-1-17 23:49:52 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
小妖女 该用户已被删除
板凳
发表于 2015-1-21 21:46:04 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
第二个灵魂 该用户已被删除
地板
发表于 2015-1-30 22:51:50 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
再见西城 该用户已被删除
5#
发表于 2015-2-6 16:45:01 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
透明 该用户已被删除
6#
发表于 2015-2-17 12:25:38 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
深爱那片海 该用户已被删除
7#
发表于 2015-3-5 19:49:38 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
海妖 该用户已被删除
8#
发表于 2015-3-12 13:59:53 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
山那边是海 该用户已被删除
9#
发表于 2015-3-19 23:17:24 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-6-5 17:41

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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