欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+CSS实例 >

CSS 实例 10-3-2 dreamweaver

 一、超链接样式

超链接的4中状态

a:link 超链接默认状态

a:visited 已经浏览过的链接

a:hover 鼠标经过时

a:active 点击链接时

软件:Dreamweaver cs6 || 素材:10-3-1 中导航栏

任务3:1.设置导航栏 超链接(这节使用空链接);2.设置默认以及浏览过是的超链接状态为:白色无 下划线;

3.设置鼠标经过是区域显示高亮提示 并且将高亮区域放大

步骤重点:1.完成超链接设置;

CSS 实例 10-3-2 dreamweaver

2.设置默认以及浏览过是的超链接状态为:白色无 下划线;

先设置默认状态 :
CSS 实例 10-3-2 dreamweaver

由于浏览过的的超链接也会有不一样的显示状态,如

CSS 实例 10-3-2 dreamweaver

所以这里需要将浏览过的设置为 默认的时候的显示

CSS 实例 10-3-2 dreamweaver

3.设置鼠标经过是区域显示高亮提示 并且将高亮区域放大

设置 鼠标经过时背景颜色为:#33FF99(可提前复制颜色代码)

CSS 实例 10-3-2 dreamweaver

放大高亮区域(修改填充区域)

CSS 实例 10-3-2 dreamweaver

效果CSS 实例 10-3-2 dreamweaver


二、添加超链接格式对象

纵观全局,网页不只需要一种超链接样式。

任务:1.将上面设置的超链接显示添加对象为导航栏;2.在此基础上设置另外一种超链接样式;

学习重点:1.将上面设置的超链接显示添加对象为导航栏;(代码操作)

这里需要知道导航栏的类名称,然后找到超链接样式代码位置,最后修改代码完成添加对象操作

先找到类名称(可在代码里找到)
CSS 实例 10-3-2 dreamweaver

然后找到超链接样式代码位置

CSS 实例 10-3-2 dreamweaver

最后修改代码(开头添加对象的名称)

CSS 实例 10-3-2 dreamweaver

2.在此基础上设置另外一种超链接样式;

先设置个不同于前面的CSS样式

CSS 实例 10-3-2 dreamweaver

然后修改代码 (添加超链接颜色并去掉下划线)

CSS 实例 10-3-2 dreamweaver


三、滤镜

本节使用参数说明:

Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)

Opacity: 透明°级别,范围是 0-100 ,0代表完全透明,100代表完全不透明。

FinishOpacity:设置渐变的透明效果时,用来制定结束时的透明度,范围也是 0到100.

Style:设置渐变透明的样式,值为 0代表统一形状、1代表线形、2代表放射形、3代表长方形

StartX 和 StartY: 代表渐变透明效果的开始 X 和 Y 坐标。

FinishX 和 FinishY: 代表渐变透明效果的结束 X 和 Y 坐标。

重点:添加图片,设置滤镜参数

CSS 实例 10-3-2 dreamweaver

坐标 (0,0)为中心,坐标(300,240)为边界 (操作方法是这样,但是这个功能DW CS6好像不支持,不行换回 CS3操作看看)

除了滤镜其他功能可以网上搜到。(http://www.6699fa.cn/dreamweaver/shi11091102.html 这个博客里也提到一部分)


四 CSS使用使用技巧

包括:CSS启用与停用;检查内容和代码;测试浏览器支持 (这一节不是太麻烦,网上可以找到相应的说明,还有一些其他的小技巧)

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/shili/s50800.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-08-26 07:20 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。