`
hideto
  • 浏览: 2656335 次
  • 性别: 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网页样式与布局》光盘源码

     第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 网页样式与布局【PDF】

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

    精通CSS+DIV网页样式与布局视频教材

    第7章 用CSS设置页面和浏览器的元素 7.1 丰富的超链接特效 7.1.1 动态超链接 7.1.2 按钮式超链接 7.1.3 浮雕式超链接 7.2 鼠标特效 7.2.1 CSS控制鼠标箭头 7.2.2 鼠标变幻的超链接 7.3 ...

    精通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.网页样式与布局 源码

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

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

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

    [精通CSS.DIV.网页样式与布局].(前沿科技).扫描版

    设置页面和浏览器的元素 - CSS/DIV布局专题 - 第4课 用CSS制作漂亮的菜单- CSS/DIV布局专题讲解 - 第5课 CSS滤镜的应用 - CSS/DIV布局专题讲解 - 第6课 理解CSS定位与div布局 - CSS/DIV布局专题讲解 - 第7课 CSS...

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

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

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

    第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网页样式与布局PART2

    第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.网页样式与布局

    第7章 用css设置页面和浏览器的元素 第8章 用css制作实用的菜单 第9章 css滤镜的应用 第2部分 css+div美化和布局篇 第10章 理解css定位与div布局 第11章 css+div布局方法剖析 第12章 css+div美化与布局实战 第3部分 ...

    精通CSS.DIV网页样式与布局视频01

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

    CSS Mastery 精通CSS英文版 +源码下载

    之后本书用两章讨论招数、过滤器、bug和bug修复,最后由Simon Collison和Cameron Moll两位杰出的CSS设计人员,将书中讨论的许多技术组合起来,给出了两个实例研究。本书还集中介绍了现实的浏览器问题,是弥补CSS知识...

    精通JavaScript+jQuery Part1

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

    HTML5+CSS3+JavaScript网页设计8.zip

    《精通HTML5 + CSS3+JavaScript网页设计》内容主要包括CSS3的基本语法和概念,设置文字、段落、图片、背景、表格、表单和菜单等网页元素的方法,以及CSS3滤镜的应用。重点介绍如何使用DlV+CSS3进行网页布局,注重...

    《精通Javascript+jQuery》光盘源码

     3.6 CSS设置页面背景  3.6.2 背景图片  3.6.3 背景图的重复  3.6.4 背景样式综合设置  3.7 CSS设置超链接效果  3.8 CSS制作实用菜单  3.8.1 项目列表  3.8.2 无需表格的菜单  第4章 ccCSS进阶  ...

    介绍如何优雅的写css

    * 元素和伪元素 - 此类别包括元素名称和伪元素,比如h1、div、:before和:after。 计算特异性时,从0开始,为style属性添加1000,为每个ID添加100,为每个属性、类或伪类添加10,为每个元素名称或伪元素添加1。 CSS...

    DIV CSS布局浏览器兼容的问题

    刚学css div布局,总会遇到很多浏览器兼容的问题,这个问题困扰了一段时间,只到看了精通css才看到几个解决办法。 1.加clear空div .clearfix:after { content: .; display: block; height: 0; clear: both; ...

Global site tag (gtag.js) - Google Analytics