`
shiyanwu
  • 浏览: 6114 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

css 的超链接

    博客分类:
  • css
CSS 
阅读更多

#navcontainer a {
    display: block;
    width: 178px;
    height: 22px;
}


以上代码是对导航内a标签的CSS定义,作用于导航中的每个链接元素。display: block将链接对象转换为块级元素,然后再定义其宽和高,使得链接能具有类似按钮一样矩形的触发区域,并且让我们可以利用伪类a:hover来定义鼠标经过链接时的翻转效果,如在第二段代码中展示的简单的改变背景色或背景图片.

a:link, a:visited {
    background: url(images/bg_navbutton.gif);
    color: #5C604D;
    text-decoration: none; //没有下划线
}

a:hover {
    background: url(images/bg_navbutton_over.gif);
    color: #A5003B;
    text-decoration: none;
}

分享到:
评论

相关推荐

    css伪类(超链接)

    css伪类 超链接 连接的用法 描述 link的样式说明

    Css——超链接样式

    在CSS(层叠样式表)中,`<a>`元素用于创建超链接,它能够将文本或图像与其他网页、文件或页面内的位置关联起来。在设计网页时,我们经常需要自定义这些超链接的外观,使其符合整体设计风格。这里我们将深入探讨CSS...

    css控制超链接(css超链接样式)

    通过以上练习,我们可以看到,CSS为我们提供了丰富的工具来定制超链接的外观和交互体验,使得网页设计更加丰富多彩。了解并熟练运用这些技巧,能够帮助开发者创建更具吸引力和用户体验友好的网页。

    CSS字样标记浏览后的超链接

    CSS字样标记浏览后的超链接,不用再烦恼重复浏览看过的连接

    CSS改变超链接属性

    在这个场景中,我们需要使用CSS来改变超链接的属性,从而实现特定的视觉效果和交互体验。 首先,我们要了解超链接的基本结构。在HTML中,`<a>`标签用于创建超链接,其`href`属性定义了链接的目标URL。例如,将...

    js和CSS3鼠标悬停超链接展示图片特效

    【JavaScript与CSS3实现超链接图片特效】 在网页设计中,增强用户体验的一种常见方式是通过交互效果来吸引用户的注意力。本教程将介绍如何利用JavaScript和CSS3技术在鼠标悬停超链接时展示图片特效,为用户提供更为...

    html静态页面源代码 静态网页制作代码【CSS+DIV】

    html静态页面源代码 静态网页制作代码【CSS+DIV】 HTML静态页面(CSS+DIV) 这是期末老师HTML老师...本来要求一个,但我做了三个。 主要是CSS+DIV做的(3个项目)。 对于页面的布局,代码的规格,命名,都很清晰明了。

    css--实验报告.doc

    `#nav`区域利用CSS超链接属性进行导航设计。`#content`对象分为三列,展示不同内容区域,如新闻、公告、福娃介绍等;`#footer`对象则是网页底部的设计。 3. **实验结果与体会** 实验成功实现了网页的整体布局和...

    7款CSS3超链接下划线动画特效代码

    "7款CSS3超链接下划线动画特效代码" 是一个关于CSS3技术在网页设计中的实际应用案例,特别是针对超链接(a标签)的下划线进行美化和动态效果的设计。CSS3是层叠样式表的最新版本,提供了更多的样式控制选项和动态...

    Web前端设计与开发技术-课件-第10章-CSS基础完整.pptx

    10. CSS超链接和设置光标属性:CSS可以设置超链接的样式,包括链接的颜色、背景颜色、文字装饰、hover效果等。也可以设置光标属性,包括cursor、pointer-events等。 11. CSS列表:CSS列表可以设置列表的样式,包括...

    超链接特效

    以下是一些常见的CSS超链接特效示例: 1. 鼠标悬停效果: ```css a { color: #007BFF; text-decoration: none; } a:hover { color: #FF0000; transition: color 0.3s ease; } ``` 这段代码会在鼠标悬停...

    CSS3自定义样式超链接按钮 鼠标滑过带动画特效

    解压密码:RJ4587 超链接和按钮在网页中是最为基本的元素了,我们可以通过设置CSS样式将链接外观做一些简单的调整,比如文本大小、颜色和下划线。今天我们分享的一个基于CSS3的自定义样式超链接按钮,并且鼠标滑过...

    CSS常用样式表快速查询

    CSS超链接样式可以控制超链接的样式。常见的超链接样式包括: * A:link:未被访问的链接样式 * A:visited:已被访问过的链接样式 * A:hover:鼠标悬浮在链接上时的样式 * A:active:鼠标正在按下时链接文字的样式 ...

    7款CSS3鼠标滑过超链接动画特效特效代码

    在本资源中,我们探讨的是如何利用CSS3来创建七种不同的鼠标滑过超链接时的动画特效。这些特效能够极大地提升用户在网页上的交互体验,使得超链接不仅仅是文字,而成为吸引眼球的动态元素。 首先,我们要了解CSS3中...

    css 浮雕式超链接

    利用CSS,我们可以实现各种视觉效果,包括创建浮雕式的超链接,这使得网页元素更具交互性和吸引力。在本主题中,我们将深入探讨如何使用CSS创建浮雕效果的超链接,并分享一些实用技巧。 首先,让我们理解浮雕效果。...

    3-html+css简答题.doc

    :可以使用a标签和hover伪类来设置CSS超链接的样式。 33. 如何设置CSS图片的样式?:可以使用img标签和width、height属性来设置CSS图片的样式。 34. 如何设置CSS表格的样式?:可以使用table标签和border属性来设置...

    jQuery+CSS实现淡入效果的超链接样式

    本文将深入探讨如何使用jQuery和CSS技术来实现超链接的淡入效果,提升用户体验,使得页面交互更加生动有趣。 首先,我们要了解jQuery库。jQuery是一款广泛应用于前端开发的JavaScript库,它简化了JavaScript的DOM...

    css 实验报告.docx

    #nav使用CSS超链接属性实现导航功能。 5. **#content设计**:主要由三列组成,展示不同内容区域,如头片新闻、福娃简介等。 6. **#footer设计**:完成页面底部的设计,提供必要的页脚信息。 **三、实验情况与结果**...

    超链接点击移动至上方以及点击过的css效果设置

    总结来说,通过CSS的伪类选择器,我们可以控制超链接在不同状态下的外观,包括颜色、下划线、字体大小等。同时,结合JavaScript,还可以实现更复杂的交互效果,如点击后滚动页面。在实际开发中,根据项目需求和用户...

    DIV+CSS实例.docx

    【CSS超链接样式】 CSS可以精确控制超链接在不同状态下的样式,如: - `a:link`: 未访问的链接 - `a:visited`: 已访问的链接 - `a:hover`: 鼠标悬停时的链接 - `a:active`: 链接被点击的瞬间 例如,要设置所有链接...

Global site tag (gtag.js) - Google Analytics