<![CDATA[CSS Web Design 我爱CSS]]> http://www.52css.com/ zh-cn PBlog2 v2.4 CSS Web Design 我爱CSS http://www.52css.com/images/logos.gif http://www.52css.com/ CSS Web Design 我爱CSS http://www.52css.com/default.asp?id=783 <![CDATA[搜狐新版CSS布局分析 - loginNav和mainNav]]> MrJin@52css.com(52css) Fri,04 Jul 2008 01:12:30 +0800 http://www.52css.com/default.asp?id=783 　　在前面的文章中，我们分析了搜狐（sohu.com）首页的总体CSS布局情况。现在开始深入分析各模块的布局情况，loginNav顶部登录区和mainNav主导航区位于最上部，从这两个区域开始。这两个区域的主容器是两个DIV，id分别是loginNav和mainNav。赋予它们宽度950px，用margin实现居中对齐即可。这两个容器在页面中的位置如图所示：（可点击图片放大查看）



　　loginNav由三个区域组成。分别是loginPP通行通登录、setIndex设为首页、navRight右侧链接条。设置loginPP和setIndex向左浮动。而navRight向左浮动。实现容器的横向排列。在设置中注意外边距的控制，以及需要避免IE6的双倍边距的BUG，关于IE6双倍边距，您可以参考这里：http://www.52css.com/article.asp?id=144。最终实现这样的效果。

　　mainNav由两大区域组成。分别是sohuLogo搜狐LOGO和navList导航列表构成。而navList设置了三组ul列表，上下共三行列出来导航链接。这样操作比较方便。如果读者的网站导航较少，完全可以合并为一个ul进行编写。sohuLogo和navList均向左浮动，实现容器的横向排列。

　　loginNav和mainNav在页面中的位置及浮动关系如图如示：（可点击图片放大查看）



　　细心的读者或许弄不清各层的嵌套关系。我们要以看下面的图片，您将能一目了然的理解它们的编码。
　　本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！


　　在编码中我们特别注意到clear层的存在，此层是为了清除浮动。在firefox浏览器的，不清除浮动可能会带来混乱，破坏页面CSS布局。关于浮动与清除浮动的相关知识，您可以参考下面的文章：
　　闭合浮动元素（clearing float）的简单方法
　　http://www.52css.com/article.asp?id=132
　　CSS中Float（浮动）相关文摘
　　http://www.52css.com/article.asp?id=534
　　CSS浮动float属性详解
　　http://www.52css.com/article.asp?id=576
　　CSS浮动布局基础
　　http://www.52css.com/article.asp?id=556

　　在下面的教程中，我们会继续深入分析细部的CSS布局情况，敬请关注52CSS.com教程更新！
　　
　　本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！

　　]]> http://www.52css.com/default.asp?id=781 <![CDATA[搜狐新版CSS布局分析 - 布局篇Layout]]> MrJin@52css.com(52css) Wed,02 Jul 2008 17:15:42 +0800 http://www.52css.com/default.asp?id=781 　　2008年7月1日。搜狐（sohu.com）新版网站上线了。首页的风格设置的大方得体，具有门户风范。在CSS网页布局方面，也实现的比较理想。
　　本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！

　　将首页页面分为了13个单列的容器，将网站内容分别置入于这13个容器中，但是容器之间的边距间隔，作者使用了div进行通用类的定义。不清楚是何用意，本人建议可以使用外边距来解决问题。52CSS.com一直强调一个原则，不必为了表现给HTML增加额外的编码，而且此处用外边距完全可以解决问题，不涉及到BUG。


　　这13个容器至上而下，是典型的单列式布局的特点。虽然在容器内部存在着多列的内容，但在有了总体轮廓与布局后，再详细的深入。我们对照原页面，进行区间划分，得到了下面的图片：（图片体积500K，宽度1260px，请注意你的带宽。可点击放大查看或右键另存。）

　　>>>对照原页面，进行区间划分的图片<<<

　　本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
　　在下面的教程中，我们会深入分析细部的CSS布局情况，敬请关注52CSS.com教程更新！
　　
　　
　　]]> http://www.52css.com/default.asp?id=780 <![CDATA[一行、多行文本垂直居中的CSS实例说明]]> MrJin@52css.com(52css) Tue,01 Jul 2008 15:34:22 +0800 http://www.52css.com/default.asp?id=780 　　如下所示：

　　本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]

    [ 可先修改部分代码 再运行查看效果 ]

　　在这样的情况下，如何实现文字垂直居中呢。分为三种情况：

一、如果是单行文本，可以用行距来解决问题。

　　在52CSS.com以前的文章中，也有过这方面的介绍。
　　如何在父元素中垂直居中文本？
　　http://www.52css.com/article.asp?id=150
　　我们为它增加行距的定义，得到了单行文本垂直居中的效果。

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]

    [ 可先修改部分代码 再运行查看效果 ]

二、如果是多行文本，父容器不固定高度。

　　我们可以用padding来解决问题。
　　设置容器的padding上下为相同的固定值，容器的高度随着内容的增加而增加。
　　以此来实现多行文本的垂直居中。

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]

    [ 可先修改部分代码 再运行查看效果 ]

　　或者：

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]

    [ 可先修改部分代码 再运行查看效果 ]

三、如果是多行文本，父容器固定高度。

