201010011635[新版CSS樣版]向日葵, 固定寬度, 兩欄式右欄

現在什麼最夯?嗯,『夯』字好像比不上『郝』,所以現在最『郝』的是花博相關的東東,所以我也跟上時代潮流,來設計成跟花博相關的部落格樣版好了。首先推出向日葵版。

這個樣版是從wordpress樣版拿來改的:http://www.free-css-templates.com/preview/theme38/wp-preview,將它改成可以套用於Xuite Blog中↓

有套用的部落格為:http://blog.xuite.net/jeanson61/test4,不過日後可能又被我改成其他版本,因為不可能每設計一個樣式就開一本部落格,那會開出一缸子的部落格啦。所以有興趣可以將下面的語法貼進[面板樣式(佈景+CSS)]中的[自定CSS樣式]中,可以先用預覽看一看,不喜歡就不要套用。

CSS語法如下,歡迎自由取用!!,如果套用有bug或是不懂的,就留言提問啦。

/*=============================================================*/

/*主體*/
html{
 scrollbar-face-color:#E9DBCB;
 scrollbar-highlight-color:#CDB7B5;
 scrollbar-shadow-color:#CDB7B5;
 scrollbar-3Dlight-color:#E9DBCB;
 scrollbar-arrow-color:#CDB7B5;
 scroll-track-color:#E9DBCB;
 scroll-darkshadow-color:#E9DBCB;
}
ul {padding:0;margin:0;}
li {list-style-position:inside}
h1, h2, h3 { padding:0;margin:0; font-weight:normal;}
body{
    margin:0px 0px 0px 0px;
    text-align: center;
    background:#0D7893;
    font-family: Comic Sans MS,arial,helvetica,sans-serif;
    color: #000000;
    font-size: 14px;
   line-height:150%;
   word-wrap: break-word;
}

/*連結*/
A {
                color: #1a0902;
 text-decoration: none;
}
A:link {
                color: #966404;
 text-decoration:none;
}
A:visited {
 color: #ffc20e;
 text-decoration:none;
}
A:active {
 color: #FFFFFF;
 text-decoration: underline;
}
A:hover {
 color: #000000;
 text-decoration: underline;
}

/*定位框*/
wrap {
}
#container {
 position:relative;
 text-align: left;
 width:955px;
 margin:auto;
 align:center;
 background:#FFFFFF url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/38443387/1.gif) top center no-repeat;
 padding-top: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
/* background-color: #7aa719;*/
}
  
/*檔頭*/
#banner{
 margin: 0px;
 padding: 0px;
 align:center;
 width:100%;
 height: 300px;
}

/*左欄*/
#linksLeft{
 display: none;
}

/*右欄*/
#linksRight{
 width: 260px;
 position: relative;
 float: right;
 right: 20px;
 background-color: #FFFFFF;
 z-index: 2;
margin-top: 20px;
}
 
/*中間欄*/
#mid{
 position:relative;
 width: 635px;
 float:left;
 left:20px;
 margin: 0px;
 margin-top: 20px;
 padding: 0px;
}
/*檔尾*/
#footer{
 clear: both;
 text-align:center;
 background:#0D7893;
 font-size: 12px;
 padding:10px 0px 0px 0px;
 color:#FFFFFF;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 line-height: 16px;
height:79px; width:100%;
}
#footer a:link, #footer a:visited, #footer a:active {
 color:#fff;
}
#footer a:hover {
    color: #000000;
 text-decoration: underline;
 }
/*欄位名稱*/
.sidetitle, .personaltitle {
 padding-top: 6px;
 padding-left: 10px;
 background: url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/38443387/8.gif) no-repeat top left ;
 color: #FFFFFF;
 text-align:left;
 font-family:Comic Sans MS,arial,helvetica,sans-serif;
 font-weight:bold; font-size:15px;
 letter-spacing:0.1em;
 height: 35px;
 list-style:none;
}
/*欄位內容*/
.side{
 font-size:14px;
 font-weight:normal;
 line-height:140%;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 padding:4px 10px 20px 10px;
}
.side li{
 text-indent: -3ex;
 margin-left: 3ex;
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.side A, .side A:link {
color: #494955;
}
.side A:visited {
color: #9292aa;
}
.side A:active, .side A:hover {
color: #242400;
background: url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/38443387/9.gif) repeat-y;
}

