Two Man - CSS代码

一段CSS控制文字禁止选择、复制代码惹得祸

abcily@126.com (Arain) — Mon, 09 Aug 2010 16:22:13 +0800

CSS控制文字禁止选择、复制这样行吗？也许很多朋友不曾用过，当然我曾经也没有接触过这个玩意儿，总觉得这东西部够实在。网站做出来就是跟大家分享的，何必搞得像国家机密一样把版权搞得这么严重呢？而且很多时候像这些东西都是JS来控制的，基本可以搞定IE就不错了，想看你网页上的东西还是有很多办法的，这样的小CASE就防防菜鸟盗版罢了。

不过没办法，项目需要这些玩意儿，我们还得加上，再加上最近做银行的玩意儿，说起来算是需要安全性较好，这样的细节也得搭上。

废话说了一大篇，我们就来看看这段让我郁闷半个钟的CSS代码吧。这是一段可以控制网页上文字禁止选择和复制的CSS代码，兼容火狐和IE。听上去很牛X，看看代码

body{
-moz-user-select:none;
hutia:expression(this.onselectstart=function(){return(false)});
}

加上之后一切正常，且火狐“IE”都达到了文字禁止选择和复制的效果，IE打了个引号，那就是我使用的是IE7，而真正让人郁闷的问题是IE6，由于这段牛X的代码让IE6彻底崩溃，占领90%++的CPU。

由于我一般是用CSS给页面布局好后不会没个动作测试浏览器兼容，再加上最近很少用原版JS，都用Jquery在做事，就没实时去测试IE6等浏览器兼容了，叫项目到服务器（IE6浏览器）后，测试，发现崩溃... 一时迷茫中，使浏览器占领CPU90%++，首先想到的是JS问题，猛检查，汗到底无果...... 郁闷许久后，不得不通过回忆想象写代码的过程和查看SourceSafe中的历史记录，最终发现这段邪恶的代码。

最后奉劝大家，用到新玩意儿还是先检测一下，再利用，不然会伤很多脑细胞，搞不好会被鄙视... 这段邪恶的CSS控制文字禁止选择、复制代码大家也别用了，老老实实用JS控制吧，虽然这样控制不了

浅谈CSS hack

abcily@126.com (Arain) — Fri, 10 Oct 2008 12:40:54 +0800

什么是CSS hack？网页设计者在开始迷茫的问题？当在不同的浏览器看到自己做出来的网页长不同样子的时候更加会感觉这个问题的严重性？下面就介绍以下CSS hack.

由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果

。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。

CSS Hack的原理是什么

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

比如 IE6能识别下划线_和星号*，IE7能识别星号*，但不能识别下划线_，而firefox两个都不能认识。等等

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。

如何写CSS Hack

比如要分辨IE6和firefox两种浏览器，可以这样写：

程序代码

1.
7.

我在IE6中看到是红色的，在firefox中看到是绿色的。

解释一下：
上面的css在firefox中，它是认识不了后面的那个带星号*的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是

绿色的。
在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div

的背景颜色就是红色的了。

CSS hack:区分IE6，IE7，firefox
区别不同浏览器，CSS hack写法：

区别IE6与FF：
background:orange;*background:blue;

区别IE6与IE7：
background:green !important;background:blue;

区别IE7与FF：
background:orange; *background:green;

区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

                 IE6     IE7     FF
*               √     √     ×
!important      ×     √     √

另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

关于CSS HACK总结一下。

1, !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.
(注意写法.记得该声明位置需要提前.)

程序代码

2, IE6/IE77对FireFox
1.
*+html 与 *html 是IE特有的标签, firefox 暂不支持.
而*+html 又为 IE7特有标签.

程序代码

注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明,

程序代码

http://www.w3.org/TR/html4/loose.dtd">

2.
表达方式：+property:value
测试环境：IE5，IE6 ，IE7，FF1.5，FF2.0，Opera 9，Safari 2
测试结果：
IE5，IE6 ，IE7浏览器识别；
FF2.0，Opera 9，Safari 2浏览器不识别。