　　这就需要用到定位，而且需要给HTML增加标签。我们不提倡这样做。
　　但目前这个方法可以更好的解决问题。
　　在容器的内部需要增设两个容器，来实现这样的效果。
　　MrJin、MrJin_a和MrJin_b的设置分别如下：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#MrJin {    
    position:static;
    *position:relative;    
    height:300px;
    width:500px;
    border:1px solid #03c;
    *display:block!important;
    display:table!important;
}
#MrJin_a {
    position:static;
    *position:absolute;
    display:table-cell;
    vertical-align:middle;
    *display:block;
    top:50%;
    width:100%;
}
#MrJin_b {
    position:relative;
    top:-50%;
    text-align:center;
    width:100%;
}

　　这样设置以后，不管容器内的文本是一行，还是多行，都将会实现垂直居中对齐。

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]

    [ 可先修改部分代码 再运行查看效果 ]

　　或者：

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]

    [ 可先修改部分代码 再运行查看效果 ]

更多关于居中的问题：

　　如何让层垂直居中于浏览器窗口？
　　http://www.52css.com/article.asp?id=155
　　如何让图片在容器里垂直居中？
　　http://www.52css.com/article.asp?id=211
　　如何实现未知高居垂直居中？
　　http://www.52css.com/article.asp?id=212
　　CSS如何实现单行图片与文字垂直居中？
　　http://www.52css.com/article.asp?id=435
　　更多：http://www.52css.com/search.asp?SearchContent=%E5%B1%85%E4%B8%

　　本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
　　]]> http://www.52css.com/default.asp?id=779 <![CDATA[多行多列清单形式的CSS实例]]> MrJin@52css.com(52css) Mon,30 Jun 2008 01:22:00 +0800 http://www.52css.com/default.asp?id=779
　　本文作者：52CSS.com-李想 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！

　　声明：本实例仅作为学习多行多列布局之用，存在着一定的缺陷，仅供大家参考多行多列实现的思路。

　　本实例效果如图所示。


