透過這兩天寫的教學,就可以很快速再產出另外一個類似樣版的CSS出來,只是色系不同↓

原本版本是粉黃系↓

語法類似,只是改些底圖及顏色等等,自定CSS樣式語法如下,喜歡就拿去用,或者是可以研究一下兩者間的不同,這樣就比較容易知道改那裡啦!
====================================================
/* CSS Document */
/*主體*/
html{
scrollbar-face-color:#F8D3DA;
scrollbar-highlight-color:#F8D3DA;
scrollbar-shadow-color:#CC567D;
scrollbar-3Dlight-color:#CC567D;
scrollbar-arrow-color:#CC567D;
scroll-track-color:#F8D3DA;
scroll-darkshadow-color:#F8D3DA; 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/10039/blogBg_1.gif);
background-attachment:fixed;
background-repeat:no-repeat;
font-family: Comic Sans MS,arial,helvetica,sans-serif;
color:#000000;
}

/*連結*/
A {
color: #CD477A;
text-decoration: none;
}
A:link {
color:#CD477A;
text-decoration:none;
cursor : url(//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/4702563/46.gif), pointer;
}
A:visited {
color:#996633;
text-decoration:none;
}
A:active {
color: #E2FF58;
text-decoration:none;
}
A:hover {
color: #964700;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;
padding:0px 0px 0px 0px;
margin:0px auto;
}

/*檔頭*/
#banner{
margin: 18px 0px 0px 25px;
height: 250px;
background-image:url(//c.blog.xuite.net/c/f/7/b/11732000/blog_102/txt/13153697/0.jpg);
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:#b34a6c 1px solid;
background:#fac6b8;
font-weight:bold;
background-image:url(//c.blog.xuite.net/c/f/7/b/11732000/blog_102/txt/13153697/1.jpg);
color:#933c58;
letter-spacing:0.1em;
font-size:15px;
margin-top:5px;
text-align: left;
}
/*欄位內容*/
.side, .avatar{
background:;
border:#b34a6c 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:#b34a6c 5px solid;
}

/*文章標題列*//*引用列*//*引用網址*//*留言列*/
.title, .trackbacktitle, .trackbackurl, .comment{
width:100%;
font-size: 12px;
background:#fac6b8;
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 #BB6B1E ;
}
/*引用列*//*留言列*/
.trackbacktitle, .comment{
margin-top:5px;
margin-bottom:5px;
border-top:1px dotted #FBD34A;
position:relative;
}
/*引用網址*/
.trackbackurl{
background-image:none;
padding-bottom:10px;
}

/*文章標題名稱*/
span.titlename{
font-size:15px;
color:#996633;
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 #CBE1E9;
}
/*留言內容*/
.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 #b34a6c ;
}
/*留言者信箱*/
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/13153697/2.gif);
}

.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;
}



隨機文章


  • 歡迎來到隨意窩Xuite

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

     
  • 瀏覽更多精彩內容

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

     
  • 快速便利分享工具

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

     
  • 更多推薦APP

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