2009-04-24 18:23 [CSS樣版分享]黑色面版分享[深色樣版]

其實是欠網友很久了！有比較年輕還是比較想要耍酷的人(OS.這樣講會不會得罪那些喜歡深色系的網友)，特別商請狗貓做些不要那麼可愛的樣版，做些比較穩重，深色系的！所以就做一個。跟大家分享啦，有興趣歡迎修改使用！

大一點的圖片如下，或是到我測試的部落格觀看http://blog.xuite.net/jeanson61/test1，↓

為了讓它不那麼的黑，所以我用陰影的延伸做為部落格的主體[它並不是真的完全黑色]，然後一些區塊的區隔就用夕陽的橘色線條來做！文字都用白色怕太亮，反而刺眼，所以用有點灰灰的字！喜歡就拿去用或是任意修改都可以！！

詳細的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: #000000;
    font-family: Comic Sans MS,arial,helvetica,sans-serif;
    color: #b5b2b5;
    font-size: 14px;
   line-height:150%;
    word-wrap: break-word;
}

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

/*定位框*/
#container {
 position:relative;
 text-align: left;
 width:1000px;
 margin:0px auto;
 align:center;
 padding: 0px 0px 0px 0px;
background: #100c08;
}
   
/*檔頭*/
#banner{
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 align:center;
 width:1000px;
 height: 400px;
background:url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_1374547/txt/23557118/5.jpg) no-repeat;
background-position: center top;
    
}

/*左欄*/
#linksLeft{
 float: left;
               width: 200px;
 padding-left: 0px;
}

/*右欄*/
#linksRight{
                 float: right;
               width: 200px;
  padding-right: 0px;
}
 
/*中間欄*/
#mid{
position:relative;
margin: 0px  0px  0px 210px;
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:1000px;
}

/*欄位名稱*/
.sidetitle, .personaltitle {
 padding-top: 10px;
 border-bottom:1px solid #84756b;
 color: #ffffff;
 text-align:left;
 font-family:Comic Sans MS,arial,helvetica,sans-serif;
 font-weight:bold; font-size:20px;
 margin:0px;
 letter-spacing:0.1em;
 height: 41px;
 list-style:none;
}
/*欄位內容*/
.side{
 font-size:14px;
 font-weight:normal;
 line-height:140%;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 padding:0px 5px 40px 5px;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;
}
.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: #FFFF00; text-decoration:under-line;
}

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

/*日誌名稱*/
.blogname{
 width:990px;
 font-size: 22px;
 font-weight: bold;
 valign:bottom;
 color:#ffd19d;
 padding-left:45px;
 padding-top:200px;
 float:left;
 text-align:left;
}
.blogname a:link {
 color: #FFFFFF;
}
.blogname a:visited {
 color: #FFFFFF;
}
.blogname a:hover {
 color: #0f3d5f;
}
.blogname a:active {
 color: #efefef;
}

/*今日心情*/
.blogemotion{
 
}
/*日誌描述*/
.description{
 font-size: 15px;
 color: #efefef;
 valign:bottom;
 padding-left:50px;
 float: left;
 width: 990px;
 text-align:left;
}
/*選單列*/
.menulist{
 padding-top:15px;
 width:100%;
background: url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_1374547/txt/23557118/12.gif) no-repeat top left;
}
/*選單*/
.menu{
 padding-top:0px;
 float:right;
 padding-right:40px;
 color: #828282;
}
.menu a:link {
 color: #fffb7b;
background-color: #000000;
}
.menu a:visited {
 color: #fffb7b;
}
.menu a:hover {
 color: #fffb7b;
}
.menu a:active {
 color: #fffb7b;
}

span.xuiteLink a:link, span.xuiteLink a:visited {
color: #fffb7b;
background-color: #000000;
}
span.xuiteLink a:hover, span.xuiteLink a:active {
color: #fffb7b;
background: #757c8e;
}

/*Logo*/
.logo{
 visibility:visible;
padding: 40px 0px 0px 20px;
}

 

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

/*文章外框*/
#content{
width : 100%;
    margin: 0px 0px 0px 0px;
}
/*單文章外框*/
.singleArticle{
width : 100%;
    margin: 0px 0px 0px 0px;
}
/*文章標題列*/
.title{
 width:100%;
 height:40px;
 padding-top:10px;
 border-bottom: 3px solid #e78e42;
}
.title A, .title A:link {
color: #FFFFFF;
}
.title a:visited  {
color: #84756b;
}