CSS编码：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
ul{width:30em;}
ul li{float: left;width: 10em;}
ul li a{display: block; width: 7em;text-decoration: none;}
ul li a:hover{olor: #FFF; background-color: #A52A2A;}

XHTML编码：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<ul>
    <li><a href="#">Aloe</a></li>
    <li><a href="#">Bergamot</a></li>
    <li><a href="#">Calendula</a></li>
    <li><a href="#">Damiana</a></li>
    <li><a href="#">Elderflower</a></li>
    <li><a href="#">Feverfew</a></li >
    <li><a href="#">Ginger</a></li>
    <li><a href="#">Hops</a></li>
    <li><a href="#">Iris</a></li>
    <li><a href="#">Juniper</a></li>
    <li><a href="#">Kava kava</a></li>
    <li><a href="#">Lavender</a></li>
    <li><a href="#">Marjoram</a></li>
    <li><a href="#">Nutmeg</a></li>
    <li><a href="#">Oregano</a></li>
    <li><a href="#">Pennyroyal</a></li>
</ul>

　　为了能够看清楚排列顺序，我们将上述代码的无序列表ul变成有序列表ol
如图：


　　Ps：我们可以发现它是按照横向排列的

　　如何实现垂直排列：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
ol{margin: 0 0 1em 2em;padding: 0;}
ol li{line-height: 1.2em; margin:0; padding:0;}
* html ol li{position:relative;}  /*IE6*/
*+ html ol li{position:relative;} /*IE7*/
ol li.column1 { margin-left: 0em; }
ol li.column2 { margin-left: 10em; }
ol li.column3 { margin-left: 20em; }
li.reset{ margin-top: -6em;} 
 /*每个li的高度1.2em，5行正好是6em，-6em是向上提60px*/    
ol li a{display: block;width: 7em;text-decoration: none;}
ol li a:hover{color: #FFF; background-color: #A52A2A;}


div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<ol>
    <li class="column1"><a href="#">Aloe</a></li>
    <li class="column1"><a href="#">Bergamot</a></li>
    <li class="column1"><a href="#">Calendula</a></li>
    <li class="column1"><a href="#">Damiana</a></li>
    <li class="column1"><a href="#">Elderflower</a></li>
    
    <li class="column2 reset"><a href="#">Feverfew</a></li>
    <li class="column2"><a href="#">Ginger</a></li>
    <li class="column2"><a href="#">Hops</a></li>
    <li class="column2"><a href="#">Iris</a></li>
    <li class="column2"><a href="#">Juniper</a></li>
    
    <li class="column3 reset"><a href="#">Kava kava</a></li>
    <li class="column3"><a href="#">Lavender</a></li>
    <li class="column3"><a href="#">Marjoram</a></li>
    <li class="column3"><a href="#">Nutmeg</a></li>
    <li class="column3"><a href="#">Oregano</a></li>
    <li class="column3"><a href="#">Pennyroyal</a></li>
</ol>

如图：


　　这个样式是建立横向列表的：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
ol li.column1 { margin-left: 0em; }
ol li.column2 { margin-left: 10em; }
ol li.column3 { margin-left: 20em; }

　　PS：当项目被添加或被删除，项目的数量，栏目数变化的时候， CSS的li.reset （ ）规则必须相应改变。

　　一对一的进行设置：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
ul{width: 30em; margin: 0;padding: 0;border: 10px solid #eeeeee; }
ul li{width: 10em;height: 2em;margin: 0;padding: 0; list-style-type: none;}
ul li a{display: block; width:10em; line-height:2em; font-weight: bold; text-decoration:none; text-align:center; color:#000;}
ul li a:hover{color: #FFF; background-color: #A52A2A;}

ul li.feve,
ul li.kava{margin-top: -10em;} 
/*每个li的高度2em，5行正好是10em，-10em是向上提100px*/

ul li.aloe,
ul li.berg,
ul li.cale,
ul li.dami,
ul li.elde{margin-left: 0em;}

ul li.feve,
ul li.ging,
ul li.hops,
ul li.iris,
ul li.juni{margin-left: 10em;}

ul li.kava,
ul li.lave,
ul li.marj,
ul li.nutm,
ul li.oreg,
ul li.penn{margin-left: 20em;}

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<ul>
        <li class="aloe"><a href="#">Aloe</a></li>
        <li class="berg"><a href="#">Bergamot</a></li>
        <li class="cale"><a href="#">Calendula</a></li>
        <li class="dami"><a href="#">Damiana</a></li>
        <li class="elde"><a href="#">Elderflower</a></li>
        <li class="feve"><a href="#">Feverfew</a></li >
        <li class="ging"><a href="#">Ginger</a></li>
        <li class="hops"><a href="#">Hops</a></li>
        <li class="iris"><a href="#">Iris</a></li>
        <li class="juni"><a href="#">Juniper</a></li>
        <li class="kava"><a href="#">Kava kava</a></li>
        <li class="lave"><a href="#">Lavender</a></li>
        <li class="marj"><a href="#">Marjoram</a></li>
        <li class="nutm"><a href="#">Nutmeg</a></li>
        <li class="oreg"><a href="#">Oregano</a></li>
        <li class="penn"><a href="#">Pennyroyal</a></li>
</ul>

如图：


div css xhtml xml Example Source Code Example Source Code [www.52css.com]
ul li.aloe,
ul li.berg,
ul li.cale,
ul li.dami,
ul li.elde{margin-left: 0em;}

ul li.feve,
ul li.ging,
ul li.hops,
ul li.iris,
ul li.juni{margin-left: 10em;}

ul li.kava,
ul li.lave,
ul li.marj,
ul li.nutm,
ul li.oreg,
ul li.penn{margin-left: 20em;}
/*同上面的*/
ol li.column1 { margin-left: 0em; }
ol li.column2 { margin-left: 10em; }
ol li.column3 { margin-left: 20em; }
/*只不过是进行单一定义了，对每一个列表进行分别定义*/

进行添加样式：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div.wrapper{ margin-bottom: 1em;}
ul{width: 30em; margin: 0;padding: 0;border: 10px solid #eeeeee; background-image: url("SophieAresPilonPale.jpg");} /*背景图*/
ul li{width: 10em;height: 2em;margin: 0;padding: 0; list-style:none;}
ul li a{display: block;width:10em;line-height:2em;font-weight: buld;text-decoration:none;text-align:center;color:#000;}
ul li a:hover{color: #FFF; background-image: url("SophieAresPilonBright.jpg");}
/*鼠标悬停时候的图*/

li.aloe a { background-position: 0em -0em }
li.berg a { background-position: 0em -2em }
li.cale a { background-position: 0em -4em }
li.dami a { background-position: 0em -6em }
li.elde a { background-position: 0em -8em }

li.feve a { background-position: -10em -0em }
li.ging a { background-position: -10em -2em }
li.hops a { background-position: -10em -4em }
li.iris a { background-position: -10em -6em }
li.juni a { background-position: -10em -8em }

li.kava a { background-position: -20em -0em }
li.lave a { background-position: -20em -2em }
li.marj a { background-position: -20em -4em }
li.nutm a { background-position: -20em -6em }
li.oreg a { background-position: -20em -8em }
li.penn a { background-position: -20em -10em }
/*鼠标悬停时候图片的定位*/

ul li.feve,
ul li.kava{margin-top: -10em;}
/*顶端对齐*/

ul li.aloe,
ul li.berg,
ul li.cale,
ul li.dami,
ul li.elde{margin-left: 0em;}

ul li.feve,
ul li.ging,
ul li.hops,
ul li.iris,
ul li.juni{margin-left: 10em;}

ul li.kava,
ul li.lave,
ul li.marj,
ul li.nutm,
ul li.oreg,
ul li.penn{margin-left: 20em;}
/*建立横向列表*/

　　本文作者：52CSS.com-李想 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<div class="wrapper">
    <ul>
        <li class="aloe"><a href="#">Aloe</a></li>
        <li class="berg"><a href="#">Bergamot</a></li>
        <li class="cale"><a href="#">Calendula</a></li>
        <li class="dami"><a href="#">Damiana</a></li>
        <li class="elde"><a href="#">Elderflower</a></li>
        <li class="feve"><a href="#">Feverfew</a></li >
        <li class="ging"><a href="#">Ginger</a></li>
        <li class="hops"><a href="#">Hops</a></li>
        <li class="iris"><a href="#">Iris</a></li>
        <li class="juni"><a href="#">Juniper</a></li>
        <li class="kava"><a href="#">Kava kava</a></li>
        <li class="lave"><a href="#">Lavender</a></li>
        <li class="marj"><a href="#">Marjoram</a></li>
        <li class="nutm"><a href="#">Nutmeg</a></li>
        <li class="oreg"><a href="#">Oregano</a></li>
        <li class="penn"><a href="#">Pennyroyal</a></li>
    </ul>
</div><!-- .wrapper -->

　　>>>查看最终运行效果<<<
　　
]]> http://www.52css.com/default.asp?id=778 <![CDATA[CSS Sprite减少图片 限制图片 加速显示]]> MrJin@52css.com(52css) Sat,28 Jun 2008 15:50:21 +0800 http://www.52css.com/default.asp?id=778 　　在以前我们的工作中，以传统切图思想进行操作，讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按Byte计算。
　　客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。因为一张图片的传输时间，通常远小于请求等待的时间。
　　典型如文本编辑器，小图标特别多，打开时一张张跑出来，给用户的感觉很不好。如果能用一张图解决，则不会有这个问题，比如百度空间、163博客、Gmail都是这么做的，52CSS.com也提倡这样的操作方法。

　　关于CSS Sprite您还可以参考：
　　CSS Sprites工作原理及其对CSS布局的意义、优点和缺点介绍
　　http://www.52css.com/article.asp?id=735


　　Back when video games were still fun (we’re talking about the 8-bit glory days here), graphics were a much simpler matter by necessity. Bitmapped 2-dimensional character data and background scenery was individually drawn, much like today’s resurgent pixel art. Hundreds and later thousands of small graphics called sprites were the building blocks for all things visual in a game.


　　As game complexity increased, techniques developed to manage the multitude of sprites while keeping game play flowing. One variation saw sprites being plugged into a master grid, then later pulled out as needed by code that mapped positions of each individual graphic, and selectively painted them on the screen.

And what does this have to do with the web?

　　Everything old is new again, and though the rise of 3D games has made sprite maps obsolete, the concurrent rise of mobile devices with 2D gaming capabilities have brought them back into vogue. And now, with a bit of math and a lot of CSS, we’re going to take the basic concept and apply it to the world of web design.

　　Specifically, we’re going to replace old-school image slicing and dicing (and the necessary JavaScript) with a CSS solution. And because of the way CSS works, we’re going to take it further: by building a grid of images and devising a way to get each individual cell out of the grid, we can store all buttons/navigation items/whatever we wish in a single master image file, along with the associated “before” and “after” link states.

How do CSS Sprites work?

　　As it turns out, the basic tools to do this are built into CSS, given a bit of creative thinking. 

　　Let’s start with the master image itself. Dividing a rectangle into four items, you’ll observe in this master image that our intended “before" link images are on the top row, with “after" :hover states immediately below. There’s no clear division between the four links at the moment, so imagine that each piece of text is a link for now. (For the sake of simplicity, we’ll continue to refer to link images as “before” images and the :hover state as “after” for the rest of this article. It’s possible to extend this method to :active, :focus, and :visited links states as well, but we won’t go into that here.)

　　Those familiar with Petr Stanicek’s (Pixy) Fast Rollovers may already see where we’re going with this. This article owes a debt of gratitude to Pixy’s example for the basic function we’ll be relying on. But let’s not get ahead of ourselves.

　　On to the HTML. Every good CSS trick strives to add a layer of visuals on top of a clean block of code, and this technique is no exception:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
  <ul id="skyline">
    <li id="panel1b"><a href="#1"></a></li>
    <li id="panel2b"><a href="#2"></a></li>
    <li id="panel3b"><a href="#3"></a></li>
    <li id="panel4b"><a href="#4"></a></li>
  </ul>

　　This code will serve as a base for our example. Light-weight, simple markup that degrades well in older and CSS-disabled browsers is all the rage, and it’s a trend that’s good for the industry. It’s a great ideal to shoot for. (We’ll ignore any text inside the links for the time being. Apply your favorite image replacement technique later to hide the text you’ll end up adding.)

Applying the CSS

　　With those basic building blocks, it’s time to build the CSS. A quick note before we start — because of an IE glitch, we’ll be tiling the after image on top of the before image when we need it, instead of replacing one with the other. The result makes no real visual difference if we line them up precisely, but this method avoids what otherwise would be an obvious “flicker” effect that we don’t want.

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
  #skyline {
    width: 400px; height: 200px;
    background: url(test-3.jpg);
    margin: 10px auto; padding: 0;
    position: relative;}
  #skyline li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;}
  #skyline li, #skyline a {
    height: 200px; display: block;
}

　　Counter-intuitively, we’re not assigning the before image to the links at all, it’s applied to the <ul> instead. You’ll see why in a moment.

　　The rest of the CSS in the above example sets things like the dimensions of the #skyline block and the list items, starting positions for the list items, and it turns off the unwanted list bullets.

　　We’ll be leaving the links themselves as empty, transparent blocks (though with specific dimensions) to trigger the link activity, and position them using the containing <li>s. If we were to position the links themselves and effectively ignore the <li>s, we’d start seeing errors in older browsers, so let’s avoid this.

Positioning the links

　　The <li>s are absolutely positioned, so why aren’t they at the top of the browser window? A quirky but useful property of positioned elements is that all descendent elements contained within them base their absolute position not off the corners of the browser window, but off the corners of the nearest positioned ancestor element.The upshot of this is that since we applied position: relative; to #skyline, we’re able to absolutely position the <li>s from the top left corner of #skyline itself.

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
  #panel1b {left: 0; width: 95px;}
  #panel2b {left: 96px; width: 75px;}
  #panel3b {left: 172px; width: 110px;}
  #panel4b {left: 283px; width: 117px;}

　　So #panel1 isn’t horizontally positioned at all, #panel2b is positioned 96px to the left of #skyline’s left edge, and so on. We assigned the links a display: block; value and the same height as the <li>s in the past listing, so they’ll end up filling their containing <li>s, which is exactly what we want.

　　At this point we have a basic image map with links, but no :hover states. See the example. It’s probably easier to see what’s happening with borders turned on.

Hovers

　　In the past we would have applied some JavaScript to swap in a new image for the after state. Instead our after states are in one image, so all we need is a way to selectively pull each state out for the appropriate link.

　　If we apply the master image to the :hover state without additional values, we make only the top left corner visible — not what we want, though clipped by the link area, which is what we want. We need to move the position of the image somehow.

　　We’re dealing with known pixel values; a little bit of math should enable us to offset that background image enough both vertically and horizontally so that only the piece containing the after state shows.

　　That’s exactly what we’ll do:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
  #panel1b a:hover {
    background: transparent url(test-3.jpg)
    0 -200px no-repeat;}
  #panel2b a:hover {
    background: transparent url(test-3.jpg)
    -96px -200px no-repeat;}
  #panel3b a:hover {
    background: transparent url(test-3.jpg)
    -172px -200px no-repeat;}
  #panel4b a:hover {
    background: transparent url(test-3.jpg)
    -283px -200px no-repeat;}

