[CSS樣版分享]兩欄、三欄式的素面版面 @ 狗貓的家！Xuite名稱的由來＆使用秘笈

2009-06-15 17:32 [CSS樣版分享]兩欄、三欄式的素面版面

CSS
樣版

因為網友希望簡單素雅點的CSS版型，所以這兩天利用假日Try了一下WordPress的免費版型，將它移植到Xuite Blog裡面來，當然不可能完全一樣啦，就是有點像就是了，原始網站在http://wordpress.org/extend/themes/fusion，頁面長成，我將它改成

放大的圖片如下↓

我將它套用到：http://blog.xuite.net/jeanson61/test1，[時間久一點可能被換成別的版型時，就麻煩大家自己將下面的CSS貼進自訂樣式CSS中去預覽]

其實整體跟原始的Fusion的樣式有很多不一樣，因為它們的樣式可以有比較多的變化，光是它的右邊欄位就弄很多的陰影特效↓[是.png檔，因為Xuite Blog無法上傳.png的圖片，透過小淮的提醒，我會上傳.png圖啦！]所以下面是原始圖片網址，如果圖片出不來就是它們網站有問題或是被拿掉了↓我把它上傳到Blog裡了，所以不影響啦！

但是這些在Xuite Blog的側邊欄位無法實現，第一個是.png圖片的問題，第二個是它分別是兩張圖片，所以可以動態因應右側欄位大小而改變！[Xuite版型我想要弄只能弄成固定的大小，要看有沒有CSS高手可以做到] 所以我的陰影只做了右邊，左邊的陰影就沒做了！

我花最多時間是在克服IE跟FireFox兩種不同瀏覽器的CSS差異，就是因為要讓側欄有陰影效果，所以在linkLeft與linkRight背景要有陰影圖，但是內容部份要縮小到不壓過陰影！所以就有內縮問題！Padding以及Width上的大小認知問題正是IE與FireFox最大的差異啊！

有興趣可以將這個CSS拿用享用，完整的自定樣式CSS語法如下↓[自己Copy&Paste到自訂樣式CSS中，然後選●使用自訂樣式CSS ]再按確定就可以了！

/*=======================================================*/
/*主體*/
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;
}

body{
    margin:0px 0px 0px 0px;
    text-align: center;
    background-color: #FFFFFF;
    font-family: Comic Sans MS,arial,helvetica,sans-serif;
    color: #000000;
    font-size: 15px;
    line-height:150%;
    word-wrap: break-word;
    background:#FFFFFF url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24744467/7.gif) repeat-x left 200px;
overflow-x: scroll;
}

/*連結*/
A {
color: #757c8e;
text-decoration: none;
}
A:link {
color: #757c8e;
text-decoration:none;
}
A:visited {
color: #828282;
text-decoration:none;
}
A:active {
color: #000000;
text-decoration:under-line;
}
A:hover {
color: #000000;
text-decoration:under-line;
}

/*定位框*/
#container {
position:relative;
text-align: left;
width:1000px;
margin:0px auto;
align:center;
padding: 0px 0px 0px 0px;
background: transparent url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24744467/6.jpg) repeat-x left top;
}

/*檔頭*/
#banner{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
align:center;
width:100%;
height: 225px;
}
/*選單列*/
.menulist{
padding-top:0px;
width:100%;
}
/*選單*/
.menu{
padding-top:23px;
float:right;
padding-right:230px;
color: #FFFFFF;
}
.menu a:link {
color:#FFFFFF;
}
.menu a:visited {
color: #FFFFFF;
}
.menu a:hover {
color: #FFFF00;
}
.menu a:active {
color: #FFFF00;
}

/*工具箱跟上方munu中的Xuite下拉選單 */
span.xuiteLink a:link, span.xuiteLink a:visited {
        color: #FF0000;
}
span.xuiteLink a:hover, span.xuiteLink a:active {
        color: #FFFFFF;
        background: #757c8e;
}
/*Logo*/
.logo{
visibility:visible;
        padding-left:10px;
        padding-top: 5px;
}

