分析一下yahoo blog的html架構
他的div 命名方式都有一個制定的方式
例如
<div id="ymodfolder" class="ycntmod">
基本的區塊架構分析
<div class="ycntmod">
<!--框框上方-->
<div class="rctop">
<div></div>
</div>
<!--框框上方 end-->
<div class="rcl"><!--框框左邊-->
<div class="rcr"><!--框框右邊-->
<div class="mhd"><!--標題區塊-->
<div class="text">
<h3></h3><!--標題文字-->
</div>
</div>
<div class="mbd"><!--內文區塊-->
<div class="text"><!--內文文字-->
</div>
</div>
</div>
</div>
<!--框框下方-->
<div class="rcbtm">
<div></div>
</div>
<!--框框下方 end-->
</div>
框框的css解析
說明：blog_global081113.css 框框預設css樣式
/*框框外框*/
.ycntmod {
width:100%;
/*寬度100%*/
position:relative;
/*相對定位*/
margin-bottom:10px;
/*距離下面div 10px*/
overflow:hidden;
/*超過的隱藏起來*/
}
/*框框-上方左邊圖片*/
.ycntmod .rctop {
zoom:1;
/*層級*/
background:url(../yimg/mod_nw.gif) left top no-repeat;
/*背景圖片 靠左 靠上 不重複*/
margin-right:5px;
/*距離右邊5px*/
}
/*框框-上方右邊圖片*/
.ycntmod .rctop div {
background:url(../yimg/mod_ne.gif) right top no-repeat;
/*背景圖片 靠右 靠上 不重複*/
height:5px;
/*高度5px*/
font-size:0;
/*字體大小為0，此為消除預設字體大小而產生的空間*/
position:relative;
/*絕對位置*/
right:-5px;
/*絕對位置-距離右邊-5px */
}
/*框框-下方左邊圖片*/
.ycntmod .rcbtm {
zoom:1;
/*層級*/
background:url(../yimg/mod_sw.gif) left bottom no-repeat;
/*背景圖片 靠左 靠下 不重複*/
margin-right:5px;
/*距離右邊5px*/
}
/*框框-下方右邊圖片*/
.ycntmod .rcbtm div {
background:url(../yimg/mod_se.gif) right bottom no-repeat;
/*背景圖片 靠右 靠下 不重複*/
height:5px;
/*高度5px*/
font-size:0;
/*字體大小為0，此為消除預設字體大小而產生的空間*/
position:relative;
/*絕對位置*/
right:-5px;
/*絕對位置-距離右邊-5px */
}
/*框框-中間左邊圖片*/
.ycntmod .rcl {
padding-left:5px;
/*內距離左邊5px*/
background:url(../yimg/mod_left.gif) repeat-y;
/*背景圖片 垂直重複*/
}
/*框框-中間右邊圖片*/
.ycntmod .rcr {
zoom:1;
/*層級*/
padding-right:5px;
/*內距離右邊5px*/
background:url(../yimg/mod_right.gif) right repeat-y;
/*背景圖片 靠右 垂直重複*/
}
如何移除框框呢
您檢視原始碼可以發現
每個區塊都有一個重複的css
class=”ycntmod “ 這是框框的css
id=”xxxx” 則是代表每個不同區塊，
在css中
一個頁面的id是不能有重複的
但class=”xx” 則是可以重複的
原始的css樣式中
設定的區塊css為
.ycntmod .rctop {zoom:1;background:url(../yimg/mod_nw.gif) left top no-repeat;margin-right:5px;}
.ycntmod .rctop div {background:url(../yimg/mod_ne.gif) right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url(../yimg/mod_sw.gif) left bottom no-repeat;margin-right:5px;}
.ycntmod .rcbtm div {background:url(../yimg/mod_se.gif) right bottom no-repeat;height:5px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:5px;background:url(../yimg/mod_left.gif) repeat-y;}
.ycntmod .rcr {zoom:1;padding-right:5px;background:url(../yimg/mod_right.gif) right repeat-y;}
您再將原本設定的圖片與距離高度等改掉設定即可修改後的Css為/*內文標題*/
.msgcontent h3{
background-color: #FFFFEC;
padding: 7px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FCF1B6;
}
/*去除框框*/
.ycntmod .rctop {
margin-right:0px;
background-image: none;
}
.ycntmod .rctop div {
height:0px;
font-size:0;
position:relative;
right:-5px;
background-image: none;
}
.ycntmod .rcbtm {
zoom:1;
margin-right:0px;
background-image: none;
}
.ycntmod .rcbtm div {
height:0px;
font-size:0;
position:relative;
right:-5px;
background-image: none;
}
.ycntmod .rcl {
padding-left:0px;
background-image: none;
}
.ycntmod .rcr {
padding-right:0px;
background-image: none;
} 貼入您的blog css中就完成囉
那如何加入一個按鈕
只要一按
邊欄會變黯
(這可突顯中間主文區
簡化閱讀版面)
—在pchome雜誌看到safari有這樣的設計(在網址欄中)–但下載後並無此東東(googlechrome是一顆書籤星星)