　　Where did we get those pixel values? Let’s break it down: the first value is of course the horizontal offset (from the left edge), and the second is the vertical.

　　Each vertical value is equal; since the master image is 400 pixels high and the after states sit in the bottom half, we’ve simply divided the height. Shifting the whole background image up by 200px requires us to apply the value as a negative number. Think of the top edge of the link as the starting point, or 0. To position the background image 200 pixels above this point, it makes sense to move the starting point -200px.

　　Likewise, if the left edge of each link is effectively 0, we’ll need to offset the background image horizontally by the width of all <li>s prior to the one we’re working with. So the first link doesn’t require an offset, since there are no pixels before its horizontal starting point. The second link requires an offset the width of the first, the third link requires an offset of the combined width of the first two links, and the last requires an offset of the combined width of all three previous links.

　　It’s a bit cumbersome to explain the process, but playing around with the values will quickly show you how the offsets work, and once you’re familiar it’s not all that hard to do.

　　So there you have it. Single-image CSS rollovers, degradable to a simple unordered list. 

Buttons

　　There’s no reason why we have to leave the links touching each other, side-by-side as they were in the previous example. Image maps may be convenient in some spots, but what about separating each link into its own stand-alone button? That way we can add borders and margins, let the underlying background show through, and generally treat them as separately as we need to.