/*文章標題名稱*/
span.titlename{
 padding-left: 20px;
 font-size:17px;
 color:#FFFFFF;
 font-weight:bold;
}

/*文章日期*/
span.titledate{
                float :right;
 text-align:right;
                padding-right: 20px;
                padding-top: 10px;
 font-family: Georgia,"Times New Roman",Times,serif;
 font-size: 11px; font-weight:normal;  line-height:12px; color: #f1b566;
background-color: #211008;

}
/* *html span.titledate{
 height:39px;
                width: 43px;
 padding-left:15px;
                padding-top:0px;
                font-size: 11px;font-weight: bold;
                overflow-y:hidden;
}
*+html span.titledate{
 height:39px;
                width: 43px;
 padding-left:15px;
                padding-top:0px;
                font-size: 11px;font-weight: bold;
                overflow-y:hidden;
} */

/*文章評價列*/
.blogrank{
 width: 95%;
 line-height:200%;
/*                margin-bottom: -25px;*/
 padding: 0px 20px 0px 20px;
}
*html .blogrank { width: 100%; }
*+html .blogrank { width: 100%; }
/*文章瀏覽數*/
span.counter{
 float:right;
 margin-top:15px;
 font-size: 12px;
 color: #6F4829;
/*padding-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:15px;
padding-right:20px;
}

/*文章分類項目符號*/
span.category li{
 list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletContentArticle.gif);
}
/*標籤*/
span.rank {
padding-left:20px;
}
/*文章主體*/
.blogbody{
 width:95%;
 color: #b5b2b5;
 padding: 0px 20px 0px 20px;
 margin: 0px 0px 0px 0px;
font-size:17px;
line-height: 150%;
}
*html .blogbody { width:100%; overflow-x: auto;}
*+html .blogbody { width:100%; overflow-x: auto;}

/*繼續閱讀*/
span.fullpost {
display: block;
margin-top: -20px;
}

/*More按鈕*/
div.morebtn {
display: block;
margin-top: -25px;
}

/*作者列*/
.posted{
 width:95%;
 text-align:right;
 color:#999;
 font-family: "細明體";
 font-size: 15px;
 font-weight: normal;
                border-top: 1px dashed;
}
.posted A, .posted A:link {
color: #FFFFFF;
}
.posted A:active, .posted A:hover {
color: #FFFF00;
}

/*上下文章*/
.selectbar{
 width:100%;
 text-align:center;
}
.selectbar A, .selectbar A:link {
color: #FFFFFF;
}
.selectbar A:active, .selectbar A:hover {
color: #FFFF00;
}

.articleExt {
color: #ce4110;
}
/*引用列*/
.trackbacktitle{
 width:98%;
 padding: 10px 0px 5px 20px;
 font-size: 12px;
 color:#FFFFFF;
 height:41px;
 border-bottom: 3px solid #e78e42;
}
*html .trackbacktitle {width: 100%; }
*+html .trackbacktitle { width: 100% }

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

/*引用日期*/
.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-width: 1px;
 border-bottom-style: dotted;
 border-bottom-color: #996600;
}
/*留言列*/
.comment{
 width: 98%;
 font-size: 12px;
 color: #FFFFFF;
 height:41px;
 padding-top: 10px;
                padding-left: 20px;
 border-bottom: 3px solid #e78e42;
}
*html .comment { width: 100%; }
*+html .comment { width: 100% }

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

/*留言名稱項目符號*/
span.commenttitle li{
 list-style-image:url(http://s.blog.xuite.net/_image/bulletMessageList.gif);
}
/*留言按鈕*/
span.commentbutton{
 float:right;
padding-right:20px;
}
/*留言作者列*/
.author{
 width:93%;
 padding: 10px 20px 10px 20px;
}
*html .author { width: 100%; }
*+html .author { width: 100%; }

/*留言作者名稱*/
span.authorname{
}
/*留言日期*/
span.commentdate{
display: block;
width: 100%;
 float:top;
 text-align:right;
 font-family: Georgia,"Times New Roman",Times,serif;
 font-size: 11px; height:13px;
 color: #f1b566;
}
/*留言內容*/
.commenttext{
 width:  93%;
 padding: 10px 20px 10px 20px;
 color: #b5b2b5;
font-size:14px;
}
*html .commenttext { width: 100%;overflow-x: auto; }
*+html .commenttext { width: 100%;overflow-x: auto; }

/*留言編輯按鈕*/
.commentedit{
 width:93%;
 border-bottom:1px dotted #d7d7d7;
 padding: 10px 20px 10px 20px;
}
*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/17485837/19.gif) no-repeat;
 padding:50px 5px 5px 5px;
 border:1px dotted #f1b566;
}
*html .reply_info { width: 100%; }
*+html .reply_info { width: 100%; }

