一月 5th, 2010

css页面居中对齐方法汇总

No Comments, 前端开发, by admin.

css页面居中

一、我们常用的margin:0 auto;方法(这也是作者我本人常用的页面居中方法，方便)

这个方法是大家用的最多的方法，使用的时候必须为容器制定宽度！

例子：

#main {width:960px;margin:0 auto;}

这个在大部分浏览器里面都可以很好的实现效果。
但是在IE6之前的版本中却不被支持（IE6以前的版本，我们可以忽略，否则我要求拿双份工资！）

二、用text-align实现居中，这个方法其实算是一个hack

这个方法把整个页面当作文本对待，把body的属性设置为{text-align:center;}
这样的话页面所有内容全部居中了，还需要把页面总的外框（wrap）属性{text-align:left;}
这样的话页面就居中了！

代码：

body{text-align:center;}
wrap {text-align:left;}

三、负的外边距

负外边距需要和绝对定位同时使用，才会生效。首先需要一个{wrap}来包裹所有的页面内容，并将其定位到页面的50%。这样{warp}容器据浏览器左边50%的距离，然后再用负边距，将容器左边距设置为{wrap}宽度的一半即可。

看代码：

#wrap {width:800px;position:absolute;left:50%;margin:0 0 0 -400px;}

这样wrap就居中对齐了，这个方法基本上可以兼容所有的浏览器了。

小结

第一种方法是我们大家首选的解决方案，本人使用至今没有出过差错。

第二种方法其实可以和第一种方法结合起来用更好，不过你懒的话也无所谓啦。

第三种方法是是可以兼容所有的浏览器，如果你对你的也页面兼容性要求的高些，这个也可以作为你的首选！

一月 5th, 2010

最著名的clear方案

No Comments, 前端开发, by admin.

这是一个怎么样的方案？

这个clear方案要求使用一个容器(例如div)将嵌套在其中的浮动内容封装起来，而这在平常是不需要的，这种方法使用CSS的:after伪元素在容器中其他内容之后插入一个隐藏的非浮动内容(零高度的句点)，而且，一样的代码也适用于清除非浮动的内容，但容器必须把内容封装起来。

下面就是这种方法的代码。

.clearfix:after{
content:”.”;
display:block;
height:0px;
clear:both;
visibility:hidden;
}

.clearfix{display:inline-table;}
/*反斜杠hack，用于在IE(Mac)中隐藏CSS规则\*/
*html .clearfix{height:1%;}
.clearfix{display:block;}
/*反斜杠hack结束*/

把这些代码添加到样式表的末尾，就可以使它们对页面起作用，然后，在需要通过容器封装浮动内容的情况下，请为该容器元素添加clearfix类，比如:

然后，容器元素会立即封装其中的任何浮动内容。

代表性的应用

一、

强制页脚位于浮动的分栏下方，通过为包含分栏的封装dlv添加clearfix类，可以使该容器始终在垂直方向上封装所有分栏，无论这些分栏最终会有多长。

这样，在标记中位于谊容器diV结束标签之后的元素(例如页脚)，总会位于最长的分栏下方。

二、

为多个浮动元素的四周添加边框。将浮动的元素封装在一个div中，并为该div添加clearfix类，使其能够封装浮动的元素。然后，就可以为这个包含元素设计边框。

这只是在需要它们之前不知道它们为什么存在的诸多方法中的一种。不过，总有一天，你会知
道，而且。这种方法可以避免向标记中添加过多的div，同时也简单易用。

需要注意的是，在IE6中这种方法会导致包含浮动元素的div不能正确地起到封装作用。不过，这也正是鳖于符合标准的浏览器开发并在后来的IE中测试的另一个原因。

Tags: CSS

一月 5th, 2010

CSS缩写样式总结

No Comments, 前端开发, by admin.

CSS缩写样式

在根据web标准设计网页时，必不可少的写入大量的css声明，时间一长，代码阅读显得冗长复杂，同时CSS代码的字节数也在增加……这对于追求高效率和完美性的人来说，是很难容忍的。

使用css缩写样式可以帮助减少你CSS文件的大小，更加容易阅读，以下做了几乎常用的属性缩写样式，希望对您有所帮助

颜色

16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;

内、外边距

语法规则：

property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针，上右下左，具体的例子如下：

margin:1em 0 2em 0.5em;

边框

边框的属性如下：

border-width:1px;
border-style:solid;
border-color:#000;

缩写语法：border:width style color;

上例缩写为一句：border:1px solid #000;

背景(Backgrounds)

背景的属性如下：

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

缩写语法：background:color image repeat attachment position;

上例缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%

字体

字体的属性：

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:”Lucida Grande”,sans-serif;

缩写为一句：font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;

注意：如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表

列表的属性：

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

缩写为一句：list-style:square inside url(image.gif);

Tags: CSS

一月 5th, 2010

JS怎么根据分辨率的不同决定CSS样式？

No Comments, 前端开发, by admin.

答：

复制以下代码查看效果：

<!–

if (window.navigator.userAgent.indexOf(“MSIE”)>=1)

{

var IE1024=”";

var IE800=”";

var IE1152=”";

var IEother=”";

ScreenWidth(IE1024,IE800,IE1152,IEother)

}else{

if (window.navigator.userAgent.indexOf(“Firefox”)>=1)

{

file://如果浏览器为Firefox

var Firefox1024=”";

var Firefox800=”";

var Firefox1152=”";

var Firefoxother=”";

ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)

}else{

file://如果浏览器为其他

var Other1024=”";

var Other800=”";

var Other1152=”";

var Otherother=”";

ScreenWidth(Other1024,Other800,Other1152,Otherother)

}

function ScreenWidth(CSS1,CSS2,CSS3,CSS4){

if ((screen.width == 1024) && (screen.height == 768)){

setActiveStyleSheet(CSS1);

}else{

if ((screen.width == 800) && (screen.height == 600)){

setActiveStyleSheet(CSS2);

}else{

if ((screen.width == 1152) && (screen.height == 864)){

setActiveStyleSheet(CSS3);

}else{

setActiveStyleSheet(CSS4);

}}}

}

function setActiveStyleSheet(title){

document.getElementsByTagName(“link”)[0].href=”style/”+title;

}

file://–>

</SCRIPT>

这里我来解释下代码的意思：

var IE1024=”";

var IE800=”";

var IE1152=”";

var IEother=”";

引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。

var Firefox1024=”";

var Firefox800=”";

var Firefox1152=”";

var Firefoxother=”";

引号里面分别填写，用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。

var Other1024=”";

var Other800=”";

var Other1152=”";

var Otherother=”";

引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名。

一月 5th, 2010

常用三种css代码注释的方法

No Comments, 前端开发, by admin.

以下介绍css代码注释的三种常用方法，合理的利用css代码注释功能，不仅仅提高代码的可读性，必将增加你的工作效率！这是通过长年的经验得出的结果。不要怕麻烦这一点点时间觉得不重要，否则可能你会花更多的时间浪费在寻找css选择器，寻找模块化css。

1、选择器（child selector）
如果你想在IE中隐藏一个CSS定义，可以使用子选择器。

css部分：

html>body p {
/* declarations */
}

2、“通配符”(*)
这种写法只有IE浏览器可以理解（对其他浏览器都隐藏）

css部分：

* html p {
/* declarations */
}

3、“反斜线”(\)
如果你希望IE/Win有效而IE/Mac隐藏，可以使用“反斜线”技巧。

css部分：

/* \*/
* html p {
declarations
}
/* */

Tags: CSS

CSSWEBSITE

一月 5th, 2010