/*空白*/
.spacer{
 clear:both;
}
/******************************************/
/*檔頭class*/

/*日誌名稱*/
.blogname{
 width: 700px;
 font-size: 22px;
 font-weight: bold;
 valign:bottom;
 color:#ffd19d;
 margin-left: 230px;
 margin-top: -30px;
 float:left;
 text-align:left;
}
.blogname a:link {
 color: #492400;
}
.blogname a:visited {
 color: #492400;
}
.blogname a:hover {
 color: #ffc20e;
}
.blogname a:active {
 color: #ffc20e;
}

/*今日心情*/
.blogemotion{
 
}
/*日誌描述*/
.description{
 width: 700px;
 float: left;
 font-size: 15px;
 color: #8c646c;
 valign:bottom;
 margin-left: 230px;
 text-align:left;
}

/*Logo*/
.logo{
 visibility:visible;
width: 215px;
padding-top: 35px;
padding-left: 10px;
}

 

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

/*文章外框*/
#content{
    margin: 0px;
}
/*文章標題列*/
.title{
 width:100%;
 height:54px;
 background:url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/38443387/3.gif)  no-repeat;
}
/*文章標題名稱*/
span.titlename {
 display: block;
 font-size:17px;
 color: #FFFFFF;
 font-weight:bold;
 padding-left: 20px;
 padding-top: 10px;
}
span.titlename  a: link {
 color: #FFFFFF;
}
span.titlename  a: active {
 color: #FFFFFF;
}
span.titlename  a: hover {
 color: #FFFFFF;
}

/*文章日期*/
span.titledate{
 float: right;
 text-align: right;
 padding-right: 20px;
 padding-top:10px;
 font-family: Comic Sans MS, Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px; font-weight:normal;  line-height:12px;color::#FFFFFF;
}

/*文章評價列*/
.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 0px 0px 20px;
width: auto;
 font-size: 12px;
 color: #000;
}

/*文章分類*/
span.category{
background: url(http://s.blog.xuite.net/_image/skin/list/bulletContentArticle.gif) no-repeat;
float: right;
margin: 5px;
width: auto;
padding: 2px 0px 0px 20px;
}
/*文章主體*/
.blogbody{
 width:100%;
 color: #271305;
 padding: 0px 0px 0px 0px;
 margin: 0 5px 10px 5px;
font-size:17px;
line-height: 150%;
overflow-x: auto;
}
.blogbody p {
padding : 0px 10px 0px 10px;
}

/*作者列*/
.posted{
 width:100%;
 text-align:right;
 color:#999;
 font-family: "細明體";
 font-size: 13px;
 font-weight: normal;
clear: both;
background: #fff6b3;
}
/*上下文章*/
.selectbar{
 width:100%;
 text-align:center;
}
/*引用列*/
.trackbacktitle{
 width:100%;
 margin-top:20px;
 margin-bottom:5px;
 font-size: 12px;
 color:#000;
 height:24px;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-top-style: dotted;
 border-bottom-style: dotted;
 border-top-color: #3A1E0A;
 border-bottom-color: #3A1E0A;
background: #fff6b3;
}

/*引用列項目符號*/
.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: #333;
}
/*引用日期*/
.trackbackdate{
 width:100%;
 text-align:right;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 color: #333;
}
/*引用內容*/
.trackbackcontent{
 width:100%;
 line-height:150%;
 margin: 5px 5px 10px 5px;
 color: #333;
 border-bottom-width: 1px;
 border-bottom-style: dotted;
 border-bottom-color: #996600;
}
/*留言列*/
.comment{
 width:100%;
 font-size: 12px;
 color: #333;
 height:24px;
 margin-top:20px;
 padding-top:5px;
 padding-bottom:5px;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-top-style: dotted;
 border-bottom-style: dotted;
 border-top-color: #3A1E0A;
 border-bottom-color: #3A1E0A;
background: #fff6b3;
}
/*留言名稱*/
span.commenttitle{
  background: transparent url(http://s.blog.xuite.net/_image/bulletMessageList.gif) no-repeat;
 padding-top: 3px;
        padding-left: 20px; 
}

/*留言按鈕*/
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; height:13px;
 color: #AEAEAE;
}
/*留言內容*/
.commenttext{
 width:100%;
 margin-top:10px;
 margin-bottom:10px;
 color: #333;
font-size:14px;
}
/*留言編輯按鈕*/
.commentedit{
 width:100%;
 border-bottom:1px dotted #333;
}
/*留言者信箱*/
span.email{
 
}

