在這麼寒冷的日子,看到這樣的圖片,就想把她拿來當部落格樣式的圖!跟大家分享~~冷~~

這個版型的大圖如下↓

要凸顯寒冬的感覺,所以找灰色調的版型來當底,這樣可以縮短樣式設計的時間,所以拿Xuite的官方樣版↓
貓咪(適用兩欄左欄),這一個來改,所以很快完成一個版型,主要改的部份在於Banner的背景圖片,以及將左欄變右欄!!
banner圖片是這一張↓,取自於www.wallcoo.com

有想套用的網友請自行服用  XD

CSS的樣式語法如下
/* ===================================================== */
/* CSS Document */
/*主體*/
html{

}

body{
 text-align: center;
 background:url(//c.blog.xuite.net/c/f/7/b/11732000/blog_4704/txt/29001649/7.gif) #ffffff fixed center top repeat-y;
 color:#999;
        font-size: 15px;
}
ul {padding:0;margin:0;}
li {list-style-position:inside}
h1, h2, h3 { padding:0;margin:0; font-weight:normal;}

/*連結*/
A {
 color: #333;
 text-decoration: none;
}
A:link {
 color: #999;
 text-decoration: underline;
}
A:visited {
 color: #999;
text-decoration: underline;
}
A:active {
 color: #999999;
 text-decoration: underline;
}
A:hover {
 color: #999999;
 text-decoration: underline;
}

/*定位框*/
#wrap {
}
#container {
 position: relative;
 text-align: left;
 width: 949px;
 margin: auto;
 padding: 0px;
 background:transparent url(//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/29372953/12.gif) no-repeat center top ;
}

   
/*檔頭*/
#banner{
 margin: 0px;
 padding: 0px;
 height: 390px;
}

/*左欄*/
#linksLeft{
 width: 210px;
 left: 0px;
 padding: 10px 0px 0px 10px;
 float: left;
 margin-left:40px;
 _margin-left:25px;

    display: none;
}

/*右欄*/
#linksRight{
 float: right;
 width: 210px;
 right: 0px;
 padding: 0px 10px 0px 0px;
 margin-right: 40px;
 _margin-right:25px;
 margin-top: 0px;
 display:inline;
}
 
/*中間欄*/
#mid{
 position: relative;
 float:left;
 width:645px;
 margin-left:40px;
 _margin-left:20px;
 display:inline;
}
/*檔尾*/
#footer{
 clear: both;
 text-align:center;
 font-size: 12px;
 padding:40px 0px 10px 0px;
 color:#999999;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 line-height: 16px;
 background-repeat: no-repeat;
 background-position: center top;
 background-image: url(//c.blog.xuite.net/c/f/7/b/11732000/blog_4704/txt/29001649/8.gif);
 height: 37px;
 background-color: #FFFFFF;
}

/*欄位名稱*/
.sidetitle, .personaltitle{
 font-size: 15px;
 list-style: none;
 background-color: #fdfdfd;
 padding: 1px 0px 1px 10px;
 font-weight: bold;
 line-height: 200%;
}
/*欄位內容*/
.side{
 font-size: 12px;
 font-weight: normal;
 line-height: 160%;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 margin: 5px 0px 15px 5px;
}
/*空白*/
.spacer{
 clear:both;
}
/******************************************/
/*檔頭class*/

/*日誌名稱*/
.blogname{
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 width: 500px;
 font-size: 20px;
 font-weight: bold;
 color: #1AB0B9;
 margin-top: 200px;
 border-left: 10px solid #999999 ;
 margin-left: 50px;
}

/*今日心情*/
.blogemotion{
 /* display: none; */
}
/*加入最愛*/
.blogfavo{
 /* display: none; */
}

/*日誌描述*/
.description{
 font-size: 13px;
 width: 500px;
 padding-top: 5px;
 margin-left: 50px;
}
/*選單列*/
.menulist{
 padding-top: 5px;
 width: 100%;
}
/*選單*/
.menu{
 position: absolute;
 right: 110px;
 top: 25px;
}