　　In fact, the building blocks are already in place. We really don’t need to modify our code too radically; the main change is in creating a new background image that doesn’t continue from link to link like the last example did. Since we can’t rely on the <ul> for placing the original background image, we’ll end up applying it to all <li>s instead and offsetting each the same way we offset the after states in the prior example.

　　With an appropriate image and a bit of spacing between each <li>, we’ve got buttons.

　　Note that in this example we’ve added 1px borders which, of course, count toward the final width of the links. This affects our offset values; we’ve compensated by adding 2px to the offsets where appropriate.

Irregular shapes

　　Up till now we’ve focused only on rectangular, non-overlapping shapes. What about the more complex image maps that image slicers like Fireworks and ImageReady export so easily? Relax, we’ve got you covered there too.

　　We’ll start the same way as the first example, by applying the background image to the <ul> and turning off list item bullets and setting widths and so forth. The big difference is where we position the <li>s; the goal is to surround each graphical element with a box that tightly hugs the edges.

　　Again, because of the ability to use absolute positioning relative to the top left corner of the <ul>, we’re able to precisely place our links exactly where we want them. Now all that’s left is to set up the hover states.

　　Worth noting is that in this case, a single set of before and after images wasn’t enough. Because of the overlapping objects, relying on only one after state would show pieces of surrounding objects’ after states. In fact, it would show precisely the pieces that fall within the link’s borders. (Easiest to just see it in action.)

　　How to avoid this? By adding a second after state, and carefully selecting which objects go where. The master image in this case has split the purple and blue objects into the first after state, and the green, orange and yellow objects into the second. This order allows boxes to be drawn around each object’s after state without including pieces of the surrounding objects. And the illusion is complete.

Benefits and pitfalls

　　A couple of final thoughts. Our new CSS Sprite method tests well in most modern browsers. The notable exception is Opera 6, which doesn’t apply a background image on link hover states. Why, we’re not sure, but it means that our hovers don’t work. The links still do, and if they’ve been labeled properly, the net result will be a static, but usable image map in Opera 6. We’re willing to live with that, especially now that Opera 7 has been around for a while.

　　The other concern is familiar to anyone who has spent time with FIR. In the rare cases in which users have turned off images in their browsers but retained CSS, a big empty hole will appear in the page where we expect our images to be placed. The links are still there and clickable, but nothing visually appears. At press time, there was no known way around this.

　　Then there’s file size. The natural tendency is to assume that a full double-sized image must be heavier than a similar set of sliced images, since the overall image area will usually be larger. All image formats have a certain amount of overhead though (which is why a 1px by 1px white GIF saves to around 50 bytes), and the more slices you have, the more quickly that overhead adds up. Plus, one master image requires only a single color table when using a GIF, but each slice would need its own. Preliminary tests suggest that all this indicates smaller total file sizes for CSS Sprites, or at the very least not appreciably larger sizes.

　　And lastly, let’s not forget that our markup is nice and clean, with all the advantages that go along with that. HTML lists degrade wonderfully, and a proper image replacement technique will leave the text links accessible to screenreaders. Replacing the sprite imagery is dead simple, since all of our dimensions and offsets are controlled in a single CSS file, and all of our imagery sits in a single image.
　　
　　
　　]]> http://www.52css.com/default.asp?id=777 <![CDATA[侧边滑动效果 javascript CSS菜单实例（提供下载）]]> MrJin@52css.com(52css) Fri,27 Jun 2008 13:12:45 +0800 http://www.52css.com/default.asp?id=777 　　这是一款不错的菜单，由javascript与CSS配合实现。居于侧边不占据任何位置，在点击后滑动出来，并伴随一定的动画效果。非常新颖而实用。效果如图所示：


