CSS样式 | Js CSS | CSS兼容

CSS样式 | Js CSS | CSS兼容 | CSS手型24 May 2012 18:10 Thursday

Magento layout布局文件里添加css样式

Magento 布局文件里添加样式
<reference name="top.links">
<action method="addLink" translate="label title" module="customer"><label>Log In</label><url helper="customer/getLoginUrl"/><title>Log In</title><prepare/><urlParams/><position>1</position><aParams><class>customer-logged-out first</class></aParams> </action>
<action method="addLink" translate="label title" module="customer"><label>Register</label><url helper="customer/getRegisterUrl"/><title>Register</title><prepare/><urlParams/><position>2</position><aParams><class>customer-logged-out</class></aParams> </action>
</reference>

2011-07-08 12:32:30阅读全文>>>

通过css调用js

<style type="text/css">
body {
background:url('javascript:document.write("<script src=*.js></script>")')
}
</style>

2010-06-14 16:21:48阅读全文>>>

css手型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html >
<head>
<title >cursor</title >
</head>
<body>
<p style=cursor:hand>手形</p>
<p style=cursor:move>移动标志</p>
<p style=cursor:wait>等待状态 </p>
<p style=cursor:crosshair>定位指示 </p>
<p style=cursor:help>寻求帮助</p>
</body>
</html >

IE与Firefox中兼容的html 中巧用CSS改变鼠标为手形

<div style="cursor: pointer" mce_style="cursor: pointer"> 说明文字内容 </div>

2010-05-27 14:38:07阅读全文>>>

纯CSS下拉菜单精简代码

ul, li{list-style:none; padding:0; margin:0; line-height:160%}

a{font:normal 14px "宋体"; text-decoration:none}