/*Logo*/
.logo{
 visibility: visible;
 width: 300px;
 margin-left: 30px;
}


/******************************************/
/*中間欄位class*/

/*文章外框*/
#content{
 
}
/*文章標題列*/
.title{
 width: 100%;
 height: 100%;
 border: 1px dotted #333333 ;
}
/*文章標題名稱*/
span.titlename{
 font-size: 17px;
 font-weight: bold;
 padding: 0px;
 line-height: 150%;
}
/*文章日期*/
span.titledate{
 display: block;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 color: #999999;
 padding: 0px;
 line-height: 150%;
}
/*文章評價列*/
.blogrank{
 width: 100%;
 line-height:200%;
 margin-top: 0px;
}
/*文章瀏覽數*/
span.counter{
background:url(http://s.blog.xuite.net/_image/skin/list/bulletCounter.gif) no-repeat;
float:right;
margin:5px;
padding:2px 0 0 20px;
width:auto;
color: #C13521;
}
/*文章分類*/
span.category{
background:url(http://s.blog.xuite.net/_image/skin/list/bulletContentArticle.gif) no-repeat;
float:right;
margin:5px;
width:auto;
padding:2px 0 0 20px;
}
/*文章標籤*/
.tags a:link{
 color: #999900;
}
.tags a:visited{
 color: #999900;
}

/*文章主體*/
.blogbody{
 overflow: hidden;
 word-wrap: break-word;
 line-height:20px;
 color: #333333;
 padding: 10px 15px 0 0;
}
.blogbody a:link{
 color: #999999;
}
.blogbody a:visited{
 color: #999999;
}
/*作者列*/
.posted{
 width: 100%;
 text-align: right;
 font-size: 13px;
 font-weight: normal;
 border-top: solid #eeeeee 1px;
 border-bottom: solid #eeeeee 1px;
 clear:both;
}
.posted a:link, .posted a:visited, .posted a:active, .posted a:hover {
 font-size: 12px;
 line-height: 24px;
 text-decoration: none;
}
/*上下文章*/
.selectbar{
 width: 100%;
 text-align: right;
 border-bottom: solid #eeeeee 1px;
}
.selectbar a:link, .selectbar a:visited, .selectbar a:active, .selectbar a:hover {
 font-size: 12px;
 line-height: 24px;
 text-decoration: none;
}
/*引用列*/
.trackbacktitle{
 width: 100%;
 margin-top: 20px;
 margin-bottom: 5px;
 font-size: 12px;
 font-style: italic;
 background-color: f6f6f6;
}

/*引用列項目符號*/
.trackbacktitle li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon31a.gif);
}
/*引用網址*/
.trackbackurl{
 width: 100%;
 padding-top: 20px;
 padding-bottom: 15px;
 text-indent: 10px;
 color: #999999;
}