/*日誌名稱*/
.blogname {
width:75%;
font-size: 36px;
font-weight: bold;
color:#FFFFFF;
valign:bottom;
padding-left:10px;
padding-top:20px;
float:left;
text-align:left;
}
.blogname a:link {
color: #0000FF;
}
.blogname a:visited {
color: #FFFFFF;
}
.blogname a:hover {
color: #0000FF;
}
.blogname a:active {
color: #0000FF;
}

/*今日心情*/
.blogemotion{

}
/*日誌描述*/
.description{
width: 75%;
font-size: 15px;
color: #FFFFFF;
valign:bottom;
padding-left:10px;
float: left;
text-align:left;
}

/*左欄*/
#linksLeft{
float: left;
        width: 225px;
        margin-top: 28px;
        background: transparent url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24744467/43.png) top right no-repeat;
}

/*右欄*/
#linksRight{
        float: right;
        width: 225px;
        margin-top: -200px;
        margin-right: -20px;
        background: transparent url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24744467/43.png) top right no-repeat;
}

/*中間欄*/
#mid{
        position:relative;
        margin: 0px 230px 0px 230px;
        padding: 0px 0px 0px 0px;
}

/*檔尾*/
#footer{
clear: both;
text-align:center;
font-size: 12px;
padding:10px 0px 0px 0px;
color:#635034;
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
line-height: 16px;
height:79px; width:100%;
background-color: #FFFFFF;
}

/*欄位名稱*/
.sidetitle, .personaltitle {
        border-top : 1px solid #8c8a8c;
        border-right : 1px solid #8c8a8c;
border-bottom: 1px dashed #8c8a8c;
        border-left : 1px solid #8c8a8c;
background:#f7f7f7 url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24744467/42.gif) left repeat-x;
text-align:center;
font-family:Comic Sans MS,arial,helvetica,sans-serif;
font-weight:bold; font-size:15px;
margin: 0px 20px 0px 0px; /* 右邊留20的空白給陰影*/
        padding-top: 0px;
letter-spacing:0.1em;
height: 43px;
list-style:none;
}
.sidetitle li, .personaltitle li {
        padding-top: 10px; /*標題文字距離上方留白, 不適合放在sidetitle中 */
}
/*欄位內容*/
.side{
font-size:14px;
font-weight:normal;
line-height:140%;
font-family:Verdana, Arial, Helvetica, sans-serif;
        background: #f7f7f7;
margin:0px 20px 20px 0px; /* 右邊留20的空白給陰影, 下邊留白做為欄位間的空隔*/
        padding: 5px;
border-right: 1px solid #8c8a8c;
border-left: 1px solid #8c8a8c;
border-bottom: 1px solid #8c8a8c;
}
.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: #757c8e;
}
.side A:visited {
color: #828282;
}
.side A:active, .side A:hover {
color: #000000; text-decoration:under-line;
}

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

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

/*文章外框*/
#content{
        width : 100%;
        margin: 0px 0px 0px 0px;
}
/*單文章外框*/
.singleArticle{
        width : 100%;
        margin: 0px 0px 0px 0px;
}
/*文章標題列*/
.title{
width:100%;
height:40px;
background:url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24744467/10.gif) left top no-repeat;
padding:0px 0px 0px 0px;
        border-right: 1px solid #dedbde;
}
/*文章標題名稱*/
span.titlename{
padding-left: 50px; /* 騰出空間顯出底圖的放大鏡 */
       width: 80%; !important width: 100%;
font-size:17px;
color:#0066FF;
font-weight:bold;
}

/*文章日期*/
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: #838383;
}

/*文章評價列*/
.blogrank{
width: 100%;
line-height:200%;
margin-top: 0px;
padding: 0px 0px 0px 0px;
border-left: 1px solid #dedbde;
border-right: 1px solid #dedbde;
}

/*文章瀏覽數*/
span.counter{
float:right;
margin-top:0px;
font-size: 12px;
color: #6F4829;
margin-right:20px;
}
/*文章瀏覽數項目符號*/
span.counter li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCounter.gif);
}
/*文章分類*/
span.category{
float:right;
margin-top:0px;
padding-right:20px;
}