下面看CSS编码：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
    body{
        position:relative;
        paddign:0px;
        font-size:100%;
    }
    
    h2{
        color:#FFFFFF;
        font-size:90%;
        font-family:arial;
        margin:10px 10px 10px 10px;
        font-weight:bold;
    }
    
    h2 span{
        font-size:105%;
        font-weight:normal;
    }
    
    ul{
        margin:0px 0px 0px 0px;
        padding:0px 0px 0px 0px;
    }
    
    li{
        margin:0px 10px 3px 10px;
        padding:2px;
        list-style-type:none;
        display:block;
        background-color:#DA1074;
        width:177px;
    }
    
    li a{
        width:100%;
    }
    
    li a:link,
    li a:visited{
        color:#FFFFFF;
        font-family:verdana;
        font-size:70%;
        text-decoration:none;
        display:block;
        margin:0px 0px 0px 0px;
        padding:0px;
        width:100%;
    }
    
    li a:hover{
        color:#FFFFFF;
        text-decoration:underline;
    }
    
    #sideBar{
        position: absolute;
        width: auto;
        height: auto;
        top: 200px;
        right:-7px;
        background-image:url(images/background.gif);
        background-position:top left;
        background-repeat:repeat-y;
    }
    
    #sideBarTab{
        float:left;
        height:137px;
        width:28px;
    }
    
    #sideBarTab img{
        border:0px solid #FFFFFF;
    }
    
    #sideBarContents{
        overflow:hidden !important;
    }
    
    #sideBarContentsInner{
        width:200px;
    }

XHTMl编码：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<div id="sideBar">
    
    <a href="#" id="sideBarTab"><img src="images/slide-button.gif" alt="sideBar" title="sideBar" /></a>
    
    <div id="sideBarContents" style="width:0px;">
        <div id="sideBarContentsInner">
            <h2>side<span>bar</span></h2>
            
            <ul>
                <li><a href="http://www.52css.com/default.asp?cateID=3" target="_blank">Div+CSS教程</a></li>
                <li><a href="http://www.52css.com/default.asp?cateID=9" target="_blank">CSS布局实例</a></li>
                <li><a href="http://www.52css.com/default.asp?cateID=5" target="_blank">CSS2.0教程</a></li>
                <li><a href="http://www.52css.com/css/" target="_blank">CSS在线手册</a></li>
                <li><a href="http://www.52css.com/default.asp?cateID=7" target="_blank">XHTML教程</a></li>
            </ul>
            
        </div>
    </div>
    
</div>


>>>点击查看运行效果<<<

>>>点击下载本实例<<<
解压密码：www.52css.com
　　
　　
　　]]> http://www.52css.com/default.asp?id=776 <![CDATA[CSS布局最常用属性float（浮动）和position（定位）]]> MrJin@52css.com(52css) Wed,25 Jun 2008 10:35:36 +0800 http://www.52css.com/default.asp?id=776 　　在进行CSS网页布局时，对元素与容器进行布置与规划，最常用的两个属性就是浮动float和定位position。这两个属性的理解对CSS网页布局的学习非常重要。我们52CSS.com就这两个属性的相关知识与实例，发布本文，希望对您的工作学习有帮助。

首先了解float（浮动）和position（定位）属性的基础知识：

float（浮动）属性：

　　float:none|left|right 
　　取值：
　　　　none: 默认值。对象不飘浮
　　　　left: 文本流向对象的右边
　　　　right: 文本流向对象的左边 

float（浮动）属性的一个实例（一行两列）： 

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
xhtml代码:
<div id="wrap"> 
<div id="column1">这里是第一列</div> 
<div id="column2">这里是第二列</div> 
<div class="clear"></div> <!--元素需要清除浮动 但可能与Web标准意图相背--> 
</div>
CSS代码:
#wrap{width:100px; margin:0 auto;} 
#column1{float:left;width:40px;} 
#column2{float:right;width:60px;} 
.clear{clear:both;}

position（定位）属性：

　　position:static|absolute|fixed|relative
　　取值：
　　　　static: 默认值。无特殊定位，对象遵循HTML定位规则
　　　　absolute: 将对象从文档流中拖出，使用left，right，top，bottom等属性
　　　　　　　　 相对于其最接近的一个最有定位设置的父对象进行绝对定位。
　　　　　　　　 如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义
　　　　fixed: 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
　　　　relative: 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 

position（定位）属性的一个实例（一行两列）： 

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
xhtml代码:
<div id="wrap"> 
<div id="column1">这里是第一列</div> 
<div id="column2">这里是第二列</div> 
</div>
css代码:
#wrap{position:relative;width:300px;} 
#column1{position:absolute;top:0;left:0;width:200px;} 
#column2{position:absolute;top:0;right:0;width:100px;} 

float（浮动）和position（定位）属性的区别

　　显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！在局部可能会用到position进行定位！请参考52CSS.com更多相关文章：
　　DIV CSS布局：CSS浮动float属性详解
　　http://www.52css.com/article.asp?id=576
　　CSS Float Layout Basics - CSS浮动布局基础
　　http://www.52css.com/article.asp?id=556
　　CSS中Float（浮动）相关文摘
　　http://www.52css.com/article.asp?id=534
　　Div+CSS教程：如何闭合浮动元素？
　　http://www.52css.com/article.asp?id=697
　　CSS定位属性的应用
　　http://www.52css.com/article.asp?id=52

查看一些float（浮动）和position（定位）的CSS布局实例：

单行一列

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
body{margin:0px;padding:0px;text-align:center;} 
#content{margin:0 auto;width:400px;} 