结论：我们可以用"+"来实现只有IE识别的CSS Hack。

比如我们要实现在IE中500px的宽度，而在其他浏览器480px的宽度，就可以通过"+" Hack来完成，如下：

程序代码

#hack {
width:500px;
+width:480px;
}

3.
用于内联css

程序代码

height:20px;
*height:25px;
_height:20px;

程序代码

#example { color: #333; }
* html #example { color: #666; }
*+html #example { color: #999; }

3,IE7的hack

IE7 修复了很多 bug，也增加了对一些选择符的支持，所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用

，条件注释才是万无一失的过滤器，但是条件注释只能出现在 HTML 中， CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack，具体就是：
程序代码

>body
html*
*+html

这三种写法，其中前两种都是不合法的 CSS 写法，在标准兼容浏览器中被被忽略，但是 IE7 却不这么认为。对于 >body ，它会将缺失的选择符用全局选择符 * 代替，也就是将

其处理成了 *>body，而且不光对于 > 选择符，+,~ 选择符中这个现象也存在。对于 html* ，由于 html 和 * 之间没有空格，所以也是一种 CSS 语法错误，但 IE7 不会忽略，

而是错误地认为这里有一个空格。对于第三种 *+html，IE7 认为 html 前面的 DTD 声明也是一个元素，所以 html 会被选中，这三种方法中只有这一种方法是合法的 CSS 写法

，也就是说可以通过校验器的验证，因此也是作者推荐的 hack 用法。

程序代码

IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>body {} to select the body element

4,区别IE的版本

程序代码

注意
1.条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
2.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
3. 条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。我很想把所有特殊的样式放在logo.css 里。但是很不幸的是，这看起来不

太可能。我也试过根据条件注释，使用来导入一个额外的样式表，但是因为我只需要一个额外的样式规则，这样会让事情变得复杂很多。当然如果你需要在IE里使用很多的额外

的样式，那么使用或许是一个好的方法。

就象这样：

程序代码

For Non-IE：
在注释中嵌套注释，这样首尾还原为两个注释，所以非IE浏览器可以显示中间的内容；而IE识别到“!IE”，所以将整个语句当成否定条件判断而不显示中间的内容。利用这样的用法

即可在非IE中应用 Conditional Comments，酷！

程序代码

COOL!!! Non-IE
IE6 or Non-IE

说明：

gt: greater than，选择条件版本以上版本，不包含条件版本
lt: less than，选择条件版本以下版本，不包含条件版本
gte: greater than or equal，选择条件版本以上版本，包含条件版本
lte : less than or equal，选择条件版本以下版本，包含条件版本
!: everything except what directly follows the "!"(选择条件版本以外所有版本，无论高低)

碰到问题的朋友不要紧张。问题慢慢会解决的啊。多搜索一下就可以啦啊。

区别IE6.IE7.FireFox的几种CSS HACK写法

abcily@126.com (Arain) — Fri, 10 Oct 2008 10:40:45 +0800

区别IE6.IE7.FireFox的几种CSS HACK写法,下面是找到的集中CSS HACK的几种写法,经过测试,非常有效.呵呵.

区别IE6与FF：

background:orange;*background:blue;

区别IE6与IE7：

background:green !important;background:blue;

区别IE7与FF：

background:orange; *background:green;

区别FF，IE7，IE6：

background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,

IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

	IE6	IE7	FF
*	√	√	×
!important	×	√	√

另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。这个规则对HACK的定义更有帮助

再写CSS控制未知高度DIV垂直居中

abcily@126.com (Arain) — Fri, 26 Sep 2008 14:47:52 +0800

在CSS代码里面我曾经写过一篇文章CSS控制未知高度网页垂直居中 ,在这里介绍了一种让未知高度的DIV在浏览器中垂直居中. 而这个方法在达到这个目的的同时出现了一个问题.那就是当浏览器窗口缩小后我们会发现有一部分主体内容看不到了。如下图:

这是浏览器打开的时候

当浏览器缩小的时候就会变成这样子

经过今天一翻改进,终于找出了解决DIV垂直居中的办法,下图为最后效果图.

实现代码.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS控制未知高度网页垂直居中</title> <style type="text/css"> html, body { height: 100%; padding:0; margin:0; } body { min-height: 200px; text-align: center; min-width: 402px } .FirstDIV { margin-top: -100px; /* SecondDIV高度的一半 */ float: left; width: 100%; height: 50%; } .SecondDIV { clear: both; border: silver 1px solid; background: #666; margin-left: auto; overflow: auto; width: 400px; margin-right: auto; height: 200px; text-align: left } </style> </head> <body> <div class="FirstDIV"></div> <div class="SecondDIV"> <p>看看，这不就居中了。呵呵。而且没有问题哦。呵呵 </p> <p>body{ background-color:#FFF5F0}<br> div{ position:absolute; top:50%; left:50%; margin:-100px 0 0 -200px; width:400px; height:200px; border:1px #CCCC00 solid; font-family:Arial, Helvetica, sans-serif; color:#666666 } </p> </div> </body> </html>

IE的if条件注释Hack

abcily@126.com (Arain) — Fri, 26 Sep 2008 11:16:41 +0800

IE Hack,写CSS经常遇到的问题. 而在if IE起着非常大的作用.if ie什么意思呢. 下面就列举了一些在CSS常见的HACK控制语句吧.

除IE外都可识别

CSS三栏布局-固定自适应

abcily@126.com (Arain) — Mon, 22 Sep 2008 10:32:28 +0800

CSS三栏布局-固定自适应,所谓固定自适应是利用CSS中的min-width和max-width来控制CSS的宽度,来达到自适应的三栏布局效果.
方法一如下:
1.根据浏览器字体设置自动适应
2.固定宽度自适应浏览器
你也可以指定min-width:来控制最小宽度,以保证页面不会太小
下面是代码文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3列布局-http://www.blog-design.cn/</title>
<style type="text/css">
<!--
body{font-size:70%;font-family: Arial,sans-serif;line-height: 1.166;margin:0; padding:0; text-align:center;}
#wrapper{width:75em; max-width:90%; border:1px #ccc solid;text-align:left; margin:0 auto;}
#header{height:2em; background:#336699;}
#oneNav{width:15em; max-width:19%;float:left; background:#CCCC00;height:20em;}
#content{width:58em; max-width:78.3%;float:right;background:#efefef;}
#content #mainContent{width:41em; max-width:70%;float:left; background:#66CC33;height:20em;}
#content #twoNav{width:15em; max-width:27%;float:right;background:#99CC99;height:20em;}
#footer{clear:both;height:2em; background:#993300;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">#header</div>
<div id="oneNav">#oneNav</div>
<div id="content">
<div id="mainContent">
#mainContent<br/>
1.根据浏览器字体设置自动适应<br/>
2.固定宽度自适应浏览器<br/>
你也可以指定min-width:来控制最小宽度,以保证页面不会太小
</div>
<div id="twoNav">#twoNav</div>
</div>
<div id="footer">#footer</div>
</div>
</body>
</html>

控制网页满屏显示最简单的方法

abcily@126.com (Arain) — Mon, 07 Jul 2008 09:27:09 +0800

Css控制网页满屏显示?在做一些内容比较少的网页时,通常会用到一个满屏效果来使网页铺满屏幕,但现在的显示器很多样话,支持的分辨率也有所不同,那怎么才能使得网页的高宽都100%显示呢?

Css控制网页满屏显示,百度一下可以找到很多方法,想用SCRIPT实现,用DIV的浮动属性,这都得写大把的代码来实现.可以是用过Dreamweaver2004的朋友应该会知道在这里面可以用表格的宽度和高度100%来实现它,同时CSS也可以控制100%.但从Dreamweaver2005以后高级的CSS编写工具中达不到这一效果.

罗嗦这么多,转入正题.在用工具建HTML页面时你会发现新建的HTML页面第一行的DTD调用,Dreamweaver2005以后的工具生成的是这个DTD http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,而2004生成的是这个DTD.

最后问题的答案就是:在这个DTD下可以实现宽度100%的设置,而http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">不行,大家可以自己试试.呵呵.至于为什么会这样?要去问W3C.

PS:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 是W3C推出的可扩展超文本标记语言,xhtml1.0的一种标准,引用他代表底下的代码是按它的标准编写.

是xhtml的前一个版本,为超文本标记语言的最后版本,呵呵.后面都用可扩展了。所以用它后,会有一些CSS属性失效.请甚用.呵呵.

CSS控制未知高度网页垂直居中

abcily@126.com (Arain) — Mon, 02 Jun 2008 16:41:24 +0800

网页垂直居中，水平居中的问题相对很多网页设计者都碰到过。对于一个未知高度和宽度的网页来说，要网页居中对齐，确实是一个棘手的问题，特别在IE7.0和Firefox里面。
以前用CSS弄了些水平居中的网页，很简单，在这个DTD下，只要将DIV赋予一个margin:auto;的样式就可以居中了。但垂直问题，以前没有去注重它，知道今天用到才想到解决的方案。成功后拿出来跟大家分享下，看下面的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS控制未知高度网页垂直居中</title> <style type="text/css"> body{ background-color:#FFF5F0} div{ position:absolute; top:50%; /*上边50%，为了达到垂直居中的效果*/ left:50%; /*左边50%，为了达到水平居中的效果*/ margin:-100px 0 0 -200px; /* 上下高度为整个高度的1/2 */ width:400px; height:200px; border:1px #CCCC00 solid; font-family:Arial, Helvetica, sans-serif; color:#666666 } </style> </head> <body> <div> <p>看看，这不就居中了。呵呵。 </p> <p>body{ background-color:#FFF5F0}<br> div{ position:absolute; top:50%; left:50%; margin:-100px 0 0 -200px; width:400px; height:200px; border:1px #CCCC00 solid; font-family:Arial, Helvetica, sans-serif; color:#666666 } </p> </div> </body> </html>

csshoues 用CSS+DIV建造的房屋

abcily@126.com (Arain) — Wed, 28 May 2008 15:53:01 +0800

csshouse？在网上看到一个牛人用CSS+DIV构造了一个房子（如下图），真的太牛了。可以看下原代码，所有都是只用到CSS+DIV。从头到尾没有用过一张图片，最后还说一个字：牛.

有趣的CSS.观看网址http://www.designdetector.com/demos/css-house-2.html

div+css命名规则-增强SEO(转)

abcily@126.com (Arain) — Thu, 10 Apr 2008 21:46:42 +0800

页头：header
登录条：loginBar
标志：logo
侧栏：sideBar
广告：banner
导航：nav
子导航：subNav
菜单：menu
子菜单：subMenu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendLink
页脚：footer
版权：copyRight

1.CSS ID 的命名
外　套：　　wrap
主导航：　　mainNav
子导航：　　subnav
页　脚：　　footer
整个页面：　content
页　眉：　　header
页　脚：　　footer
商　标：　　label
标　题：　　title
主导航：　　mainNav（globalNav）
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsideBar
右导航：　　rightsideBar
旗　志：　　logo
标　语：　　banner
菜单内容1： menu1Content
菜单容量：　menuContainer
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadCrumb(即页面所处位置导航提示）
容器：　　　container
内容：　　　content
搜索：　　　search
登陆：　　　login
功能区：　　shop(如购物车，收银台)
当前的　　　current

2.另外在编辑样式表时可用的注释可这样写：
<– Footer –>
内容区
<– End Footer –>

3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css