/******************************************/
/*左欄class*/
/*關於我*/
/*照片*/
.avatarPhoto{
 text-align:center;
}
/*帳號*/
.avatarID{
}
/*我的描述*/
.avatarDesciption{
 color: #333333;
}
/*關於我按鈕*/
.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{

}

.categorySide{
}


/*日曆*/
.calendarTitle li{
 list-style:none;
}
.calendarTitle{
}
.calendarSide li{

}
.calendarSide{
}
/*日曆table*/
.calMonth{
 width:95%;
}
/*日曆首列*/
.calMonthNav{
}
/*日曆上個月*/
.calMonthBackward{
}
/*日曆目前顯示年月*/
.calMonthCurrent{
    font-size: 12px;
 font-weight: bold;
 color: #000000;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
}
/*日曆下個月*/
.calMonthForward{
    color: #203A14;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 12px;
}
/*日曆星期列*/
.calMonthHeader{
 color: #000;
text-align:center;
}
/*日曆日欄*/
.calMonthDay{
    font-size: 10px;
 color: #676767;
 text-align:center;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
}
/*日曆今日日期*/
.calMonthToday{
    font-size: 11px;
    text-align:center;
}
/*日曆假日日期*/
.calholiday{
 font-size: 11px;
 color: #FF3300;
 text-align:center;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
}
.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{
margin-left:20px;
color:#804000;
}
/*已建立的日誌*/
.bloglistTitle li{
 list-style:none;
}
.bloglistTitle{
}
.bloglistSide li{

}

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