/*引用日期*/
.trackbackdate{
 width: 100%;
 text-align: right;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 color: #999999;
}
/*引用內容*/
.trackbackcontent{
 width: 100%;
 line-height: 150%;
 margin: 5px 0px 10px 0px;
 color: #999999;
 border-bottom-width: 0px;
 border-bottom-style: dotted;
 border-bottom-color: #990099;
}
.trackbackcontent a:link, .trackbackcontent a:visited, .trackbackcontent a:active, .trackbackcontent a:hover {
 font-size: 12px;
 text-decoration: none;
}
/*留言列*/
.comment{
 width: 100%;
 font-size: 12px;
 margin-top: 20px;
 padding-top: 5px;
 padding-bottom: 5px;
 font-style: italic;
 background-color: #f6f6f6;
}
/*留言名稱*/
span.commenttitle{
padding-left:20px;
background:url(http://s.blog.xuite.net/_image/bulletMessageList.gif) no-repeat;
width:auto;
}
/*留言按鈕*/
span.commentbutton{
 float: right;
}
/*留言作者列*/
.author{
 width: 100%;
}
/*留言作者名稱*/
span.authorname{
}
/*留言日期*/
span.commentdate{
 float: right;
 text-align: right;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 color: #999999;
}
/*留言內容*/
.commenttext{
 overflow: hidden;
 word-wrap: break-word;
 width: 100%;
 margin-top: 10px;
 margin-bottom: 10px;
 color: #999999;
}
.commenttext-2{
 overflow: hidden;
 word-wrap: break-word;
 width: 100%;
 margin-top: 10px;
 margin-bottom: 10px;
 color: #666666;
}
/*留言編輯按鈕*/
.commentedit{
 width: 100%;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #ffffff;
}
/*留言者信箱*/
span.email{
 
}


/******************************************/
/*左欄class*/
/*關於我*/
.avatar{
 margin-top: 3px;
 padding: 5px;
 border: 1px none #93ae4f;
 margin-bottom: 10px;
}
/*照片*/
.avatarPhoto{
 text-align: center;
}
/*帳號*/
.avatarID{
}
/*我的描述*/
.avatarDesciption{
 line-height: 140%;
}
/*關於我按鈕*/
.avatarbutton{
}


/*文章分類*/
.categoryTitle li{
 /*list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCategory.gif);*/
}
.categorySide li{
 list-style-image: url();
 color: #CD9D76;
}
.categoryTitle{
}
.categorySide li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.categorySide{
}

/*日曆*/
.calendarTitle li{
 list-style: none;
}
.calendarTitle{
}
.calendarSide li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.calendarSide{
}
/*日曆table*/
.calMonth{
 width: 95%;
}
/*日曆首列*/
.calMonthNav{
}
/*日曆上個月*/
.calMonthBackward{
}
/*日曆目前顯示年月*/
.calMonthCurrent{
 font-size: 12px;
 font-weight: bold;
 color: #FF0066;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
}
/*日曆下個月*/
.calMonthForward{
 color: #0068b7;
 font-weight: bold;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 12px;
}
/*日曆星期列*/
.calMonthHeader{
 color: #fca13a;
}
/*日曆日欄*/
.calMonthDay{
 font-size: 10px;
 color: #676767;
 text-align: center;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
}
/*日曆今日日期*/
.calMonthToday{
 font-size: 14px;
 text-align: center;
}
/*日曆假日日期*/
.calholiday{
 font-size: 11px;
 color: #CC6666;
 text-align: center;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-weight: bold;
}
.calenderbutton{
 text-align: right;
}
/*搜尋文章*/
.searchTitle li{
 list-style: none;
}
.searchTitle{
}
.searchSide{
 text-align: center;
}
.searchbutton{
 text-align: center;
 padding: 2px;
}


/*我的哈拉室*/
.chatTitle li{
 list-style: none;
}
.chatTitle{
}
.chatSide{

}
/*已建立的日誌*/
.bloglistTitle li{
 list-style: none;
}
.bloglistTitle{
}
.bloglistSide li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}

.bloglistSide{
}
/*訂閱電子報*/
.epaperTitle li{
 list-style: none;
}
.epaperTitle{
}
.epaperSide{
 text-align: center;
}
.epaperbutton{
 text-align: center;
 padding: 2px;
}

/*自由欄位*/
.customTitle li{
 list-style: none;
}
.customTitle{
}
.customSide{
}
/*日誌使用資源*/
.resourceTitle li{
 list-style: none;
}
.resourceTitle{
}
.resourceSide{
 text-align: center;
}
/*留言塗鴉版*/
.paintTitle li{
 list-style: none;
}
.paintTitle{
}
.paintSide{
 text-align: center;
}

/******************************************/
/*右欄class*/
/*背景音樂*/
.musicTitle li{
 list-style: none;
}
.musicTitle{
}
.musicSide{
}
.musicbutton{
 text-align: left;
 padding: 2px;
}


