既然推出第一與二版,反正手上還有類似系列的圖片,索性再推出另外一個色系,藍綠系的版面↓

CSS語法在下面,我這次特別將有更動的部份用紅色粗體標出來,後面也再接著寫一段註解說明,方便大家自行更改↓
=============================================================================
/* CSS Document */
/*主體*/
html{
 scrollbar-face-color:#75C4C0;
 scrollbar-highlight-color:#75C4C0;
 scrollbar-shadow-color:#1E6E69;
 scrollbar-3Dlight-color:#1E6E69;
 scrollbar-arrow-color:#1E6E69;
 scroll-track-color:#75C4C0;
 scroll-darkshadow-color:#75C4C0;  
/*滑鼠捲軸的顏色變更*/
cursor : url(//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/4702563/39.gif), pointer;
}

body{ 
 margin:0px 0px 0px 0px;
 text-align: center;
 background-image:url(http://s.blog.xuite.net/_image/skin/background/10038/blogBg_1.gif); /*背景底圖*/
 background-attachment:fixed;
 background-repeat:no-repeat;
 font-family: Comic Sans MS,arial,helvetica,sans-serif;
 color:#185a56; /*基本文章內文及整體日誌的字體顏色*/
}
   
/*連結*/
A {
 color: #185a56; /*基本字體顏色*/
 text-decoration: none;
}
A:link {
 color:#3c5f01; /*可連結文字的字體顏色*/
 text-decoration:none;
 cursor : url(//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/4702563/46.gif), pointer;
}
A:visited {
 color:#5a2104; /*可連結文字已經被點閱過的字體顏色*/
 text-decoration:none;
}
A:active {
 color: #E2FF58; /*可連結文字被選擇時的字體顏色,我也不太懂*/
 text-decoration:none;
}
A:hover {
 color: #54260f; /*可連結文字當滑鼠移動到文字上時的字體顏色*/
background:#c0c0c0;border-color:#dddddd;border-style:outset;
 text-decoration:none;
 font-weight: bolder;
 cursor : url(//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/4702563/46.gif), pointer;
}

/*定位框*/
#container {
        position:relative;
        text-align: left;
 behavior:expression(this.style.width =  (document.documentElement.offsetWidth<1200)?"1200px":"100%");
 min-width:1200px; /*版面的寬度為多少,窄版建議為970*/
 padding:0px 0px 0px 0px;
 margin:0px auto;
}
   
/*檔頭*/
#banner{
 margin: 18px 0px 0px 25px;
 height: 250px;  /*Banner檔頭,日誌天空版面的高度為多少*/
 background-image:url(//c.blog.xuite.net/c/f/7/b/11732000/blog_102/txt/13190764/0.jpg); /*Banner檔頭的圖片網址*/
 background-repeat:repeat-x;
}

/*左欄*/
#linksLeft{
 position:absolute;
 left:25px;
 width: 210px;
 margin-top: 0px;
}

/*右欄*/
#linksRight{
 position:absolute;
 right:25px;
 width: 210px;
 margin-top: 0px;
}
 
/*中間欄*/
#mid{
 position:center;
 margin: 0px 235px 0px 235px;
 padding: 0px 0px 0px 0px;
/* border: #BB6B1E  1px solid;*/
 text-align:left;
 z-index:0;
 overflow:visible;
}

/*檔尾*/
#footer{
 clear: both;
 text-align:center;
 font-size: 13px;
 color:#5B6525;
 line-height: 16px;  
}

