设计干净的链接

链接|设计

  网页离不开链接,而默认链接的表现形式总是千篇一律的蓝色文字加底线,每当我们点击它时,周围会出现虚线框,表示该链接是当前的焦点,影响了美观。不过一些五彩缤纷的链接所付出的代价是添加了大量的代码。我们可以在源文件的链接标签中添加一小段代码屏蔽一些默认属性,图个新鲜。 
  首先只要在链接标签中添加这句代码即可屏蔽点击时四周出现的虚线框,如: 网页陶吧 网页刷新后再点击这个链接,是不是不显示虚线框了!OK,我们继续改造,再一步的工作是删除链接上的底线。在源代码的标签后添加以下三句代码,即可使本页的链接的底线不显示:
  <style type="text/css">A {text-decoration:none}</style>
  保存后再打开网页,链接的表现形式是不是只是蓝色文字了!如果还不够,你还可以改变它的颜色,这个很容易实现:在链接文字前添加这句代码即可使链接文字变成红色

时间: 2024-08-31 00:20:02

设计干净的链接的相关文章

学习网页制作技术之设计好干净的链接

链接|设计|网页 网页离不开链接,而默认链接的表现形式总是千篇一律的蓝色文字加底线,每当我们点击它时,周围会出现虚线框,表示该链接是当前的焦点,影响了美观.不过一些五彩缤纷的链接所付出的代价是添加了大量的代码.我们可以在源文件的链接标签中添加一小段代码屏蔽一些默认属性,图个新鲜. 首先只要在链接标签中添加这句代码即可屏蔽点击时四周出现的虚线框,如: 网页陶吧 网页刷新后再点击这个链接,是不是不显示虚线框了!OK,我们继续改造,再一步的工作是删除链接上的底线.在源代码的标签后添加以下三句代码,即可

手机购物体验设计:干净,有效,流畅,简便的购物流程设计

文章描述:手机商务开始走向成熟.一个好的和差的订单提交体验对收入的影响是有很大的不同.如果给用户一个干净,有效,流畅,简便的过程来完成购物--在了解了以上提及的手机体验的优势和局限--那么用户和商家都可以盈利. 译者注:在电子商务中,我们发现用户在支付环节的流失率非常高,支付流程的用户体验是至关重要的环节.本文介绍了一些移动端支付流程的方法,怎样让我们的支付流程更加易用.业余时间翻译了这篇文章跟大家共享,若大家发现任何错误,欢迎随时给予纠正. 原文地址:designing-a-better-mo

网页设计关于超级链接的设计原则

相关文章:网页内容页面制作的9个实用建议 网页页面设计的4个实用建议 网页布局的9个建议 网页制作关于HTML格式和长文件的建议 链接 1.尽管你已做了一个漂亮的首页作为入口,其他人可能会对你的杰作内的具体指针或子页给出链接.向这些新的访问者提供一些关于他们在什么地方以及为什么在这里的线索是有意义的. 2.从头至尾都要使用导航图标,尤其是要用"返回到首页"链接.比如在每页的顶端(或底部)都有一小串图标,第一个回到首页,第二个回到章,第三个回到节. 3.在页面上应该有一些链接帮助访问者来

Dreamweaver如何设计彩色文字链接(初级版)

  1.按下 Shift+F11 键打开 CSS 样式面板,单击"新建样式"按钮,在弹出的"新建 CSS 样式"对话框中点选"高级"选项,然后在选择器下拉菜单中选择" a:link ",点击确定,创建一个 CSS 样式表文件. 2.保存样式表文件后,设定默认链接样式为无下划线,字体为宋体 12pt ,其他色彩等参数都不设置. 3.再次单击"新建样式"按钮,在"新建 CSS 样式"对话框中

Dreamweaver如何设计彩色文字链接(进阶版)

  1.在 CSS 样式表面板中双击" .t1 ",打开 t1 样式表,这里要定义其块状链接样式.单击"背景"选项,首先给链接增加一个背景色,这里选择"红色",在分类栏中选择"边框",然后在"上"列表中选择"实线",为文字链接的四周增加一个边框,从而实现平面块状文字链接. 2.在分类栏中选择"边框",然后设置宽和高的值为 1px ,这样可以使链接文字与按钮四周有 1p

Dreamweaver设计多彩文字链接教程

  文字链接是网页中最常见的页面元素,在默认状态下,文字链接样式都是带下划线的,这种一陈不变的外观使网页无法凸现个性和满足布局的需要.为了使文字链接符合页面的整体效果,可以采用 CSS (样式)来实现多样的文字链接. 效果说明 将鼠标置于文本上时,文本样式会发生改变,比如不会出现下划线,文字会闪动等.结合其他样式属性,还可以实现按钮式文字链接,效果如图 22-1 所示. 创作构思 Text-decoration 属性用来控制超级链接,结合 Border-Style 属性,还可以实现更加复杂的样式

dreamweaver技巧之设计彩色文字链接示例

  效果说明 将鼠标置于文本上时,文本样式会发生改变,比如不会出现下划线,文字会闪动等.结合其他样式属性,还可以实现按钮式文字链接,效果如图所示. 具体操作步骤: 步骤一初级链接样式 在 CSS 样式定义设置对话框中的"类型"子选项中有 5 种修饰类型.点选不同的修饰项,可以轻易设置不同的初级链接样式,如图1所示.下面以"无"下划线设置为例进行讲解,其他样式的设置跟本例类似. 1.创建一个 CSS 样式表文件.按下 Shift+F11 键打开 CSS 样式面板,单击

Dreamweaver设计多彩文字链接

  文字链接是网页中最常见的页面元素,在默认状态下,文字链接样式都是带下划线的,这种一陈不变的外观使网页无法凸现个性和满足布局的需要.为了使文字链接符合页面的整体效果,可以采用 CSS (样式)来实现多样的文字链接. 效果说明 将鼠标置于文本上时,文本样式会发生改变,比如不会出现下划线,文字会闪动等.结合其他样式属性,还可以实现按钮式文字链接,效果如图 22-1 所示. 创作构思 Text-decoration 属性用来控制超级链接,结合 Border-Style 属性,还可以实现更加复杂的样式

网站设计之导航链接的要求

  1.提醒读者某一系列文件已到尽头. 当读者已达某一系列文件的最后一页时,网站设计者应提供一小段告示提醒读者,同时不再提供"下一页"的导览按钮或超连结.但基于网站界面设计的一致性,或许有些网站设计者并不希望在同一系列的最后一篇网站里忽然少了一个先前每页都有的"下一页"导览按钮.为达此目的,可考虑将最后一页的"下一页"导览按钮颜色暗沉下来,且不赋予超连结的功能,并提供一小段告示提醒读者,此系列文件已到尽头,不再有"下一页"的内