/******************************************/
/*左欄class*/
/*關於我*/
.avatar{
 margin-top:0px;
 padding:5px 5px 40px 5px;
 border:1px none #93AE4F;

 }
/*照片*/
.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: #FFFFFF;
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:#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:-40px;
}

/*關於我*/
.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{
}

/* 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 {
    font-size: 12px;
    color:  #B1987C;
    line-height: 50px;
}

.page a:link, .page a:visited, .page a:active {
    font-size: 12px;
    color:  #B1987C;
    text-decoration: none;
}
.page a:hover {
    font-size: 12px;
    color:  #B1987C;
    text-decoration: underline;
}
*html .page { padding-top:30px; }

/*我的好友*/
.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{
 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:350px; right:250px;
    WIDTH: 100px;
}

/*我的影音*/
.pvlog {
position:absolute;
top:350px; right:145px;
    WIDTH: 100px;
}
 /*我的留言版*/
.pboard{
position:absolute;
top:350px;right:25px;
    WIDTH: 120px;
}
.pphoto li, .pvlog li, .pboard li {
list-style:circle;
font-size:17px;
line-height:150%;
}
.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: #fffb7b;
}
.pphoto a:hover, .pvlog a:hover, .pboard a:hover {
color: #fffb7b; font-weight:bold; text-decoration:underline;
}

平均分數：0 顆星    投票人數：0 人
我要評分：
狗貓 / Xuite日誌 / 回應(6) / 引用(1) / 好文轉寄
[CSS樣式問題討論]留言回覆...|日誌首頁|[自由欄位應用]下桐花雨的HT...
回應

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

今天去哪玩??
Xuite官方音樂播放器

萬年曆
天氣
累積 | 今日
loading......
訂閱狗猫電子報

輸入你的email address:

Delivered by FeedBurner

    沒有新回應！
全部展開|全部收合
關鍵字
Xuite電影貼紙
平均分數：0 顆星
投票人數：0 人
我要評分：






如何使用RSS
Powered by Xuite
Re:[轉貼【文章分享】 職場人都該看這一篇文章...]，By 名附其實少奶奶 於2011-11-16
Re:[[轉貼]-你擔心無薪假或裁員嗎？先看看這...]，By 黛比遊記-(Debby's Life) 於2011-11-04
Re:[佈 景]，By blog 於2011-06-11
Re:[一張改變一生的填寫表]，By blog 於2011-06-04
Re:[全球最夯的[宅]事業]，By 居家工作自動跟進系統---讓你網路創業超輕鬆 於2011-05-19
Re:[換個有錢人的腦袋 ]，By 在家工作也可以月入百萬 於2011-04-10
Re:[在家上網 ~ 賺取兼職收入 , 讓我財富...]，By 新世紀宅經濟 在家上網就能賺錢 ~~ 於2011-03-26
Re:[換行原來這麼簡單唷!]，By 發現幸福的秘密.... 於2010-12-06
Re:[ [多則影音播放]Xuite Vlog提...]，By §✱遺忘空間✱§ 於2010-10-20
全部展開|全部收合
CSS 、樣版 、三欄 、兩欄 、計時 、倒數 、冬季 、自由欄位 、黑色系 、右欄 、風水 、藍色 、居家 、浮動寬度 、播放器 、語法 、保健 、兒童劇 、兩欄右 、border 、如果劇團 、CSS語法 、iPAD 、行動 、系統家具 、步道 、耶誕 、手機 、iPhone 、影音 、夢想 、裝潢 、影音鎖 、文章鎖 、檔頭標題 、勘屋 、影音選單 、基礎入門 、密碼鎖 、相片上傳 、上傳工具 、設計圖 、文字左右對齊 、行距 、計日 、Style Information 、Web Developer 、鑲嵌語法 、留言通知 、訊息中心 、more
洋蔥頭表情符號

不顯示的自由欄位