两行一列 

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
body{margin:0px;padding:0px;text-align:center;} 
#content-top{margin:0 auto; width:400px;} 
#content-end{margin:0 auto; width:400px;} 

三行一列

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
body{margin:0px;padding:0px;text-align:center;} 
#content-top{margin:0 auto; width:400px;} 
#content-mid{margin:0 auto; width:400px;} 
#content-end{margin:0 auto; width:400px;}

单行两列

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#bodycenter{width:700px;margin:0 auto;overflow:auto;} 
#bodycenter#dv1{float:left;width:280px;} 
#bodycenter#dv2{float:right;width:420px;} 

两行两列
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#header{width:700px;margin:0 auto;overflow:auto;} 
#bodycenter{width:700px;margin:0 auto;overflow:auto;} 
#bodycenter#dv1{float:left;width:280px;} 
#bodycenter#dv2{float:right;width:420px;} 

三行两列

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#header{width:700px;margin:0 auto;} 
#bodycenter{width:700px;margin:0 auto;} 
#bodycenter#dv1{float:left;width:280px;} 
#bodycenter#dv2{float:right;width:420px;} 
#footer{width:700px;margin:0 auto;overflow:auto;clear:both;} 

单行三列（绝对定位） 

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#left{position:absolute;top:0px;left:0px;width:120px;} 
#middle{margin:0 120px 0 120px;} 
#right{position:absolute;top:0;right:0;width:120px;} 

float定位

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
xhtml代码:
<div id="wrap"> 
<div id="column"> 
  <div id="column1">这里是第一列</div> 
  <div id="column2">这里是第二列</div> 
  <div class="clear"></div> <!--元素需要清除浮动 但可能与Web标准意图相背--> 
</div> 
<divid="column3">这里是第三列</div> 
<divclass="clear"></div> <!--元素需要清除浮动 但可能与Web标准意图相背--> 
</div> 
css代码:
#wrap{width:300px;} 
#column{float:left;width:200px;} 
#column1{float:left;width:120px;} 
#column2{float:right;width:80px;} 
#column3{float:right;width:100px;} 
.clear{clear:both;} 

　　
　　]]> http://www.52css.com/default.asp?id=775 <![CDATA[两张CSS盒模型图示 搞清楚border、margin和padding]]> MrJin@52css.com(52css) Tue,24 Jun 2008 09:50:45 +0800 http://www.52css.com/default.asp?id=775 　　关于CSS盒模型52CSS.com多次讲到过，还有一些新手朋友没有搞清楚，通过下面的两张图片，大家可以很清楚的看到border、margin、padding的关系。更多关于CSS盒模型的知识，您可以参考：

　　彻底弄懂CSS盒模型 Box Model
　　http://www.52css.com/article.asp?id=376
　　CSS盒模型（Box Model）问题详解
　　http://www.52css.com/article.asp?id=286



　　边框属性(border)用来设定一个元素的边线；
　　外边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离；
　　内边距属性(padding)是用来设置元素内容到元素边界的距离。 
　　
　　
]]> http://www.52css.com/default.asp?id=774 <![CDATA[Top CSS Tips（CSS顶级技巧）十则！]]> MrJin@52css.com(52css) Mon,23 Jun 2008 21:58:20 +0800 http://www.52css.com/default.asp?id=774 52CSS：不要说你看不懂，只是你不愿意看。：）

　　I thought I'd share some of my habits when it comes to doing CSS work and let me warn you, some of what I have to say is probably a little controversial. But what's life without living it on the edge. (Yeah, I live an exciting life when CSS is considered 'the edge'.)

px for font sizes - 用px作为字体大小的单位

　　Sacrilege, I know. There are perfectly good ways to get consistent font sizing and I really should use them but Internet Explorer is the only browser that I can think of that doesn't resize text. If the majority of your audience uses IE, then be nice to them and don't use pixels. Otherwise, I figure with IE7 supporting it, pixels are the new ems. 

　　When using pixel sizes, I also get to be sparing in my usage. I specify it on the body and any headers that need it. Inheritance is less of an issue (how many sites have you seen list items inexplicably smaller than the rest of the content like it was less important).

CSS declarations on one line - CSS声明写在一行

　　I've always put my entire declaration on one line. Here's an example to explain what I mean:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}

h2 {
   font-size:18px;
   border:1px solid blue;
   color:#000;
   background-color:#FFF;　/*www.52css.com*/
   }

　　The second one may look prettier but it sure doesn't help me find anything. When looking for something in a style sheet, the most important thing is the ruleset (that's the part before the { and } ). I'm looking for an element, an id or a class. Having everything on one line makes scanning the document much quicker as you simply see more on a page. Once I've found the ruleset I was looking for, find the property I want is usually straightforward enough as there are rarely that many.

Blocking the Styles - 代码分块

　　I break down my style sheet into three separate blocks. The first is straight element declarations. Change the body, some links styles, some header styles, reset margins and padding on forms, and so on. This is usually a small block as I only like to redefine what I need to. No global margin and padding reset for me. I clear the body and form and maybe adjust paragraph if the design really needs it. Otherwise, let the browser handle it. I find the more you try to override what the browser does, the more styles you have to put in, which simply adds to the time to track down bugs and maintain the code.

　　After element declarations, I have my class declarations; things like classes for an error message or a callout would go hear. I usually only have a couple of these. 

　　Finally, the meat. I start by declaring my main containers and then any styles for elements within those containers are indented. At a quick glance, I can see how my page is broken down and makes it easier to know where to look for things. I'll also declare containers even if they don't have any rules.

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#content {float:left;}
   #content p { ... }