/*文章分類項目符號*/
span.category li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletContentArticle.gif);
}
/*標籤, 評分內縮*/
div.tags, span.rank {
padding-left: 20px; /*左側留白 */
}
/*文章主體*/
.blogbody{
width:100%;
color: #271305;
margin: 0px 0px 20px 0px;
font-size:17px;
text-align: justify;
line-height: 150%;
border-left: 1px solid #dedbde;
border-right: 1px solid #dedbde;
border-bottom: 1px solid #dedbde;
        overflow-x: scroll;
}
*html .blogbody {overflow-x: auto;}
*+html .blogbody {overflow-x: auto;}
.blogbody p {
padding: 0px 20px 0px 20px; /*兩側留白, 不在blogbody裡設, 因為IE&FF的padding差異 */
        align: justify;
}
.fullpost {
        padding-left: 20px;
}
.morebtn li{
        list-style-image:url(http://s.blog.xuite.net/_image/blog037.gif);
}
.morebtn{
        padding-right: 20px;
        text-align:right;
}
#owner_button, .articleExt{
        padding-left: 20px;
}

/*作者列*/
.posted {
width:95%;
text-align:right;
color:#999;
font-family: "細明體";
font-size: 15px;
font-weight: normal;
padding-right:20px;
}
.posted a {font-family: "細明體"; font-size: 15px;}

/*上下文章*/
.selectbar{
width:100%;
text-align:center;
        line-height: 150%;
}
/*引用列*/
.trackbacktitle{
width:100%;
font-size: 12px;
color:#000;
height:31px;
        background: url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24744467/26.jpg) repeat;
        border-left: 1px solid #dedbde;
        border-right: 1px solid #dedbde;
}

/*引用列項目符號*/
.trackbacktitle a{
padding: 10px 0px 5px 20px; /* 留白padding改到次層 */
}
/*引用網址*/
.trackbackurl{
width:100%;
padding: 5px 0px 5px 0px;
text-indent:10px;
color: #333;
        border-left: 1px solid #dedbde;
        border-right: 1px solid #dedbde;
        border-bottom: 1px solid #dedbde;
}
/*引用日期*/
.trackbackdate{
width:100%;
text-align:right;
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
font-size: 11px;
color: #333;
}
/*引用內容*/
.trackbackcontent{
width:100%;
line-height:150%;
padding: 0px 20px 0px 20px;
color: #333;
        border-bottom: 1px dashed #dedbde;
}
/*留言列*/
.comment{
width: 100%;
font-size: 12px;
color: #333;
height:31px;
        background: url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24744467/26.jpg) repeat;
        border-left: 1px solid #dedbde;
        border-right: 1px solid #dedbde;
}

/*留言名稱*/
span.commenttitle{

}

/*留言名稱項目符號*/
span.commenttitle li{
list-style-image:url(http://s.blog.xuite.net/_image/bulletMessageList.gif);
padding-top: 3px;
        padding-left: 20px;
}
/*留言按鈕*/
span.commentbutton{
float:right;
        padding-top: 3px;
        padding-right:20px;
}
/* 留言訊息區塊 */
.item_message {
        border-left: 1px solid #dedbde;
        border-right: 1px solid #dedbde;
        border-bottom: 1px solid #dedbde;
}
/*留言作者列*/
.author{
width:93%;height:13px;
padding: 0px 20px 0px 20px;
}
*html .author { width: 100%; }
*+html .author { width: 100%; }

/*留言作者名稱*/
span.authorname{
}
/*留言日期*/
span.commentdate{
width:100%; height:13px;
display: block;
float: top;
text-align:left;
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
font-size: 11px;
color: #AEAEAE;
}

/*留言內容*/
.commenttext{
width: 93%;
padding: 5px 20px 5px 20px;
color: #333;
font-size:14px;
}
*html .commenttext { width: 100%;overflow-x: auto; }
*+html .commenttext { width: 100%;overflow-x: auto; }

/*留言編輯按鈕*/
.commentedit{
width:93%;
padding: 5px 20px 5px 20px;
border-bottom: 1px dashed #dedbde;
}
*html .commentedit { width: 100%; }
*+html .commentedit { width: 100%; }

/*留言者信箱*/
span.email{

}
/*留言回覆邊框*/
.reply_info{
  width: 95%;
        background:url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24744467/37.gif) no-repeat;
        padding:28px 5px 5px 5px;
border:1px dotted #3A1E0A;
}
*html .reply_info { width: 100%; }
*+html .reply_info { width: 100%; }

