仓酷云

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

[DIV+CSS] 带来一篇CSS+javascript殊效赏析

[复制链接]
活着的死人 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:20:22 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。
 从如今入手下手,我将向您先容一系列的CSS作品,这些多数是CSS与JavaScript分离起来发生的殊效。您能够经由过程对这些殊效的浏览,进一步明白到CSS的壮大功效。
  1、静态改动款式

  我们先来看一个较复杂的殊效,这里只是用到了属性和鼠标事务。

  请把鼠标移到蓝色背景的笔墨上面。
  我们利用“class”类属性来改动文档的款式。缩小这段文本。

  这个例子的代码是如许的:

  <html>
  <head>
  <title>changestyle</title>
  <style>
  <!--
  .bigchange{color:blue;font-weight:bolder;font-size:225%;
  letter-spacing:4px;background:yellow;}
  //*界说bigchange类的字体的色彩、粗细、巨细,字间距,背景致*//
  .start{color:yellow;background:navy;}
  //*界说start类的字体的色彩和背景致*//
  -->
  </style>
  </head>
  <body>
  <h1>静态改动款式</h1>
  <p>请把鼠标移到蓝色背景的笔墨上面。</p>
  <p>我们利用"class"类属性来改动文档的款式。
  <spanonmou搜索引擎优化ver="this.className=bigchange"
  onmou搜索引擎优化ut="this.classname=start"class="start"
        style="cursor:hand">
  缩小这段文本。</span></p></body>
  //*界说鼠标触发事务,当鼠标放上往的时分,地区内以bigchange类的格局显现,
  当鼠标分开的时分,以start类显现*//
  </html>

  这个例子很复杂,简单了解,就未几说甚么了。

  <html>  <head>  <title>changestyle</title>  <style>  <!--  .bigchange{color:blue;font-weight:bolder;font-size:225%;  letter-spacing:4px;background:yellow;}  //*界说bigchange类的字体的色彩、粗细、巨细,字间距,背景致*//  .start{color:yellow;background:navy;}  //*界说start类的字体的色彩和背景致*//  -->  </style>  </head>  <body>  <h1>静态改动款式</h1>  <p>请把鼠标移到蓝色背景的笔墨上面。</p>  <p>我们利用"class"类属性来改动文档的款式。  <spanonmou搜索引擎优化ver="this.className=bigchange"  onmou搜索引擎优化ut="this.classname=start"class="start"        style="cursor:hand">  缩小这段文本。</span></p></body>  //*界说鼠标触发事务,当鼠标放上往的时分,地区内以bigchange类的格局显现,  当鼠标分开的时分,以start类显现*//  </html>
运转代码复制代码另存代码</p>
在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
变相怪杰 该用户已被删除
沙发
发表于 2015-1-18 06:08:49 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
admin 该用户已被删除
板凳
发表于 2015-1-24 16:29:03 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
小妖女 该用户已被删除
地板
发表于 2015-2-2 11:18:18 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
若天明 该用户已被删除
5#
发表于 2015-2-7 19:09:35 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
第二个灵魂 该用户已被删除
6#
发表于 2015-2-23 09:19:21 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
谁可相欹 该用户已被删除
7#
发表于 2015-3-7 08:08:36 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
只想知道 该用户已被删除
8#
发表于 2015-3-14 19:44:24 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
飘灵儿 该用户已被删除
9#
发表于 2015-3-21 15:28:43 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-23 06:31

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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