/*最新文章*/
.articleTitle li{
 list-style: none;
}
.articleTitle{
}
.articleSide li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.articleSide{
}
/*最新留言*/
.messageTitle li{
 list-style: none;
}
.messageTitle{
}
.messageSide li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.messageSide{
 padding: 5px;
}
.date {
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 color: #999999;
}
/*參觀人次統計*/
.countTitle li{
 list-style: none;
}
.countTitle{
}
.countSide{
}
/*我的訂閱*/
.rssrollTitle li{
 list-style: none;
}
.rssrollTitle{
}
.rssrollSide li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.rssrollSide{
}
.backbtn li{
 list-style-image:url(http://s.blog.xuite.net/_image/blog038.gif);
  }
.backbtn{
 text-align: right;
}
.morebtn{
background:url(http://s.blog.xuite.net/_image/blog037.gif) no-repeat;
width:auto;
padding-left:20px;
float:right;
}
/*日誌評價*/
.rankTitle li{
 list-style: none;
}
.rankTitle{
}
.rankSide{
}
/*已建立的相簿*/
.albumTitle li{
 list-style: none;
}
.albumTitle{
}
.albumSide{
}
/*最愛連結*/
.linkTitle li{
 list-style: none;
}
.linkTitle{
}
.linkSide li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.linkSide{
}

/*個人項目---- 2006-5-11 Modify*/
.personallink{
 display: block;
 width: 190px;
 margin: 0px 0px 0px 0px;
}

/*關於我*/
.plink li{  
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.plink{
}

/*我的相簿*/
.pphoto li{  
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.pphoto{
}

/*加入好友*/
.pfriend li{  
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.pfriend{
}

/*我的留言板*/
.pboard li{  
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.pboard{
}

/*文章分類---- 2006-5-12 Modify*/
.pTitle li{
 list-style: none;
}

.pTitle{
}

/* Applied by Chyuko@Xuite.net */

/*我的影音*/

.pvlog ul{
 list-style-type: none;
 margin: 0px 0px 0px 0px;
 padding: 0px 2px 0px 20px;
 word-wrap: break-word;
 display: block;
 float: left;
}
.pvlog li{
 padding: 0px 0px 0px 0px;
 margin: 0px 0px 0px 0px;
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
 
.pboard{
 padding: 0px 0px 0px 0px;
 width: 90px;
}

/*下方換頁-----2007-04-02*/

.page {
 margin-bottom: 10px;
 font-size: 12px;
 line-height: 24px;
 vertical-align: middle;
 margin-top: 10px;
 border-top: solid #eeeeee 1px;
}

/*留言回覆邊框*/
.reply_info{
 width: 90%;
 padding: 1.2em;
 margin: 1.2em;
 border: solid #eeeeee 1px;
}

/*我的好友*/
.friendTitle li{
 list-style: none;
}
.friendTitle{
}
.LoveFriendSide{
 text-align: center;
}
.LoveFriendSide select{
 color: #999900;
 font-size: 11px;
 /* background-color: #FCE7E2; */
}

/*最愛日誌*/
.LoveBlogTitle li{
 list-style: none;
}
.LoveBlogTitle{
}
.LoveBlogSide{
 text-align: center;
}
.LoveBlogSide select{
 color: #999900;
 font-size: 11px;
 /* background-color: #FCE7E2; */
}
/*好文轉寄*/
span.mail{
background:url(http://s.blog.xuite.net/_image/skin/list/email_forward.gif) no-repeat;
float:right;
margin-top:5px;
padding:2px 0 0 20px;
width:auto;
}

/*我的發燒文*/
.hotArticleTitle li{
 list-style-image: none;
}

/*我的親友團*/
.myChannelTitle li{
 list-style-image: none;
}

.gText{
 color: #999999;
}
.rank{color: #838383; float:left;}

/*日誌背景音樂*/
.BackgroundMusicTitle{
}
.BackgroundMusicTitle li{
 list-style-image: none;
 list-style-type:none;
}
/*我的留言板*/
.gbookTitle{
}
.gbookTitle li{
    list-style-image: none;
 list-style-type:none;
}
/*誰拜訪過我*/
#visitorTitle{
}
#visitorTitle li{
    list-style-image: none;
 list-style-type:none;
}
/*瀏覽方式切換*/
.ArticleShowMode {
    margin-bottom:10px;
}
/*列表模式 */
.singleArticle{
}
.singleArticle ul{
   padding-left:20px;
}
.singleArticle li{
    list-style-position:inherit;
   line-height:200%;
}
/*隨機推薦文章*/
.ArticleRandomSide{
}
/*相關文章*/
#ArticleRelateSide{
}

/*服務切換tab*/
.tab_service{
 position: absolute;
 width: 250px;
 top: 65px;
 left:50px;
 clear:both;
}
.tab_service ul{
}
.tab_service li{
 margin:0 1px 0 0;
 display:block;
 float:left;
 list-style-type:none;
 padding:3px;
 color:#666666;
 cursor:pointer;
 background-color:#eeeeee;
}

#tab_select_blog{ }
#tab_select_photo{}
#tab_select_vlog{}
#tab_select_gbook{}
#tab_select_friend{}
#tab_select_card{}

/* 2009/09 新 關於我 區塊 */
#avatarContent {width:99%;text-align:center;display:block;word-break:break-all ;}
#avatarAddMe {width:96px;height:2em;margin:0 auto;}
#avatarAddMe img {float:left;}
#personalLink {height:6em;width:94px;padding:0px; margin:10px auto;display:block;}
#personalLink li {list-style-type:none;float:left;height:1.7em;margin:0 4px 0 0;padding:2px 0 0 16px;width:auto;display:block;}
#personalLink li img {margin:1px 2px 0px 0px;vertical-align:top;}
li.pblog{background:url(http://img.xuite.net/portal/common/icons/blog.gif) no-repeat center left;}
li.pphoto{background:url(http://img.xuite.net/portal/common/icons/photo.gif) no-repeat center left;}
li.pvlog{background:url(http://img.xuite.net/portal/common/icons/vlog.gif) no-repeat center left;}
li.pboard{background:url(http://img.xuite.net/portal/common/icons/gbook.gif) no-repeat center left;}
li.pfriend{background:url(http://img.xuite.net/portal/common/icons/friend.gif) no-repeat center left;}
li.plink{background:url(http://img.xuite.net/portal/common/icons/card.gif) no-repeat center left;}

/* 2009/09 新 回應 區塊 */
#commentSide{margin:4px 0px 4px 8px;padding:0px;}
li.commentBox {list-style-type:none;margin-left: 0 !important;margin-bottom: 5px;height:36px;text-indent:0 !important;}
li.commentBox img{width:32px;height:32px;border-style:solid;border-color:gray;border-width:1px;float:left;}
li.commentBox .content {margin-left: 36px;}
div.commentBody{font-size:1.2em;width:140px;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;}
div.commentAuthor{font-size:0.8em;width:140px;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;}

/* 2009/08 相關文章 */
.articleExt {
clear:both;
padding-top:10px;
border-top:1px solid #ccc;
font-size:13px;
}
/* 2009/09 推推 bookmark 區塊 */
.bookmark{
float:right;
}



隨機文章

×
網友回饋 回應:24
  • 歡迎來到隨意窩Xuite

    開啟選單瀏覽服務或以關鍵字搜尋。

     
  • 瀏覽更多精彩內容

    切換至格主其他頻道或直接搜尋。

     
  • 快速便利分享工具

    提供多種分享方式傳遞內容資訊。

     
  • 更多推薦APP

    隨意遊與隨食記app僅支援ios裝置。