html 中 超链接的写法,网页超链接样式的CSS写法
上一篇文章讲了母栏目后面两行子栏目的DIV布局,这篇文章讲导航做完之后我想在鼠标移到每个不同区域的超链接在颜色上给予变化。
上图所示上上一篇文章的大概样式,颜色就不一一举例了,我现在现在是给了“男士”“女士”“养生”三个母栏目不同的颜色,为了好看一点,我想鼠标移动到“男士”后面的子栏目上面的颜色和“男士”的字体颜色一样,移到“女士”其后面的子栏目的超链接与“女士”的超链接颜色一样,“养生”同样的。
先来看看网页中定义超链接样式的代码:
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转载请标注此链接
html 中 超链接的写法,网页超链接样式的CSS写法相关推荐
- HTML5网页设计样式-基本CSS选择器
选择器是用来定位CSS样式代码控制的对象,实现各种效果.主要包括基本选择器和复合选择器. 基本CSS选择器 1.标记选择器 每一种HTML标记的名称都可以作为相应的选择器名称,基本格式如下: 标记名称 ...
- html网页鼠标样式、css精灵、iconfont、过渡动画笔记
总结: 插入图片:margin padding float postion width height 背景图片 background控制 background-size 大小 back ...
- 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
本文主要介绍网页超链接的作用以及如何在文本消息中使用网页超链接. 网页超链接的作用 我想但凡是熟悉HTML的朋友,对超链接一定不会陌生.而今天我们要讨论和使用的只是超链接中的其中一种---网页超链接, ...
- [032] 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
本文主要介绍网页超链接的作用以及如何在文本消息中使用网页超链接. 网页超链接的作用 我想但凡是熟悉HTML的朋友,对超链接一定不会陌生.而今天我们要讨论和使用的只是超链接中的其中一种---网页超链接, ...
- 微信文本消息html,微信公众帐号开发教程第8篇-文本消息中使用网页超链接
本文主要介绍网页超链接的作用以及如何在文本消息中使用网页超链接. 网页超链接的作用 我想但凡是熟悉HTML的朋友,对超链接一定不会陌生.而今天我们要讨论和使用的只是超链接中的其中一种---网页超链接, ...
- HTML 的静态网页分页样式
HTML 的静态网页分页样式 page.css代码如下: #page-normal{color:#ff9655;text-align:center;font-size:0px; }#page-norm ...
- css嵌入样式元素,css伪元素怎么用在内嵌样式?
css伪元素可以直接在内嵌样式中使用,使用语法为:<style>选择器:pseudo-element{属性名:属性值;}</style>.然后直接通过选择器即可使用伪元素. 伪 ...
- 如何利用CSS给同一个网页中的超链接设置设置不同的样式?
用css中的类.比如<style type="text/css"> a.topcs:link { font-size: 12px; color: #000000; te ...
- [032] 微信公众帐号开发教程第8篇-文本消息中使用网页超链接(转)
本文主要介绍网页超链接的作用以及怎样在文本消息中使用网页超链接. 网页超链接的作用 我想但凡是熟悉HTML的朋友,对超链接一定不会陌生.而今天我们要讨论和使用的仅仅是超链接中的当中一种---网页超链接 ...
- 包含html语言的超链接标记的网页_HTML是什么?
说起网页技术,今天给大家介绍一个网页开发中的主要技术--HTML.HTML是什么呢?HTML官方定义为超文本标记语言,全称为Hypertext Markup Language.HTML是Web的核心语 ...
最新文章
- 0x42.数据结构进阶 - 树状数组
- 比特币是什么,看这篇就懂了
- 【编程通识】正则表达式
- Spring jdbc的搭建
- This dependency was not found:import ‘element-plus/lib/theme-chalk/index.css‘;
- Boost:简单移动平均线的测试程序
- 谈谈为什么我们需要云原生架构?
- linux判断内存并释放,linux 内存清理/释放命令
- nginx 配置后网站图片加载出来一半或者不出来
- android webview recyclerview,文章详情页的实现——WebView和RecyclerView混合
- opencascade架构_基于OpenCASCADE的CAD平台分析报告
- PHP正则匹配6到16位字符组合(且只能为数字、字母、下划线)
- blender源代码分析----第三方库的说明
- 10/9 直播预告|半只土豆老师来啦
- Stable Diffusion半秒出图;VLIW的前世今生;YOLOv5全面解析教程 | AI系统前沿动态
- psn注册什么服务器,怎么注册PSN港服账号?PSN港服官网注册教程
- keepalived配置文件相关简单解释
- UE4 VR 模式下全屏解决办法
- 马云5年实现“无现金社会”,必须迈过这几道坎?
- 谈悲观、执著、超脱——周国平