2009年3月3日 星期二

分析這個佈景主題-02


首先我們來看這一段CODE

/* Header
----------------------------------------------- */
#header-wrapper {
background: #fff;
padding-bottom: 4px; /* 這個就是如圖所示B,這個區塊的厚度 */
position: relative; /* 這個是採用'relative'相對座標的意思,這樣的話隨著瀏覽器的大小,他會去自動調整位置,不會錯位.(尚有幾個值absolute,fixed....) */
min-height: 190px; /* 整個A區域的厚度(高度) */
_height: 0px;
}

#header .titlewrapper {
background:#be4 url("http://www.blogblog.com/no565/topleft_$startSide.gif") no-repeat $startSide bottom;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:160px;
margin:0px 0px 10px 0px;
color:#fff;
width:100%;
width/* */:/**/auto;
width:auto;
_height: 0px;
min-height: 100px;
}
#header h1 {
background:url("http://www1.blogblog.com/no565/bg_header.gif") no-repeat $startSide top;
margin:0;
padding:70px 0 30px;
line-height: 97px;
font: $titleFont;
text-transform:lowercase;
_height: 0px;
}
#header h1 a {
color:#fff;
text-decoration:none;
}
.postpage #header h1 {
padding-top:0;
background-position:0 -40px;
}

.clear { clear: both; }

/* Description
----------------------------------------------- */
#header .descriptionwrapper {
background: #ff9900 url("http://www2.blogblog.com/no565/bg_desc_top_$startSide.gif") no-repeat $startSide top;
margin:0 0 6px;
padding:12px 0 0;
color: $descColor;
font-size: 75%;
border-bottom: 1px solid #ffffff;
width: 100%;
}
#header .description {
background:url("http://www.blogblog.com/no565/bg_desc_bot_$startSide.gif") no-repeat $startSide bottom;
margin:0;
padding:0 0 12px;
display:block;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
border-bottom: 1px solid #ffffff;
}

#header .description span {
/* To remove the word next to the description, delete the following background property */
background:url("http://www2.blogblog.com/no565/temp_no.gif") no-repeat $startSide center;
/* Keep everything below */
display:block;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:160px;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
}


.postpage #description em {
font-size:1px;
line-height:1px;
color:$descColor;
visibility:hidden;
}

沒有留言:

張貼留言