CssZenGarden读书笔记3(064)

http://www.csszengarden.com/?cssfile=064/064.css

主要讨论一下头部图片的定位问题，使用到的图片包括：
bg2.gif

falsecreek.jpg

granville.jpg

h1.gif

seal.png

 下面是Xhtml结构：

< div  id ="container" >
     < div  id ="intro" >
         < div  id ="pageHeader" >
             < h1 >< span > css Zen Garden </ span ></ h1 >
             < h2 >< span > The Beauty of CSS Design </ span ></ h2 >
         </ div >
   < /div >
< /div >
< div  id ="extraDiv1" >< span ></ span ></ div >
< div  id ="extraDiv2" >< span ></ span ></ div >
< div  id ="extraDiv3" >< span ></ span ></ div >

如何将这些图片组装起来？
这些图片分别应用在那个html元素上？
#pageHeade中没有足够的元素，所以还需要使用额外的#extraDiv1，#extraDiv2，#extraDiv3
作者将bg2.gif应用在好h1上，将csszengarden文字(h1.gif)应用在h2上.

#container {
    width: 770px;
    margin: 0 auto;
    border-left: double 3px #332511;
    border-right: double 3px #332511;
    position: relative;
}    
 
h1 {
    width: 770px;
    height: 166px;
    margin: 0;
    background: #000 url(images/bg2.gif) no-repeat
    top left;
    margin: 0;    
   text-indent: -2000px;

}
    
h2 {
    width: 244px;
    height: 42px;
    background: #000 url(images/h1.gif) no-repeat
    top left;
    margin: 0;
    text-indent: -2000px;
    position: absolute;
    top: 120px;
    margin-left: 495px;
}   

哼哼，到正题了，关键的问题是剩下的三个图片如何定位的问题。注意，整个页面(#container）居中显示（即随着
窗口的大小变化内容会移动位置，这意味着不能相对于body定位）。#extraDiv1，#extraDiv2，#extraDiv3又在
#container外（这意味着不能相对于#container定位），如何定位这些元素就是个大问题。问题的症结在于页面是
居中的，故如果能让这些元素居中，再做适当的调整，问题就解决了。
如何使绝对定位的元素居中，作者创造性使用了这样的方法：将父元素定位于页面的左边，并将其宽度设为100%（即
该父元素的父元素的宽度，这里是body）。然后让设置子元素居中（这里是span）,代码如下（作者的代码考虑了浏览器
缺陷，比较复杂，简单的代码如下）：

#extraDiv1  {
    position :  absolute ;
    top :  41px ;
    left :  0 ;
    width :  100% ;
}   
#extraDiv1 span  {
    background :  url(images/granville.jpg) no-repeat
    top left ;
    display :  block ;
    margin :  0 auto ;
    height :  123px ;
    width :  770px ;
}    

#extraDiv2  {
    position :  absolute ;
    top :  41px ;
    left :  0 ;
    width :  100% ;
}    
#extraDiv2 span  {
    background :  url(images/falsecreek.jpg) no-repeat 
    top right ;
    display :  block ;
    margin :  0 auto ;
    height :  70px ;
    width :  770px ;
}   
 
#extraDiv3  {
    position :  absolute ;
    top :   0 ;
    left :  0 ;
    width :  100% ;
}
#extraDiv3 span  {
    background :  url(images/seal.png) no-repeat
    top right ;
    display :  block ;
    margin :  0 auto ;
    width :  770px ;
    height :  94px ;      
}         

 

转载于:https://www.cnblogs.com/ewee/archive/2009/10/24/1589308.html