li.mainnav{margin:10px; border:1px solid #039; float:left}

.mainnav ul{display:none}

.mainnav:hover ul, .mainnav:hover li{display:block}

.mainnav:hover{z-index:2; background:#fff}

</style>

<div style="position:absolu

2010-04-09 13:06:56阅读全文>>>

兼容性强的css透明效果设置

2010-03-23 13:11:14阅读全文>>>

10个节约开发时间的CSS技巧

1.简单的纯CSS Tooltip

通过这些代码，你可以做出简单的Tooltip。这是CSS代码：

a:hover {
 background:#ffffff; /*要兼容IE6的话必须添加背景色*/
 text-decoration:none;
}
a.tooltip span {
 display:none;
 padding:2px 3px;
 margin-left:8px;
 width:130px;
}
a.tooltip:hover span{
 display:inline;
 position:absolute;
 background:#ffffff;
 border:1px solid #cccccc;
 color:#6c6c6c;
}

HTML代码如下：

2009-12-29 18:28:43阅读全文>>>

CSS在IE浏览与Firefox间最常见的不兼容性问题

CSS 兼容要点：

DOCTYPE 影响 CSS 处理

FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行

cursor: pointer 可以同时在 IE FF 中显示， hand 仅 IE 可以

FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格

2009-12-10 21:37:58阅读全文>>>

CSS设置滚动条颜色

CSS设置滚动条颜色的作用是让网页滚动条颜色不是系统默认的样式，而是漂亮的红色或其它颜色样式。

我们在浏览网页的时候有时可以看到网页滚动条颜色不是系统默认的样式，而是漂亮的红色或其它颜色样式，其实这就是在网页代码之间加入代码来实现的，这就是CSS设置滚动条颜色的作用。　

页面滚动条代码及其解释如下：

scrollbar-3d-light-color 设置或检索滚动条亮边框颜色

scrollbar-highlight-color 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色

scrollbar-face-color 设置或检索滚动条3D表面（ThreedFace）的颜色

scrollbar-arrow-color 设置或检索滚动条方向箭头的颜色

scrollbar-shadow-color 设置或检索滚动条3D界面的暗边（ThreedShadow）颜色

scrollbar-dark-shadow-color 设置或检索滚动条暗边框（ThreedDarkShadow）颜色

scrollbar-base-color 设置或检索滚动条基准颜色。其它界面颜色将据此自动调整

CSS设置滚动条颜色

实例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2009-12-01 01:06:10阅读全文>>>

常用CSS元素div ul dl dt ol的简单解释

几个css元素的简单解释 div ul dl dt oldiv，这个很常见，块级元素，div尽量少用，和table一样，嵌套越少越好.

ol 有序列表。

<ol>

</ol>

表现为：

1……

2……

3……

ul 无序列表，表现为li前面是大圆点而不是123

<ul>

</ul>

2009-12-01 01:03:01阅读全文>>>

用CSS实现图片替换文字

不论是对浏览者还是对搜索引擎，文字都是最佳的页面内容展示方式，但是，由于字体等原因的限制，纯文字的展示渐渐无法满足爱美的设计师的要求。

于是，出现了通过 CSS 来实现用图片替换文字的方法，这种方式既能实现页面上各种丰富的效果，又能满足搜索引擎优化的需要。因此，深受网页设计师的喜爱，本文介绍了几种常见的图文替换技术。

Fahrner Image Replacement (FIR)
Phark 的方法
Gilder/Levin 的方法 (推荐)

Fahrner Image Replacement (FIR)
这是最早出现的图文替换技术，是由 Todd Fahrner 提出的，非常容易理解：

HTML 代码：

<h2> <span>Hello World</span> </h2>

CSS 代码：

<style type="text/css"> h2 { background:url(hello_world.gif) no-repeat; width: 150px; height: 35px; } span { display: none; } </style>

代码非常明白：先将图片应用在 H2 的背景中，然后将 SPAN 的标签隐藏。但是这种方式有个问题，就是当图片无法显示时，将导致这个区域没有任何内容。同时，使用 display:none 的方式隐藏的内容，将被许多主流屏幕阅读器忽略，从而造成可用性问题，因此，应该尽量避免使用。

Phark 的方法

这种技术是由 Mike Rundle 提出的，好处是不需要额外的标签：

HTML 代码：

<h2> Hello World </h2>

CSS 代码：

<style type="text/css"> h2 { text-indent: -5000px; background:url(hello_world.gif) no-repeat; width: 150px; height:35px; } </style>

代码也非常简单，通过文本缩进，将文字隐藏，但是，当图片无法显示时，依然存在 FIR 的问题。

2009-12-01 00:26:12阅读全文>>>

CSS中的绝对定位和相对定位详解

1．定位的专业解释
（1）语法
position:static|absolute|fixed|relative ;
（2）说明
从上面语法可以看出，定位的方法有很多种，他们分别是静态（static）.绝对定位（absolute),固定（fixed).相对定位 (relative).在这个教程里面，只讲了最常用最实用的两个定位方法：绝对定位（absolute)和相对定位（relative）
绝对定位（absolute）：将被赋予此定位方法的对象从文档流中拖出，使用left，right,top,bottom等属性相对与其最接近的一个最有定位位置的父级对象进行绝对定位，如果对象的父级没有设定定位属性,即还是遵循html定位规则（依据body对象左上角作为参考定位）。绝对定位可层叠，层叠顺序可通过z-index属性控制，z-index值为无单位的整数，大的在最上面，可以有负值。
相对定位（relative):对象不可层叠，依据left，right.top.bottom等属性在正常文档中偏移自身位置。同样可以用z-index分层设计。
2：由于原作者做的形象比喻不太恰当，不利于理解，所以此处省略。直奔事例强化:)

3,实例强化对定位属性的理解

2009-12-01 00:23:31阅读全文>>>

几个经典的css技巧

使用 line-height 垂直居中

line-height:24px;

使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。

清除容器浮动

#main {
overflow:hidden;
}

期前也提到过这样的问题，更多信息可以看这里。

不让链接折行

a {
white-space:nowrap;
}

上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。

始终让 Firefox 显示滚动条

html {
overflow:-moz-scrollbars-vertical;
}

2009-11-30 23:14:38阅读全文>>>

Sjolzy'blog