`
hideto
  • 浏览: 2677904 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

精通CSS+DIV:用CSS设置页面和浏览器的元素

    博客分类:
  • CSS
阅读更多
一、超链接
1,动态超链接
a:link {
  color: #005799;
  text-decoration: none;
}
a:visited {
  color: #000000;
  text-decoration: none;
}
a:hover {
  color: #FFFF00;
  text0decoration: underline;
}

2,按钮式超链接
a:link, a:visited {
  color: #A62020;
  padding: 4px 10px 4px 10px;
  background-color: #ecd8db;
  text-decoration: none;
  border-top: 1px solid #EEEEEE;
  border-left: 1px solid #EEEEEE;
  border-bottom: 1px solid #717171;
  border-right: 1px solid #717171;
}

a:hover {
  color: #821818;
  padding: 5px 8px 3px 12px;
  background-color: #e2c4c9;
  border-top: 1px solid #717171;
  border-left: 1px solid #717171;
  border-bottom: 1px solid #EEEEEE;
  border-right: 1px solid #EEEEEE;
}

3,浮雕式超链接
table.links {
  background:url(button1_bg.jpg) repeat-x;
  font-size: 12px;
  width: 100%;
}
a {
  width: 80px;
  height: 32px;
  text-decoration: none;
  text-align: center;
  background:url(button1.jpg) no-repeat;
}
a:link, a:visited { color: #654300; }
a:hover {
  color: #FFFFFF;
  text-decoration: none;
  background:url(button2.jpg) no-repeat;
}

FireFox下显示效果不是很理想,因为FireFox不支持直接设置a标签的高度和宽度,可以采用ul和li
二、鼠标
1,鼠标箭头
body {
  cursor: pointer;
}
auto
crosshair
default
e-resize
ne-resize
n-resize
w-resize
nw-resize
se-resize
s-resize
sw-resize
col-resize
row-resize
help
move
all-scroll
no-drop
progress
vertical-text
text
wait
hand
not-allowed

2,鼠标变幻的超链接
a.help:hover {
  cursor: help;
}

三、页面滚动条
body {
  scrollbar-base-color: #FF0000;
  scrollbar-3dlight-color: #B0C4DE;
  scrollbar-highlight-color: #FFFFFF;
  scrollbar-shadow-color: #5380BA;
  scrollbar-darkshadow-color: #1D4272;
  scrollbar-arrow-color: #34547E;
  scrollbar-face-color: #CFDFF4;
}

该效果仅支持IE
分享到:
评论

相关推荐

    精通CSS+DIV 书中实例和源代码

    《精通CSS+DIV》是一本深入探讨网页样式与布局技术的专业书籍,其核心内容围绕着如何利用CSS(层叠样式表)和DIV(定义文档结构的HTML元素)来实现高效、美观的网页设计。这本书提供了5个完整的网站设计案例,通过...

    《精通CSS+DIV网页样式与布局》光盘源码

     第7章 用CSS设置页面和浏览器的元素   7.1 丰富的超链接特效  7.2 鼠标特效  7.3 页面滚动条   第8章 用CSS制作实用的菜单   8.1 项目列表   8.2 无需表格的菜单   8.3 菜单的横竖转换   ...

    精通css+div网页样式与布局

    《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript...

    精通CSS+DIV配盘

    **精通CSS+DIV布局**是Web前端开发中的关键技能,CSS(层叠样式表)与HTML的DIV元素结合,能够实现复杂且响应式的网页设计。本资料包包含一系列关于这个主题的学习资源,对于想要深入理解并掌握这一技术的开发者来说...

    精通CSS+DIV 网页样式与布局【PDF】

    《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript,Ajax,...

    精通css+div书中实例

    《精通CSS+Div》是一本深入探讨网页设计技术的专业书籍,尤其关注如何使用CSS(层叠样式表)和Div(布局容器)来构建美观、高效且响应式的网站。CSS是网页设计的核心,它允许我们将样式与内容分离,使得网页的布局和...

    精通CSS+DIV样式和布局源码

    "精通CSS+DIV样式和布局源码"是一份专为初学者设计的学习资源,旨在帮助他们理解和掌握如何使用CSS和HTML的DIV元素来创建美观且响应式的网页布局。 1. **CSS基础知识**:CSS是一种样式表语言,用于定义HTML或XML...

    精通CSS+DIV网页样式与布局源代码

    本资源"精通CSS+DIV网页样式与布局源代码"提供了深入理解和掌握这两种技术的宝贵资料,旨在帮助开发者实现优雅、灵活且响应式的网页设计。 CSS是一种样式表语言,用于描述HTML或XML(包括SVG、MathML等各种XML方言...

    精通CSS+DIV网页布局

    总之,《精通CSS+DIV网页布局》这本书旨在帮助读者全面掌握使用CSS和DIV进行网页布局的方法,通过书中实例的实践,可以提升读者在网页设计领域的专业技能。无论是初学者还是有经验的开发者,都能从中受益,进一步...

    精通CSS+DIV网页样式与布局8-9章实例

    在“精通CSS+DIV网页样式与布局8-9章实例”这个主题中,我们主要探讨的是Web页面设计的核心技术——CSS(层叠样式表)和HTML中的DIV元素,以及它们如何协同工作以实现精致的页面布局。这两章内容通常会涵盖一系列...

    精通CSS+DIV光盘程序

    【精通CSS+DIV光盘程序】是一套针对网页布局与设计的专业学习资源,主要目标是帮助用户深入理解和熟练掌握CSS(层叠样式表)和DIV(分区块元素)技术。CSS与HTML结合使用,能够实现网页的精确布局、美观设计以及高效...

    精通CSS+DIV网页样式与布局全集

    第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4 如何编辑CSS 1.1.5 浏览器与CSS 1.2 使用CSS控制页面 1.2.1 行内样式 ...

    精通CSS+DIV网页样式与布局[书中实例]

    在深入探讨《精通CSS+DIV网页样式与布局》一书中的实例之前,首先需要理解CSS(层叠样式表)和DIV(分部元素)在网页设计中的重要性。CSS是用于控制网页外观和布局的样式语言,而DIV则是一种HTML元素,常用于组织和...

    《精通CSS+DIV网页样式与布局》书中实例

    《精通CSS+DIV网页样式与布局》是一本深入解析CSS(层叠样式表)和DIV(定义文档结构的HTML元素)技术的专业书籍。在网页设计领域,CSS+DIV是实现网页美化、布局和响应式设计的关键工具。这本书的实例部分涵盖了从...

    精通CSS+DIV网页样式与布局完整版.

    学习“精通CSS+DIV网页样式与布局”,你将掌握创建现代网页所需的技能,包括跨浏览器兼容性处理、优化性能的方法,以及如何利用最新的CSS规范如Grid和Flexbox实现更先进的布局。此外,你还将了解到如何利用CSS预...

    精通CSS+DIV样式和布局源码.rar

    《精通CSS+DIV样式和布局源码》是一个深入学习网页设计与开发的资源包,它包含了一系列关于CSS(层叠样式表)和DIV(division,分部)技术的实例,旨在帮助用户提升在网页布局和样式设计上的技能。在这个压缩包中,...

    精通css+div页面样式与布局

    总之,“精通css+div页面样式与布局”不仅涵盖了CSS的基本概念和技术,还强调了实际应用和问题解决能力的培养。通过深入学习,新手将能够独立设计出符合现代标准、用户体验优秀的网页。在压缩包文件“DIV+CSS完美...

    精通CSS+DIV源码 第十章

    在本章“精通CSS+DIV源码”中,我们将深入探讨使用CSS(层叠样式表)和HTML的DIV元素来构建高效、响应式且可维护的网页布局的关键概念和技术。CSS与HTML的结合,尤其是利用DIV元素,已经成为现代网页设计的标准实践...

Global site tag (gtag.js) - Google Analytics