修改成適用新版Xuite的CSS樣式語法[原文為2007/08/23文章]這兩天將日誌版面做了修改,終於算是告一段落,把目前的CSS語法跟大家分享一下,歡迎大家Copy拿去用或是修改,更歡迎修改後再分享啦!

語法如下↓接下來我再分幾天做一些簡單的分析教學,因為我把整個Xuite 日誌CSS簡化合併,讓自己在修改CSS時,要調整的部份越少越好。例如改一個底圖的定義,所有的欄位的設定都改!改一個顏色,許多的地方的顏色也一次定義!因為原本的Xuite日誌CSS檔,定義的非常細,以每個畫面區塊各別定義及說明,當然這樣很好,都很清楚每個部份在那裡定義,但是要改的地方變得非常非常多,有時候反而會漏改了!當然或許有些人希望每個部份都用不同的定義弄得五顏六色,那麼這一篇的CSS建議就不要看了!
===============================================================================

/* CSS Document */
/*主體*/
html{
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#FA9C29;
scrollbar-3Dlight-color:#FA9C29;
scrollbar-arrow-color:#FA9C29;
scroll-track-color:#FFFFFF;
scroll-darkshadow-color:#FFFFFF;
cursor : url(//c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/4702563/39.gif), pointer;
}
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-image:url(http://s.blog.xuite.net/_image/skin/background/10040/blogBg_1.gif);
background-attachment:fixed;
background-repeat:no-repeat;
font-family: Comic Sans MS,arial,helvetica,sans-serif;
color:#000000;
}

/*連結*/
A {
color: #EB7308;
text-decoration: none;
}
A:link {
color:#EB7308;
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;
}

/*定位框*/
#wrap {
}
#container {
position:relative;
text-align: left;
behavior:expression(this.style.width = (document.documentElement.offsetWidth<990)?"990px":"100%");
min-width:990px;
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/13094185/9.jpg);
background-repeat:repeat-x;
}

/*左欄*/
#linksLeft{
position:relative;
float: left;
left:25px;
width: 21%;
margin-top: 0px;
}

/*右欄*/
#linksRight{
position:relative;
float: left;
left:57.8%;
width: 21%;
margin-top: 0px;
}

/*中間欄*/
#mid{
position:relative;
float: right;
right: 21.5%;
width: 54.8%;
margin: 0px;
padding: 0px 0px 0px 0px;
/* border: #BB6B1E 1px solid;*/
text-align:left;
z-index:0;
overflow-x: auto;
}

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

/*欄位名稱*/
.sidetitle, .personaltitle{
padding:2px;
border:#FBD34A 1px solid;
background:#FFF5BA;
font-weight:bold;
background-image:url(//c.blog.xuite.net/c/f/7/b/11732000/blog_102/txt/13094185/10.jpg);
color:#CC6600;
letter-spacing:0.1em;
font-size:15px;
margin-top:5px;
text-align: left;
line-height: 200%;
}
/*欄位內容*/
.side, .avatar{
background:;
border:#FBD34A 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:#FBD34A 5px solid;
}

/*文章標題列*//*引用列*//*引用網址*//*留言列*/
.title, .trackbacktitle, .trackbackurl, .comment{
width:100%;
font-size: 12px;
background:#FFF5BA;
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;
line-height:200%;
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{
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;
color: #cc0000;
}
/*文章分類*/
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;
}
/*好文轉寄*/
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;
}

/*文章主體*/
.blogbody{
width:100%;
margin-top:15px;
font-size: 15px;
word-wrap: break-word;
}
.morebtn{
background: url(http://s.blog.xuite.net/_image/blog037.gif) no-repeat;
width: auto;
padding-left: 20px;
float: right;
}
/*作者列*/
.posted{
width:100%;
text-align:right;
clear: both;
}
/*上下文章*/
.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;
}
/*留言名稱 12/03留言的小圖示*/
span.commenttitle{
 background: transparent url(http://s.blog.xuite.net/_image/bulletMessageList.gif) no-repeat;
 padding-top: 3px;
 padding-left: 20px;
}

/*留言作者列*/
.author{
width:100%;
margin-top:10px;
}
/*留言作者名稱*/
span.authorname{
}
/*留言編輯按鈕*/
.commentedit{
width:100%;
border-bottom:1px dotted #FBD34A ;
}
/*留言者信箱*/
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/13094185/12.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;
}
/* 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 28px;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;
line-height: 100%;
}
.articleExt li{
list-style-position:inside;
list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
/* 2009/09 推推 bookmark 區塊 */
.bookmark{
float:right;
}



隨機文章


×
網友回饋 回應:22
  • 歡迎來到隨意窩Xuite

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

     
  • 瀏覽更多精彩內容

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

     
  • 快速便利分享工具

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

     
  • 更多推薦APP

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