精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网页软件>Dreamweaver教程>正文

Dreamweaver打造多彩文字链接


来源:站长站 时间:06-09-17 点击: 点击这里收藏本文
二、 初级链接样式

  这部分的链接效果我们将完全在样式编辑器的Type分类中完成,如何创建和设置我不再细说,只把完成的面板图给大家看,并稍作介绍。

  1、 普通链接。如图六;
  

  普通的链接都是在样式编辑器的Category分类中的第一项Type中设定,Color定义链接字体的颜色,Decoration定义链接的划线风格,分为以下几类:

    underline:下划线

    overline:上划线

    line-through:删除线

    blink:闪动线

    none:无划线

  本部分的其他几种链接样式都是通过改变划线的组合来达到的效果。

  2、 无下划线链接,如图七;
  

  3、 双划线链接,如图八;   

  4、 删除线链接,如图九;   
 
    三、 进阶链接样式

  接下来我介绍一种另类链接样式的定义方法,这种方法主要是利用样式表中的Border属性来替代普通链接的划线,由于Border有更多的控制参数和样式,因此可以实现一些特殊的效果。我们来看看下面的面板,如图十;
  

  在Border选项中包括Width(划线宽度)、Color(划线色彩)、Style(划线种类)三部分,而每部分又是可以针对不同的边框设定不同的参数,这是普通链接划线不可能实现的效果。

  需要提醒大家的是,使用这种方法定义链接样式还有一个必要的条件:就是必须定义样式中的Box属性,如图十一;
  

  这是因为Border是属于样式中的块状元素,我们必须先定义一个块状元素才可以使Border起作用。我们只要任意定义Box选项中的Width或Height即可,具体数值大家可以试着看看效果,我在这里定义了Height为0。下面我们看看可以做出什么样的效果。

  1、 另类链接样式。设置如图十二;
  

  2、 定制下划线色彩,我们可以定义出下划线与文字不同的色彩,这是普通链接文字不可能实现的效果,只要将Border的色彩和文字的色彩定义的不同即可,如图十三;
  
 
    3、 定制下划线距离。此种划线的距离我们可以在Box分类中设置,只需改变Padding的数值,在本例中我们设定Padding—Bottom为5pix,如图十四;
  

    4、 定制划线长度和对齐方式。更进一步我们还可以精确定义划线的长度和对齐方式,打开Box分类设定Width为200,如图十五;设定Block分类的Text Align为Center,即中间对齐,如图十六;  
  
  

  5、 定制双划线效果。改变Border中的Style即可改变划线的外观,其中设定Style为Double,并设定Bottom为3pix即可实现双划线的效果。如图十七;   


9 7 3 1 2 3 4 8 :

  把此文章收藏到:          
相关教程
广而告之
文章搜索
  • Google JZxue.Com
最新文章

网站推广—网站建设的关键课

吸引访客,做内容有价值的网  
关于Photoshop直方图的详细  
网站策划,B2B网站策划者应  
Web标准网站开发人员配备  
便宜/廉价的网站推广方式  
写给做BBS的新站长  
行为经济学在网站运营中的  
漫谈网站改版的必要性  
网站策划需要具备的知识  
外贸网站建设全攻略  
CSS让网页更容易设计与维护  
和马云学习如何做网站推广  
推荐导读

优秀个人网站打造全过程

热门排行
如何制作网页(网页制作实  
如何选择网页制作工具  
下载安装Dreamweaver8  
制作主页前的准备  
垃圾站全教程--之一(新手上  
怎样个人网页制作,制作个人  
制作模板  
在Dreamweaver设置站点  
制作首页  
网站设计65条原则  
规划站点  
中国所有银行的BIC code(即  
个人主页制作完全手册  

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.