|
|
域名空间 下载中心 社区论坛 信息公告 my小屋 | |
 |
联系我们 设为首页 加入收藏 |
 |
|
 |
首页 | 新闻资讯 | 编程开发 | 网页设计 | 图形图象 | 网络媒体 | 网站模板 | 数 据 库 | 投稿 论坛 | 操作系统 | 系统优化 | 网络安全 | 黑客技术 | 硬件学堂 | 硬件报价 | 服 务 器 | 地图 专题 | 应用软件 | 聊天通讯 | q q 专栏 | 建站经验 | 在线工具 | 站长club | 注 册 表 | 旧版 社会 | 游戏娱乐 | 设计欣赏 | 疑难解答 | 社区论坛 | 网络赚钱 | 网站地图 | 广告服务 | 服务 |
 |
 |
 |
 当前位置：首页>>网页设计>>dreamweaver>>正文 |
新版上线！[旧版] |  |
|||
注:打开慢时请稍等
|
启动dreamweaver，打开你要应用鼠标样式的网页，在主窗口中选择text下拉菜单，再选择css style子菜单中的new style命令新建样式表。（注：如果你的网页中已经存在样式表，可以选择css styles edit style sheet编辑样式表。） 此时弹出new style对话框。其中type项有三个单选按钮：make custom style、redefine html tag、use css selector。其中make custom style 是自定义样式，样式名以圆点开头；use css selector是使用css选择器，里边包含四个超链接样式a:active/a:hover/a:link/a:visited；redefine html tag是定义html系统标签的样式，如a\body\br等等。假设我们只对该页面的超链接设置鼠标样式，这里选择redefine html tag选项中的a标签。下面的define项选择this document only。单击ok按钮。 弹出style definition for 对话框，进入超链接样式设置。左边的category是样式类别，这里对其它项不作解释，我们选择extentions项。可以看到右边visual effect中的cursor项，这就是设置鼠标样式的关键项。单击右边的下拉菜单，选择你所需要的鼠标样式，单击ok按钮就可以了。 下面讲一下各样式的大致含义。 hand：是大家所熟悉的手型。 crosshair：是十字型，就是小乌龟首页所用的样式。 text：是平时鼠标移动到文本上的样式。 wait：是等待的效果。 default：是默认的那种效果。 help：是带问号的鼠标样式。 e-resize：是向右的箭头。 ne-resize：是向右上方的箭头。 n-resize：是向上的箭头。 nw-resize：是向左上方的箭头。 w-resize：是向左的箭关。 sw-resize：是向左下的箭头。 s-resize：是向下的箭头。 se-resize：是向右下方的箭头。 auto：是系统自动的效果。 当然根据需要你也可以将样式应用于其它标签，或者单纯的只应用于某一段文本。如果读者对css代码不陌生的话，或许直接手写代码更方便。特别是，如果你想在不同的位置运用不同的鼠标样式，或者不同的标签使用不同的鼠标样式。直接将样式写在某个具体的标签里边就可以了。 方法是：<tag style="cursor:mouse_style">。其中tag是标签名，mouse_style就是鼠标样式，如hand/crosshair/text/wait等等。 下面举个具体的实例以加深大家对鼠标样式设置的理解。 <span style="cursor:hand"> hand：是大家所熟悉的手型。</span><br> <span style="cursor:crosshair">crosshair：是十字型，就是小乌龟首页所用的样式。</span><br> <span style="cursor:text">text：是平时鼠标移动到文本上的样式。</span><br> <span style="cursor:wait">wait：是等待的效果。</span><br> <span style="cursor:default">default：是默认的那种效果。</span> <br> <span style="cursor:help">help：是带问号的鼠标样式。</span><br> <span style="cursor:e-resize">e-resize：是向右的箭头。</span><br> <span style="cursor:ne-resize">ne-resize：是向右上方的箭头。</span><br> <span style="cursor:n-resize">n-resize：是向上的箭头。</span><br> <span style="cursor:nw-resize">nw-resize：是向左上方的箭头。</span><br> <span style="cursor:w-resize">w-resize：是向左的箭关。</span><br> <span style="cursor:sw-resize">sw-resize：是向左下的箭头。</span><br> <span style="cursor:s-resize">s-resize：是向下的箭头。</span><br> <span style="cursor:se-resize">se-resize：是向右下方的箭头。</span><br> <span style="cursor:auto">auto：是系统自动的效果。</span> 将上面这段代码拷到你的网页中，按f12预览。将你的鼠标移到相应的文本上方，看看鼠标有什么变化？是不是以相应的样式显现了？ 感觉如何？亲手去体验一下吧。希望小乌龟能带给你不一样的感觉！！ 编辑：黑鹰 [发送给好友] [打印本页] [关闭窗口] [返回顶部] 上一篇：dreamweaver 事件简述 下一篇：用dreamweaver做搜索表单 转载请注明来源：www.iyit.net 特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。 |
| 相关文章 | ||||
| 友情链接 | ||||||
 |
设置首 页 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接 |  |
| |||||||
易特网络技术