/*自由欄位*/
.customTitle li{
 list-style:none;
}
.customTitle{
}
.customSide{
}
/*我的親友團位*/
.myChannelTitle li{
 list-style:none;
}
.myChannelTitle{
 list-style:none;
}
.myChannelFrame {
}
/*我的發燒文*/
.hotArticleTitle li{
 list-style:none;
}
.hotArticleTitle {
 list-style:none;
}
.hotArticleSide {
}
/*日誌使用資源*/
.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{

}
.articleSide{
}
/*最新留言*/
.messageTitle li{
 list-style:none;
}
.messageTitle{
}
.messageSide li{

}
.messageSide{
 padding:5px;
 text-indent: -3ex;
 margin-left: 3ex;
}
.date {
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 color: #7A75B9;
}
/*參觀人次統計*/
.countTitle li{
 list-style:none;
}
.countTitle{
}
.countSide{
}
/*我的訂閱*/
.rssrollTitle li{
 list-style:none;
}
.rssrollTitle{
}
.rssrollSide li{
}
.rssrollSide{
}
.backbtn li{
  list-style-image:url(http://s.blog.xuite.net/_image/blog038.gif);
  }
.backbtn{
  text-align:right;
}
.morebtn li{
  list-style-image:url(http://s.blog.xuite.net/_image/blog037.gif);
  }
.morebtn{
 text-align:right;
}
/*日誌評價*/
.rankTitle li{
 list-style:none;
}
.rankTitle{
}
.rankSide{
}
/*已建立的相簿*/
.albumTitle li{
 list-style:none;
}
.albumTitle{
}
.albumSide{
}
/*最愛連結*/
.linkTitle li{
 list-style:none;
}
.linkTitle{
}
.linkSide li{
}
.linkSide{
}
.footer_text {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 line-height: 14px;
 color:#fff;
}
.content_text {
 width: 95%;
 padding-left: 0px;
 padding-top: 10px;
}

 

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

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

.pTitle{
}

/* Applied by Chyuko@Xuite.net */

/*我的影音*/

.pvlog ul{
    list-style-type:none;
    margin:0 0px;
    padding:0px 2px 0px 20px;
    word-wrap: break-word;
    display: block;
    float:left;
}

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

.page {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    color:  #B1987C;
    line-height: 24px;
    vertical-align:middle;
}
.page a:link, .page a:visited, .page a:active {
    font-size: 12px;
    color:  #B1987C;
    line-height: 24px;
    text-decoration: none;
}
.page a:hover {
    font-size: 12px;
    color:  #B1987C;
    line-height: 24px;
    text-decoration: underline;
}

/*留言回覆邊框*/
.reply_info{
 background:url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/17485837/19.gif) no-repeat;
 padding:50px 5px 5px 5px;
 margin:10px 10px 10px 20px;
 width:95%;
 border:1px dotted #3A1E0A;
}

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

/*最愛日誌*/
.LoveBlogTitle li{
    list-style:none;
}
.LoveBlogTitle{
}
.LoveBlogSide{
   text-align:center;
}
.LoveBlogSide select{
 color: #333333;
 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 0px 0px 20px;
width: auto;
}
/* 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:100%;padding:0px; margin:5px auto;display:block;}
#personalLink li {list-style-type:none;float:left;height:1.7em;margin:0 5px 0 5px;padding:2px 0 0 38px;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;
}

/*服務切換tab*/
#service-list{  /* 這個原名為.tab_service */
        position: absolute;
        width: 215px;
        top: 3px;
        left: 20px;
        clear: both;
}
#service-list a{ /*這個原名為.tab_service li */
        margin: 0px 1px 0px 0px;
        display: block;
        float: left;
        list-style-type: none;
        padding:3px;
        color: #ffffff;
        cursor: pointer;
        background-color: #717171;
}
#service-list li {  /* 新增加的 */
        float : left;
        margin : 0px;
        padding : 0px;
}

回應

瘋狂亂收藏家、收藏CPU、手表以及Xuiters

今天去哪玩??
天氣
累積 | 今日
loading......
訂閱狗猫電子報

輸入你的email address:

Delivered by FeedBurner

    沒有新回應!
關鍵字
Xuite電影貼紙
平均分數:0 顆星
投票人數:0
我要評分:





Powered by Xuite
Re:[台北搬家公司 ...],By 搬家公司-賴工匠 於2016-08-15
Re:[讚!!!],By blog 於2015-06-18
Re:[謝謝],By blog 於2015-06-15
Re:[[Xuite秘笈]上傳M...],By ★ㄚ進のsmile加油站★ 於2015-05-03
Re:[隨意聽App推薦],By ★ㄚ進のsmile加油站★ 於2015-05-03
Re:[新版CSS]欄位的...],By 天使的花園 於2015-04-12
Re:[[Xuite秘笈]背景...],By 天使的花園 於2015-04-05
Re:[[Xuite秘笈]背景...],By 天使的花園 於2015-04-05
Re:[名器],By 名器 於2014-12-16
Re:[棋牌游戏平台,...],By 棋牌游戏平台,网上棋牌游戏平台,棋牌游戏平台网站,易发棋牌游戏平台-228238.com 於2014-11-24
CSS樣版三欄兩欄倒數計時冬季居家黑色系右欄風水藍色語法自由欄位保健播放器浮動寬度步道如果劇團行動兒童劇夢想兩欄右iPAD裝潢CSS語法耶誕borderiPhone系統家具影音手機影音播放器家具望洋山登入問題L型邊框Pixar客廳幾何標題名稱粉紅基礎入門圖片縮小Style Information童話故事訊息中心餐廳密碼more
不顯示的自由欄位