#sidebar {float:left;}
   #sidebar p { ... }

#footer {clear:both;}
   #sidebar p { ... }　/*www.52css.com*/

Browser Support - 浏览器兼容

　　Support only the latest browsers. That means dropping support for IE5 and IE5.5. Lots of time and effort to be saved here. No box model hacks needed for IE6. In fact, in supporting just the most recent versions of browsers, I end up using very few hacks. Along with using very few hacks means I can avoid shovelling different style sheets to separate browsers. I have one sheet, and that's it. Any hacks I do use are normally commented as such. Similar to the use of pixel measurements, you have to consider your audience before dropping browser support.

　　The biggest thing for me is still triggering hasLayout in IE to do float containment and I've been using zoom:1 for that. I like it because it's innocuous and shouldn't mess with anything else. 

Containing Floats - “包含”式浮动

　　I just touched on float containment so let's expand on that. My current approach to containing floats is using overflow:hidden (with possibly zoom:1 for Internet Explorer). No clearing div or use of :after. Only worry about containing your floats if you have a background you are trying to set on your container. The overflow should be set on the container.

　　Keep in mind that the content within the container should be designed to stay within the container. Anything too big and it'll get clipped. Shifting things using negative margins outside the container will also get clipped.

Understand Overflow - 理解与使用溢出

　　Overflow is usually where people get bit by IE. If you've got two floated elements and the content from the left container overflows then, in IE, the container grows and inevitably pushes the right container below it. This is usually a sign that you've messed up your margins, widths, or padding on one of these containers but Firefox (et al) won't reveal this. Using something like overflow:hidden or overflow:scroll on a container can help prevent IE from allowing the content to push the width of the container but you're better off trying to fix the issue in the design.

Allow Block Elements to Fill Their Space Naturally - 允许块元素的空白

　　My rule of thumb is, if I set a width, I don't set margin or padding. Likewise, if I'm setting a margin or padding, I don't set a width. Dealing with the box model can be such a pain, especially if you're dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.

Use CSS Shorthand - 使用CSS属性缩写

　　More Article: http://www.52css.com/search.asp?SearchContent=%E7%BC%A9%E5%86%99
　　This might seem like beating a dead horse but I still see people doing really verbose statements where they're setting margin-top, margin-right, margin-bottom and margin-left. My general rule of thumb is, you can use the long form only if you're setting one side. Once you have to set more than one side, it'll take less bytes to use shorthand. 

　　In shorthand, remember that the properties start at the top and work clockwise. margin: top right bottom left; It's also handy to know the shorter forms if you have equal values for top and bottom or left and right. 

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
margin: 5px 10px 20px; /* top left/right bottom _ www.52css.com*/
margin: 10px 20px; /* top/bottom left/right */
margin: 0; /* all sides */

　　For border, if you only have to set more than one side differently then use two declarations. The first to set all sides, and then a second to change the values for one of the properties.

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
/* 1px blue border on the left and bottom _ www.52css.com */
border:1px solid blue; border-width: 0 0 1px 1px; 

Avoid Unnecessary Selectors - 避免多余的选择器

　　Just specify the minimum number of selectors necessary for the style. If you find yourself doing ul li {...} or table tr td {...} then you're being more verbose than you need. LI's will inevitably be in UL's (okay, I suppose they could find themselves in OL's, in which case, be more specific for those styles) and a TD will inevitably be in a TR and a TABLE.

　　Or putting the element name in front of an ID selector (Example: div#navigation). I used to do this because it'd help me "remember" which element the ID is on. As it turns out, I tend to use similar class names from project to project and they inevitably appear on the same elements. I also tend to just do a search to find where something is. So, these days, I just leave it at #navigation.

　　Using less selectors will mean less selectors will be needed to override any particular style — that means it's easier to troubleshoot.

Keep it Simple - 保持简洁

　　If it hasn't been evident throughout this post, only add when you need to, and that includes hacks. No need to get any more complicated than you need to. 

　　Now, I'd love to hear some of your tips.
　　
　　
　　
　　]]> http://www.52css.com/default.asp?id=773 <![CDATA[javascript 获取特定的 CSS属性值]]> MrJin@52css.com(52css) Mon,23 Jun 2008 10:17:15 +0800 http://www.52css.com/default.asp?id=773 　　
　　本例的javascript代码用于获得在CSS文件中声明的特定样式中的某属性值。如：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<link id="system_style" type="text/css" href="global.css" rel="stylesheet"/> 
<div id="myArticle">
...
</div>

　　在global.css中声明了

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
#myArticle{
width:400px; 
height:300px;
}

　　这样的情况下，直接通过JS进行getElementById(’myArticle’).style.width是无法获取400px的值的，因为这个数值定义在CSS里，所以，必须要用其他方法，我写了以下函数：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
/** 
     * function for get the style value in special css file 
     * @param int css_file_id 
     * @param String labname 
     * @param String param 
     */ 
    function getStyleValue(css_file_id,labname,param) 
    { 
        var tar; 
        var rss; 
        var style; 
        var value; 
        
        tar = document.styleSheets[css_file_id]; 
  
        rss = tar.cssRules?tar.cssRules:tar.rules 
        
        for(i=0;i<rss.length;i++) 
        { 
            style = rss[i]; 
            if(style.selectorText.toLowerCase() == labname.toLowerCase()) 
            { 
                value = style.style[param]; 
            } 
        } 
        return value; 
    }

　　现在只要通过

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
getStyleValue(0,'#myArticle','width')

　　就可以获得啦：）
　　
　　
　　]]>