html 中 超链接的写法,网页超链接样式的CSS写法「建议收藏」

html 中 超链接的写法,网页超链接样式的CSS写法「建议收藏」上一篇文章讲了母栏目后面两行子栏目的DIV布局,这篇文章讲导航做完之后我想在鼠标移到每个不同区域的超链接在颜色上给予变化。上图所示上上一篇文章的大概样式,颜色就不一一举例了,我现在现在是给了“男士”“女士”“养生”三个母栏目不同的颜色,为了好看一点,我想鼠标移动到“男士”后面的子栏目上面的颜色和“男士”的字体颜色一样,移到“女士”其后面的子栏目的超链接与“女士”的超链接颜色一样,“养生”同样的。先…

大家好,又见面了,我是你们的朋友全栈君。

上一篇文章讲了母栏目后面两行子栏目的DIV布局,这篇文章讲导航做完之后我想在鼠标移到每个不同区域的超链接在颜色上给予变化。

01f87fb4d3c0a0959f04892c333b7a06.png

上图所示上上一篇文章的大概样式,颜色就不一一举例了,我现在现在是给了“男士”“女士”“养生”三个母栏目不同的颜色,为了好看一点,我想鼠标移动到“男士”后面的子栏目上面的颜色和“男士”的字体颜色一样,移到“女士”其后面的子栏目的超链接与“女士”的超链接颜色一样,“养生”同样的。

先来看看网页中定义超链接样式的代码:

a:link:超链接字体的颜色

a:hover:鼠标移动覆盖在超链接上面的颜色

a:active:当鼠标点击按下的时候颜色的一个变化

a:visited:超链接已经被访问后的文本颜色

在以上各个样式里面还可以定义,下划线(text-decoration),超链接背景(background)以及超链接字体大小(font-size)等;

先看全部的代码:

无标题文档

body { padding:0px; margin:0px;}

#zongk { width:180px; height:30px; line-height:30px; margin:auto; text-align:center;}

#zongk a:link { color:#000; text-decoration:none; background:url(images/lja.png) no-repeat 0px 0px;}

#zongk a:hover { color:#ccc; text-decoration:underline; background:url(images/lja.png) no-repeat 0px -30px;}

#zongk a:active { color:#00F; text-decoration:none;}

#zongk a:visited { color:#0F0; text-decoration:none;}

这里我只写了超链接的样式,我先写了一个层DIV,把这个层DIV居中话处理,给了他的宽width:180px; height:30px;居中:margin:auto;我需要将超链接在未被访问点击的时候是一个颜色,在鼠标移动覆盖到超链接上面是一个颜色,访问点击完成之后是一个颜色且在鼠标覆盖在超链接上时,是有下划线的。

#zongk { width:180px; height:30px; line-height:30px; margin:auto; text-align:center;}

这段说我将zongk这个层定义了宽180px,高30px,行高30px(文本在垂直方向上居中),层居中显示且文本都是在水平方向居中;

#zongk a:link { color:#000; text-decoration:none; background:url(images/lja.png) no-repeat 0px 0px;}

层zongk下面的超链接在未被访问的时候颜色为#000;没有下划线,且背景图片是image下面的“lja.png”,X轴方向距离0px,Y轴方向举例为0px;

#zongk a:hover { color:#ccc; text-decoration:underline; background:url(images/lja.png) no-repeat 0px -30px;}

“zongk”里面超链接样式在鼠标覆盖时的样式,前面和上面一样只是颜色改变了,背景图片改变了同一张图片下面X轴距离不变,Y轴举例向下30PX像素距离。

#zongk a:active { color:#00F; text-decoration:none;}

#zongk a:visited { color:#0F0; text-decoration:none;}

这两个第一个定义了点击一瞬间的颜色,第二个定义了已经被访问的超链接的颜色,后面是定义了文本的下划线。

text-decoration定义下划线,background定义背景图片也可以定义背景颜色以及其他样式,background定义的其他样式在后面文章在说。这里background用到了两个切换图片放在了一张图片素材上的方式写法,具体使用方法看:http://www.zongk.com/zongk/2.html 这篇文章

总结,这篇文章主要是讲了在CSS样式中超链接的样式定义其中针对“:link”“a:hover”“a:active”“a:visited ”几个的不同作用与顺序不能弄混了。演示中的素材我就随便做了一下,以及颜色选取,您可以根绝您实际情况来定义颜色,与背景图片素材的制作可以依据您实际需要制作。

自己写的源码下载:

TAGS:超链接

来自Davids zhou博客原创文章请尊重作者:http://www.zongk.com/zongk/4.html转载请标注此链接

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/161750.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 蓝屏stop 0x000000c4_stop蓝屏0x0000005c

    蓝屏stop 0x000000c4_stop蓝屏0x0000005c相信大家今天所用的系统大多是盗版的windows系列,但万幸的是我们勤劳的中华民族是一个智慧的民族!即使创造不出好的操作系统也会将盗版进行到底,最终形成自己的盗版文化!!!有幸成为一名中华民族的一份子,可以畅享盗版文化!!!前天帮人运行数据,期间卡了几次,帮人查资料的时候顺便用了下代理。结果第二天早上开机之后,几分钟内就成了如下图所示:相信…

  • The server does not support version 3.0 of the J2EE Web module specification

    The server does not support version 3.0 of the J2EE Web module specification

  • Linux中top命令_linux tail命令详解

    Linux中top命令_linux tail命令详解原标题:Linux下top命令详解1、简介top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器。top显示系统当前的进程和其他状况,是一个动态显示过程,可以自动或者通过用户按键来不断刷新当前状态。如果在前台执行该命令,它将独占前台,直到用户终止该程序为止.。比较准确的说,top命令提供了实时的对系统处理器的状态监控,显示系统中CPU…

  • phpstorm激活码2021【注册码】

    phpstorm激活码2021【注册码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 2021pycharm 最新激活码(JetBrains全家桶)[通俗易懂]

    (2021pycharm 最新激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~S…

  • gridview属性_datagridview设置列宽

    gridview属性_datagridview设置列宽usingSystem;usingSystem.Collections.Generic;usingSystem.Text;usingSystem.Drawing;usingSystem.Windows.Forms;classSetDataViewGirdStyle{   privatestaticColor_mLinearBeginColor;

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号