/******************************************/
/*左欄class*/
/*關於我*/
.avatar{
margin:0px 20px 20px 0px;
        padding: 5px;
border-right: 1px solid #8c8a8c;
border-left: 1px solid #8c8a8c;
border-bottom: 1px solid #8c8a8c;
        background: #f7f7f7;
}
/*照片*/
.avatarPhoto{
text-align:center;
}
/*帳號*/
.avatarID{
}
/*我的描述*/
.avatarDesciption{
color: #333333;
display:none;
}
/*關於我按鈕*/
.avatarbutton{
        display:none;
}

/*文章分類*/
.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{
width:100%;
}
.calendarSide li{

}
.calendarSide{
        width:100%;
}
/*日曆table*/
.calMonth{
        width: 100%;
}
/*日曆首列*/
.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;
}
/*日誌評價*/
.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:#333;
}
.content_text {
width: 95%;
padding-left: 0px;
padding-top: 10px;
}

.footer_text a:link, .footer_text a:visited, .footer_text a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
color:#333;
}
.footer_text a:hover {
color: #fff;
text-decoration: none;
}

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

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

/*加入好友*/
.pfriend li{
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.plink A, .plink A:link, .pfriend A, .pfriend A:link {
        color: #757c8e;
        font-size:14px;
}
.plink A:visited, .pfriend A:visited {
        color: #828282;
        font-size:14px;
}
.plink A:active, .pfriend A:hover {
        color: #000000;
        font-size:14px;
}

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

.pTitle{
}
/*下方換頁-----2007-04-02*/
.page {
        font-size: 12px;
        color: #B1987C;
        line-height: 50px;
        vertical-align:bottom;
        height: 50px;
}
.page a:link, .page a:visited, .page a:active {
        font-size: 15px;
        color: #B1987C;
        text-decoration: none;
}
.page a:hover {
        font-size: 15px;
        color: #B1987C;
        text-decoration: underline;
}

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

/*最愛日誌*/
.LoveBlogTitle li{
        list-style:none;
}
.LoveBlogTitle{
}
.LoveBlogSide{
        text-align:center;
}
.LoveBlogSide select{
color: #333333;
font-size:11px;
}
/*好文轉寄*/
span.mail{
float:right;
margin-top:15px;
}
/*好文轉寄項目符號*/
span.mail li{
list-style-image:url(http://s.blog.xuite.net/_image/skin/list/email_forward.gif);
}
/*我的相簿*/
.pphoto{
        position:absolute;
        top:169px; left:210px;
        WIDTH: 100px; height:31px;
        background: url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24744467/25.jpg) top left no-repeat;
        text-align: center;
}

/*我的影音*/
.pvlog {
        position:absolute;
        top:169px;left:110px;
        WIDTH: 100px;height:31px;
        background: url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24744467/25.jpg) top left no-repeat;
        text-align: center;
}
/*我的留言版*/
.pboard{
        position:absolute;
        top:169px; left:10px;
        WIDTH: 100px;height:31px;
        background: url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24744467/25.jpg) top left no-repeat;
        text-align: center;
}

.pboard li {
        list-style:url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24742754/0.gif);
        font-size:13px;
        line-height:150%;
        list-style-position: inside;
        margin-left: 5px;
        margin-top: 10px;
}
.pphoto li {
        list-style:url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24742754/1.gif);
        font-size:13px;
        line-height:150%;
        list-style-position: inside;
        padding-left: 5px;
        margin-top: 10px;
}
.pvlog li {
        list-style:url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/24742754/2.gif);
        font-size:13px;
        line-height:150%;
        list-style-position: inside;
        padding-left: 5px;
        margin-top: 10px;
}
.pphoto a, .pvlog a, .pboard a,
.pphoto a:link, .pvlog a:link, .pboard a:link ,
.pphoto a:visited, .pvlog a:visited, .pboard a:visited,
.pphoto a:active, .pvlog a:active, .pboard a:active {
        color: #828282;
}
.pphoto a:hover, .pvlog a:hover, .pboard a:hover {
        color: #757c8e; font-weight:bold; text-decoration:underline;
}