/*欄位名稱*/
.sidetitle, .personaltitle{
 padding:2px;
 border: #185a56 1px solid; /*左右欄位的欄框顏色*/
 background:#fac6b8;
 font-weight:bold;
 background-image:url(//c.blog.xuite.net/c/f/7/b/11732000/blog_102/txt/13190764/1.jpg*左右欄位的標題欄框內的背景底圖*/);/
 color:#54260f; /*左右欄位的標題欄框內的文字顏色*/
 letter-spacing:0.1em;
 font-size:15px;
 margin-top:5px;
 text-align: left;
}
/*欄位內容*/
.side, .avatar{
 background:;
 border: #185a56 1px solid; /*左右欄位的欄框顏色*/
 font-size:13px;
 font-weight:normal;
 line-height:140%;
 padding:4px;
 text-align: left;
}
/*空白*/
.spacer{
 clear:both;
}
/******************************************/
/*檔頭class*/

/*日誌名稱*/
.blogname{
 font-size: 22px;
 font-weight: bold;
 color: #455236;
 padding-left:20px;
 padding-top:120px;
 height: 170px;
 width: 800px;
 background-image:url(//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/3762747/3762747_6.gif);
 background-repeat:no-repeat;
 background-position: 30px 20px;
 vertical-align:bottom;
}

/*今日心情*/
.blogemotion{
 visibility:hidden;
}

/*加入最愛*/
.blogfavo{
 position:absolute; top:22px; left:245px;
}

/*日誌描述*/
.description{
 font-size: 15px;
 color:#495F29;
 padding-left:10px;
 visibility:hidden;
}
/*選單列*/
.menulist{
 padding-top:5px;
 width:100%;
}
/*選單*/
.menu{
 padding-top:5px;
 float:left;
 padding-left:310px;
}
/*Logo*/
.logo{
 /*visibility:hidden; */
 position:absolute; top:10px; left:1px;
}

/*文章外框*/
#content{
 padding: 3px;
 margin: 3px;
 background-color:;
 border: #185a56 5px solid; /*中間文章區塊的欄框顏色*/
}

/*文章標題列*//*引用列*//*引用網址*//*留言列*/
.title, .trackbacktitle, .trackbackurl, .comment{
 width:100%;
 font-size: 12px;
 background: #c8f0f0; /*文章標題列,引用列,引用網址,留言列的背景顏色*/
 padding-top:5px;
 background-image:url(//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/3848289/3848289_12.gif); /*文章標題列,引用列,引用網址,留言列的背景圖片*/
 background-repeat:no-repeat;
 height:30px;
 border-bottom:1px solid #185a56; /*文章標題列,引用列,引用網址,留言列下方的框線顏色*/
}
/*引用列*//*留言列*/
.trackbacktitle, .comment{
 margin-top:5px;
 margin-bottom:5px;
 border-top:1px dotted #185a56; /*引用列,留言列下方的框線顏色*/
 position:relative;
}
/*引用網址*/
.trackbackurl{
 background-image:none;
 padding-bottom:10px;
}

/*文章標題名稱*/
span.titlename{
 font-size:15px;
 color: #54260f; /*文章標題列內文字的顏色*/
 font-weight:bold;
 padding-left:5px;
}
/*文章評價列*/
.blogrank{
 width:100%;
 line-height:200%;
 margin-top:10px;
}
/*文章瀏覽數*//*文章分類*/
span.counter, span.category{
 float:right;
 margin-top:2px;
 font-size: 12px;
 color: #999999;
}

/*文章瀏覽數項目符號*/
span.counter li{
 list-style-image:url(http://s.blog.xuite.net/_theme/skin/list/bulletCounter.gif);
}

/*文章分類項目符號*/
span.category li{
 list-style-image:url(http://s.blog.xuite.net/_theme/skin/list/bulletContentArticle.gif);
}
/*文章主體*/
.blogbody{
 width:100%;
 margin-top:15px;
 font-size: 15px;
 word-wrap: break-word;
}
/*作者列*/
.posted{
 width:100%;
 text-align:right;
}
/*上下文章*/
.selectbar{
 width:100%;
 text-align:center;
}

/*文章日期*//*引用日期*//*留言日期*//*最新留言*/
span.titledate, .trackbackdate, span.commentdate, .date {
 text-align:right;
 font-size: 11px;
 color: #7A75B9;
}
/*引用日期*//*留言日期*/
.trackbackdate, span.commentdate {
 width:100%;
}
/*文章日期 */
span.titledate{
 float:right;
 padding-right:10px;
}

/*引用內容*//*留言內容*/
.trackbackcontent, .commenttext{
 width:100%;
 line-height:150%;
 word-wrap: break-word;
 margin-top:5px;
 margin-bottom:5px;
}
/*引用內容*/
.trackbackcontent{
 border-top:1px dotted #185a56; /*引用內容下方的框線顏色*/
}
/*留言內容*/
.commenttext{
 font-size: 13px;
 color: #000066;
}

/*留言按鈕*/
span.commentbutton{
 float:right;
}
/*留言名稱*/
span.commenttitle{
}
/*留言名稱項目符號*/
span.commenttitle li{
 list-style-image:url(http://s.blog.xuite.net/_image/bulletMessageList.gif);
}
/*留言作者列*/
.author{
 width:100%;
 margin-top:10px;
}
/*留言作者名稱*/
span.authorname{
}
/*留言編輯按鈕*/
.commentedit{
 width:100%;
 border-bottom:1px dotted #185a56 ; /*留言內容區塊下方的框線顏色*/
}
/*留言者信箱*/
span.email{
}
/*分隔線*/
span.line{
}
/*留言者網址圖示*/
span.urlicon{
}
/*留言者網址*/
span.url{
}

/*日曆table*/
.calMonth{
 width: 95%;
 font-weight: bold;
}
/*日曆首列*//*日曆上個月*//*日曆目前顯示年月*//*日曆下個月*//*日曆星期列*/
.calMonthNav, .calMonthBackward, .calMonthCurrent, .calMonthForward, .calMonthHeader{
 font-size: 12px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 color: #000000;
 text-align:center;
}
/*日曆平日日欄*//*日曆今日日期*//*日曆假日日期*/
.calMonthDay, .calMonthToday, .calholiday{
 font-size: 11px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 color: #999999;
 text-align:center;
}
/*日曆假日日期*/
.calholiday{
 color: #FF3300;
}
.calenderbutton{
}

/*自由欄位*//*日誌使用資源*//*留言塗鴉版*//*背景音樂*//*最新文章*//*最新留言*/
/*文章分類*//*日曆*//*搜尋文章*//*我的哈拉室*//*已建立的日誌*//*訂閱電子報*/
/*參觀人次統計*//*我的訂閱*//*日誌評價*//*已建立的相簿*//*最愛連結*//*關於我分類*/
.categoryTitle li, .calendarTitle li, .searchTitle li, .chatTitle li, .bloglistTitle li, .epaperTitle li, .customTitle li, .resourceTitle li, .paintTitle li, .musicTitle li, .articleTitle li, .messageTitle li, .countTitle li, .rssrollTitle li, .rankTitle li, .albumTitle li, .linkTitle li, .pTitle li
{
 list-style-image:url(//c.blog.xuite.net/c/f/7/b/11732000/blog_102/txt/13190764/2.gif);
/*左右欄位內的標題列內的Item List圖片,這個範例圖片是個草莓*/
}

.categoryTitle, .calendarTitle, .searchTitle, .chatTitle, .bloglistTitle, .epaperTitle, .customTitle, .resourceTitle, .paintTitle, .musicTitle, .articleTitle, .messageTitle, .countTitle, .rssrollTitle, .rankTitle, .albumTitle, .linkTitle, .pTitle
{ }

.categorySide li, .calendarSide li, .bloglistSide li, .articleSide li, .messageSide li, .rssrollSide li, .linkSide li
{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}

.categorySide, .calendarSide, .searchSide, .chatSide, .bloglistSide, .epaperSide, .customSide, .resourceSide, .paintSide, .musicSide, .articleSide, .messageSide, .countSide, .rssrollSide, .rankSide, .albumSide, .linkSide
{
 line-height:150%;
}
.messageSide, .articleSide {
 text-indent: -3ex;
 margin-left: 3ex;
}
.customSide{
 padding-left:-4px;
 padding-right:0px;
}

/*搜尋按鈕*//*電子報按紐*//*日誌使用資源按鈕*//*留言塗鴉版按鈕*//*關於我的圖片位置*/
/*關於我按鈕*//*背景音樂*/
.searchSide, .epaperSide, .resourceSide, .paintSide, .avatarPhoto,
.avatarbutton, .musicbutton{
 text-align:center;
}

/*帳號*/
.avatarID{
}
/*我的描述*/
.avatarDesciption{
 display:none;  
}

/*關於我*//*加入好友*//*我的相簿*//*我的影音*//*我的留言板*/
.plink ul, .pfriend ul, .pphoto ul, .pvlog ul, .pboard ul {
 list-style-type:none;
 margin:0px 0px 0px 0px;
 padding:0px 2px 0px 20px;
 word-wrap: break-word;
 display: block;
 float:left;
}
.plink li, .pfriend li, .pphoto li, .pvlog li, .pboard li {
 padding: 0px;
 margin: 0px;
 list-style-image:url(http://blog.xuite.net/_image/blogIcon19.gif);
}
 plink, .pfriend, .pphoto, .pvlog, .pboard, .personallink/*個人項目*/{
 padding:0px;
 width: 100%;
}

/*下方換頁-----2007-04-02*/
.page {
 margin-top: 10px;
 margin-bottom: 10px;
 font-size: 12px;
  color: #F17DA9;
 line-height: 24px;
 vertical-align:middle;
}
.page a:link, .page a:visited, .page a:active {
 font-size: 12px;
 color: #CD477A;
 line-height: 24px;
 text-decoration: none;
}
.page a:hover {
 font-size: 12px;
 color: #F17DA9;
 line-height: 24px;
 text-decoration: underline;
}
===========================================================================

以上就是修改的部位!希望對初入門的Xuiters有幫助!你可以簡單地改天(Banner),改左右欄位的標題,以及主要的文章文字及各連結文字的顏色!

我這幾次改的心得是,首先拿到喜歡的Banner圖片(放在日誌檔頭),這個基本上狗貓認為是一個重點,因為一進版面會看到的東西,所以找一張你喜歡的圖片是一個開端,然後整個版面的底圖大概可以利用現有的Xuite提供的底圖,或是自己定義背景顏色(就是不要定義background-image,而是用background-color來定義顏色)。
這幾次的背景我是抓↓
http://s.blog.xuite.net/_image/skin/background/10038/blogBg_1.gif
http://s.blog.xuite.net/_image/skin/background/10039/blogBg_1.gif
http://s.blog.xuite.net/_image/skin/background/10040/blogBg_1.gif

簡單一點的做法可以只定義個顏色,就是一張類似色紙一樣的底圖!
語法是:background-color:#fac6b8;

接著怎麼配色會比較好,我個人建議因為你使用的圖片如果是人家畫好的,基本上它的配色一定是不錯的,所以從那張圖著手就對了!

像這個CSS裡面的Banner圖片是↓

我簡單歸納它有淡藍、粉紅、淡綠及咖啡色系列的顏色組合,所以我將淡藍的部份作為標題列的顏色,下圖紅色虛線所示↓

然後粉紅因為我已經將草莓做為左右欄位裡面的標題Item↓

所以算是用了這個色。

第三用淡綠及深綠色系當做文字顏色,下圖紅色框內為深綠色,藍色框為淺綠色↓

最後的咖啡色用在標題列的文字,以及點選過的連結之類的文字↓

所以我維持原本Banner圖片的基本色調,來構成一個新的版面CSS配色。

個人是覺得這樣的配色會比較協調,不會太奇怪。抓出圖片的基本色調,就可以利用上次教的Color Picker http://blog.xuite.net/jeanson61/xuite/13141477 去抓顏色色碼來用!你也可以試試看,你的配色也可以有進步喔,感覺起來會粉搭啦(騙騙外行的啦)!



隨機文章


  • 歡迎來到隨意窩Xuite

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

     
  • 瀏覽更多精彩內容

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

     
  • 快速便利分享工具

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

     
  • 更多推薦APP

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