close
模版: gery
樣式名稱:My Pretty World  作者: CSSstyle
修改效果:
修改成版面會隨視窗大小縮放
不過因為此版面之底圖是固定大小的,所以在縮放時可能會出現底圖不夠大或是底圖太大秀不完全的情況
這是活動式的版面的缺點.....遇到固定大小底圖時會不好處理
剩下的小地方應該都是要視使用者的偏好做細項修改的了
以下是修改後的圖及css code只拍版面變窄時的外觀:


/*
*適合各種瀏覽器和螢幕解析度
*歡迎修改
*http://blog.pixnet.net/CSSstyle
*/



body{color:#fff;font-family:arial;text-align:left;letter-spacing:1px;width:100%
padding:0px;margin:0px;background:url(http://p0.p.pixnet.net/albums/userpics/0/0/235200/1162444041.gif) left top repeat #f6e4e6;}

a{color:#999;font-family:arial;text-decoration:none;}
a:hover{color:#f4a3b0;}
p {line-height:160%;}
br{letter-spacing:normal;}
input{color:#fff;background:#f4a3b0;border:none;}
select{color:#999;background:none;width:180px;}
#Container{width:80%;margin:0px 0px 0px 100px;background:#fff;}

/*橫幅*/
#Top{height:284px;
background:url(http://p0.p.pixnet.net/albums/userpics/0/0/235200/1162444036.gif) left top no-repeat;}

/*標題*/
#BlogHeader{text-align:left;
width:400px;position:relative;top:20px;left:20px;}
#BlogHeader a{color:#fffce1;font-size:13px;}
#BlogHeader a:hover{color:#fff;}

/*描述*/
#BlogDescr{color:#fff;font-size:12px;text-align:left;
width:400px;position:relative;top:40px;left:40px;}

/*地盤*/
#Topmenu{font-size:12px;margin-left:20px;}
#Topmenu a{color:#f4a3b0;}
#Topmenu a:hover{color:#999;}

#Sidebar-l{float:right;width:22%;padding-left:20px;margin:20px 10px 0px 0px;
border-left:#fff9de 1px solid;}
#Sidebar-r{float:right;width:22%;padding-left:20px;margin:20px 10px 0px 0px;
border-left:#fff9de 1px solid;}
.Sidetitle h4{color:#fdbbae;font-size:12px;font-weight:normal;
padding:12px 0px 0px 35px;margin:0px;height:34px;
background:url(http://p0.p.pixnet.net/albums/userpics/0/0/235200/1162444048.gif) center top no-repeat;}
.Sidebody,.Sideblock{width:90%;color:#ccc;font-size:11px;margin-bottom:30px;}
#Sidebar-l img,#Sidebar-r img{border:0px;}

/*文章*/
#Content {float:left;width:70%;   
padding:0px;margin:20px 0px 0px 10px;
color:#666;font-size:12px;text-align:left;}     
.mainEntryTitle h3{color:#f9788d;font-size:16px;font-weight:normal;
padding:8px 0px 0px 45px;height:44px;
background:url(http://p0.p.pixnet.net/albums/userpics/0/0/235200/1162444049.gif) center top no-repeat;}
.date {color:#ffcdd3;font-size:11px;position:relative;top:-45px;left:45px;}
.footer{color:#999;font-size:11px;text-align:right;margin-bottom:50px;
border-bottom:#fff9de 1px solid;}
.trackback_url{color:#999;font-size:11px;text-align:right;background:#fff;border:none !important;}

/*回應*/
#Comments{width:75%;margin:0px 0px 50px 100px;}
.commentTitle{color:#ccc;font-size:16px;font-weight:normal;
padding:12px 0px 0px 44px;height:44px;
background:url(http://p0.p.pixnet.net/albums/userpics/0/0/235200/1162444042.gif) left top no-repeat;}
.commentheader{color:#ffc9d2;}
.commentcontent{color:#ffc9d2;padding-bottom:5px;border-bottom:#e5e5e5 1px solid;}
.commentposterinfo{color:#999;font-size:11px;}
.commentposterinfo a img{filter:alpha(opacity=30);-moz-opacity:0.3;}
.commentposterinfo a:hover img{filter:alpha(opacity=100);-moz-opacity:1;}

/*月曆*/
.calMonthCurrent{color:#fdbbae;font-weight:normal;}
.calMonthHeader{}
.calendarToday a{color:#fdbbae;}
table.calMonth{color:#ccc;width:200px;}
thead,tbody {text-align:left;}
table.calYear tbody tr td {vertical-align:top;}

#pagefooter{width:80%;height:81px;padding:0px;margin:0px;
background:url(http://p0.p.pixnet.net/albums/userpics/0/0/235200/1162444043.gif) left top no-repeat;}

/*版權和登出*/
#Bottommenu,#Bottom{color:#999;font-size:11px;text-align:center;margin-top:10px;}
#Bottom a img{filter:alpha(opacity=30);-moz-opacity:0.3;}
#Bottom a:hover img{filter:alpha(opacity=100);-moz-opacity:1;}

/*隱藏*/
.commentheader img,.Upgrade,.userImg{display:none;}
.commentposterinfo br{display:none;}
arrow
arrow
    全站熱搜

    acmanlab 發表在 痞客邦 留言(3) 人氣()