200912221043[新版CSS樣式分享]101耶誕夜景[兩欄式右欄]

年底要到了,要準備迎接101大樓的跨年煙火了!所以弄了一個101大樓煙火的CSS樣版跟大家分享!

這個樣版的大圖如下↓

有套用在http://blog.xuite.net/jeanson61/test3這一本部落格,要注意這個樣版有兩件工作要做,一個是面版樣式CSS語法的設定,另外一個是編排欄位裡的自由欄位設定。自由欄位主要是要讓版面上增加煙火的效果[它是一隻Flash程式],讓它可以在檔頭區域出現放煙火的效果!!這一隻Flash是從http://www.amarasoftware.com/flash-animations/fireworks-animation.htm這裡下載的!我已經將它上傳至Xuite,它的自由欄位語法是↓
<embed style="POSITION: absolute; z-index:9999; LEFT: 0px;TOP: 0px;" src="http://c.mms.blog.xuite.net/c/f/7/b/11732000/blog_4704/dv/29502939/29502939_0.swf" width="970" height="315" wmode="transparent"></embed>

如何貼進自由欄位,可以參考我http://blog.xuite.net/jeanson61/xuite/29147096這一篇有介紹

至於CSS樣版部份,這裡是拿Xuite提供的夜景(適用兩欄右欄)這個樣版來改的,主要改上面的Banner區的檔頭圖片↓

這張夜景圖片來源是:http://commons.wikimedia.org/wiki/File:Taipei_night_view_from_Xiangshan.jpg,是photo by Jerome Chen http://beb.anyday.com.tw,符合創用CC,所以我拿來應用一下!!

完整的CSS樣式語法如下,就Copy貼進面版樣式(怖景+CSS)裡面的[自定CSS樣式]中

/* */
/* CSS Document */
/*主體*/
html{

}

body{
 margin: 0px;
 text-align: center;
 background:url(http://s.blog.xuite.net/_theme/skin/background/273/blogBg.jpg) #000000 fixed center top repeat-y;
}
ul {padding:0;margin:0;}
li {list-style-position:inside}
h1, h2, h3 { padding:0;margin:0; font-weight:normal;}

/*連結*/
A {
 color: #e3e3e3;
 text-decoration: none;
}
A:link {
 color: #333333;
 text-decoration: none;
}
A:visited {
 color: #333333;
 text-decoration: none;
}
A:active {
 color: #663300;
 text-decoration: none;
}
A:hover {
 color: #663300;
 text-decoration: none;
}

/*定位框*/
#wrap {
}
#container {
 position: relative;
 text-align: left;
 width: 970px;
 margin: auto;
 padding: 0px;
}

/*檔頭*/
#banner{
 margin: 0px auto;
 padding: 0px;
 height: 454px;
                width: 939px;
 background:url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_4704/txt/29502939/0.jpg) top center no-repeat;
}

/*左欄*/
#linksLeft{
 width: 180px;
 left: 0px;
 margin: 5px;
 padding: 0px 0px 0px 20px;
 float: left;
 display:none;
}

/*右欄*/
#linksRight{
 float: right;
 width: 205px;
 right: 0px;
 padding: 0px 20px 0px 0px;
}
 
/*中間欄*/
#mid{
 /*position: relative;
 margin: 0px 220px 0px 220px;*/
 float:left;
 width:710px;
 display:inline;
 padding: 5px;
 margin-left:10px;
}
/*檔尾*/
#footer{
 clear: both;
 text-align: center;
 font-size: 12px;
 padding:60px 0px 0px 0px;
 color: #808080;
 background:url(http://s.blog.xuite.net/_theme/skin/background/273/blogBg_2.jpg) bottom center no-repeat;
}

/*欄位名稱*/
.sidetitle{
 padding-top: 7px;
 padding-left: 40px;
 font-weight: bold;
 background:url(http://s.blog.xuite.net/_image/skin/windows/273/sidetitle.gif) no-repeat;
 color: #990000;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 letter-spacing: 0.1em;
 font-size: 15px;
 margin-top: 10px;
 height: 30px;
 list-style: none;
 padding-bottom: 8px;
 border: 0px;
}
/*欄位內容*/
.side{
 font-size: 12px;
 font-weight: normal;
 line-height: 140%;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 padding: 5px;
 margin-bottom: 10px;
 color: #663300;
}
/*空白*/
.spacer{
 clear:both;
}
/******************************************/
/*檔頭class*/

/*日誌名稱*/
.blogname{
 font-family:simhei;
 font-size: 26px;
 font-weight: bold;
 color: #FFCC33;
 padding-left: 30px;
 padding-top: 50px;
}
.blogname a:link {
 color:#FFCC33;
}
.blogname a:visited {
 color:#FFCC33;
}
.blogname a:hover {
 color: #FFCC66;
}
.blogname a:active {
 color: #FFCC66;
}

/*今日心情*/
.blogemotion{
 /* display: none; */
}
/*加入最愛*/
.blogfavo{
 /* display: none; */
}

/*日誌描述*/
.description{
 font-size: 13px;
 color: #FFCC66;
 padding-left: 30px;
}
/*選單列*/
.menulist{
 padding-top: 5px;
 width: 100%;
}
/*選單*/
.menu{
 padding-top: 5px;
 float: right;
 padding-right: 60px;
 color: #cccccc;
}
.menu a:link {
 color: #cccccc;
}
.menu a:visited {
 color: #cccccc;
}
.menu a:hover {
 color: #cccccc;
}
.menu a:active {
 color: #cccccc;
}
/*Logo*/
.logo{
    padding-left: 10px;
 visibility: visible;
 width: 300px;
}

 


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

/*文章外框*/
#content{
 margin: 5px;
}
/*文章標題列*/
.title{
 width: 100%;
 height: 40px;
 background:url(http://s.blog.xuite.net/_image/skin/windows/273/title.gif) no-repeat;
 padding-top: 10px;
}
/*文章標題名稱*/
span.titlename{
 font-family:Ms Gothic;
 font-size: 15px;
 color: #FF6633;
 font-weight: bold;
 padding-left: 25px;
 padding-top: 30px;
}
.titlename a:link {
 color: #FF6633;
}
.titlename a:visited {
 color: #FF6633;
}
.titlename a:hover {
 color: #FF6633;
}
.titlename a:active {
 color: #FF6633;
}
/*文章日期*/
span.titledate{
 float: right;
 height: 25px;
 padding-right: 28px;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 10px;
 padding-top: 10px;
 color: #f3d71f;
}
/*文章評價列*/
.blogrank{
 width: 100%;
 line-height: 200%;
 margin-top: 0px;
}
/*文章瀏覽數*/
span.counter{
background:url(http://s.blog.xuite.net/_image/skin/list/bulletCounter.gif) no-repeat;
float:right;
margin:5px;
padding:2px 0 0 20px;
width:auto;
color: #C13521;
}

/*文章分類*/
span.category{
background:url(http://s.blog.xuite.net/_image/skin/list/bulletContentArticle.gif) no-repeat;
float:right;
margin:5px;
width:auto;
padding:2px 0 0 20px;
}

/*文章主體*/
.blogbody{
 overflow: hidden;
 word-wrap: break-word;
 width: 100%;
 color: #333333;
 line-height:18px;
 padding: 0px 0px 0px 0px;
 margin: 0px 0px 10px 0px;
}
/*作者列*/
.posted{
 width: 100%;
 text-align: right;
 color: #663300;
 font-family: "細明體";
 font-size: 13px;
 font-weight: normal;
 clear:both;
}
/*上下文章*/
.selectbar{
 width: 100%;
 text-align: center;
}
/*引用列*/
.trackbacktitle{
 width: 100%;
 margin-top: 20px;
 margin-bottom: 5px;
 font-size: 12px;
 color: #ff3333;
 height: 24px;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-top-style: dotted;
 border-bottom-style: dotted;
 border-top-color: #990000;
 border-bottom-color: #990000;
}

/*引用列項目符號*/
.trackbacktitle li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon31a.gif);
}
/*引用網址*/
.trackbackurl{
 width: 100%;
 padding-top: 20px;
 padding-bottom: 15px;
 text-indent: 10px;
 color: #666666;
}
/*引用日期*/
.trackbackdate{
 width: 100%;
 text-align: right;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 color: #666666;
}
/*引用內容*/
.trackbackcontent{
 width: 100%;
 line-height: 150%;
 margin: 5px 0px 10px 0px;
 color: #666666;
 border-bottom-width: 1px;
 border-bottom-style: dotted;
 border-bottom-color: #990000;
}
/*留言列*/
.comment{
 width: 100%;
 font-size: 12px;
 color: #cc9999;
 height: 24px;
 margin-top: 20px;
 padding-top: 5px;
 padding-bottom: 5px;
 border-top-width: 1px;
 border-bottom-width: 1px;
 border-top-style: dotted;
 border-bottom-style: dotted;
 border-top-color: #990000;
 border-bottom-color: #990000;
}
/*留言名稱*/
span.commenttitle{
color: #ff3333;
padding-left:20px;
background:url(http://s.blog.xuite.net/_image/bulletMessageList.gif) no-repeat;
width:auto;
}

/*留言按鈕*/
span.commentbutton{
 float: right;
}
/*留言作者列*/
.author{
 width: 100%;
}
/*留言作者名稱*/
span.authorname{
}
/*留言日期*/
span.commentdate{
 float: right;
 text-align: right;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 color: #666666;
}
/*留言內容*/
.commenttext{
 overflow: hidden;
 word-wrap: break-word;
 width: 100%;
 margin-top: 10px;
 margin-bottom: 10px;
 color: #663300;
}
/*留言編輯按鈕*/
.commentedit{
 width: 100%;
 border-bottom: 1px dotted #990000;
}
/*留言者信箱*/
span.email{
 
}

 

/******************************************/
/*左欄class*/
/*關於我*/
.avatar{
 margin-top: 0px;
 padding: 0px;
 border: 1px none #990000;
 margin-bottom: 10px;
}
/*照片*/
.avatarPhoto{
 text-align:center;
}
/*帳號*/
.avatarID{
}
/*我的描述*/
.avatarDesciption{
 color: #663300;
}
/*關於我按鈕*/
.avatarbutton{
 
}


/*文章分類*/
.categoryTitle li{
 /*list-style-image:url(http://s.blog.xuite.net/_image/skin/list/bulletCategory.gif);*/
}
.categorySide li{
 list-style-image:url();
 color: #666666;
}
.categoryTitle{
}
.categorySide li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}

.categorySide{
}


/*日曆*/
.calendarTitle li{
 list-style: none;
}
.calendarTitle{
}
.calendarSide li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.calendarSide{
}
/*日曆table*/
.calMonth{
 width: 95%;
}
/*日曆首列*/
.calMonthNav{
}
/*日曆上個月*/
.calMonthBackward{
}
/*日曆目前顯示年月*/
.calMonthCurrent{
 font-size: 12px;
 font-weight: bold;
 color: #663333;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
}
/*日曆下個月*/
.calMonthForward{
 color: #333333;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 12px;
}
/*日曆星期列*/
.calMonthHeader{
 color:#CCCCCC;
}
/*日曆日欄*/
.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";
 font-weight: bold;
}
.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:#666666;
}
/*已建立的日誌*/
.bloglistTitle li{
 list-style: none;
}
.bloglistTitle{
}
.bloglistSide li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.jpg);
}

.bloglistSide{
}
/*訂閱電子報*/
.epaperTitle li{
 list-style: none;
}
.epaperTitle{
}
.epaperSide{
 text-align: center;
}
.epaperbutton{
 text-align: center;
 padding: 2px;
}

/*自由欄位*/
.customTitle li{
 list-style: none;
}
.customTitle{
}
.customSide{
}
/*日誌使用資源*/
.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{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.articleSide{
}
/*最新留言*/
.messageTitle li{
 list-style: none;
}
.messageTitle{
}
.messageSide li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.messageSide{
 padding:5px;
}
.date {
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 font-size: 11px;
 color: #666666;
}
/*參觀人次統計*/
.countTitle li{
 list-style: none;
}
.countTitle{
}
.countSide{
}
/*我的訂閱*/
.rssrollTitle li{
 list-style: none;
}
.rssrollTitle{
}
.rssrollSide li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.rssrollSide{
}
.backbtn li{
 list-style-image:url(http://s.blog.xuite.net/_image/blog038.gif);
  }
.backbtn{
 text-align: right;
}
.morebtn{
background:url(http://s.blog.xuite.net/_image/blog037.gif) no-repeat;
width:auto;
padding-left:20px;
float:right;
}
/*日誌評價*/
.rankTitle li{
 list-style: none;
}
.rankTitle{
}
.rankSide{
}
/*已建立的相簿*/
.albumTitle li{
 list-style: none;
}
.albumTitle{
}
.albumSide{
}
/*最愛連結*/
.linkTitle li{
 list-style: none;
}
.linkTitle{
}
.linkSide li{
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.linkSide{
}

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

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

/*我的相簿*/
.pphoto li{  
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.pphoto{
}

/*加入好友*/
.pfriend li{  
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.pfriend{
}

/*我的留言板*/
.pboard li{  
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.pboard{
}

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

.pTitle{

/*欄位名稱---- 2006-5-12 Modify*/
.personaltitle{
 padding-top: 7px;
 padding-left: 40px;
 font-weight: bold;
 background:url(http://s.blog.xuite.net/_image/skin/windows/273/sidetitle.gif) no-repeat;
 color: #990000;
 font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
 letter-spacing: 0.1em;
 font-size: 15px;
 margin-top: 10px;
 height: 30px;
 list-style: none;
 padding-bottom: 8px;
 border: 0px;
}

/* Applied by Chyuko@Xuite.net */

/*我的影音*/
.pvlog ul{
 list-style-type: none;
 margin: 0px 0px 0px 0px;
 padding: 0px 2px 0px 20px;
 word-wrap: break-word;
 display: block;
 float: left;
}
.pvlog li{
 padding: 0px 0px 0px 0px;
 margin: 0px 0px 0px 0px;
 list-style-image:url(http://s.blog.xuite.net/_image/blogIcon19.gif);
 
}
.pboard{
 padding:0 0 0 0px;
 WIDTH: 90px;
}

/*下方換頁-----2007-04-02*/

.page {
 margin-top: 10px;
 margin-bottom: 10px;
 font-size: 12px;
 color:  #666666;
 line-height: 24px;
 vertical-align: middle;
}
.page a:link, .page a:visited, .page a:active {
 font-size: 12px;
 color:  #666666;
 line-height: 24px;
 text-decoration: none;
}
.page a:hover {
 font-size: 12px;
 color: #333333;
 line-height: 24px;
 text-decoration: underline;
}

/*留言回覆邊框*/
.reply_info{
 width: 90%;
 border: 1px dotted #990000;
 padding: 1.2em 1.2em;
 margin: 1.2em;
}

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

/*最愛日誌*/
.LoveBlogTitle li{
 list-style: none;
}
.LoveBlogTitle{
}
.LoveBlogSide{
 text-align:center;
}
.LoveBlogSide select{
 color: #666666;
 font-size: 11px;
 /* background-color:#FCE7E2; */
}
/*好文轉寄*/
span.mail{
background:url(http://s.blog.xuite.net/_image/skin/list/email_forward.gif) no-repeat;
float:right;
margin-top:5px;
padding:2px 0 0 20px;
width:auto;
}

/*我的發燒文*/
.hotArticleTitle li{
 list-style-image: none;
}

/*我的親友團*/
.myChannelTitle li{
 list-style-image: none;
}

.gText{color: #838383;}
.rank{color: #838383; float:left;}

/*日誌背景音樂*/
.BackgroundMusicTitle{
}
.BackgroundMusicTitle li{
 list-style-image: none;
 list-style-type:none;
}
/*我的留言板*/
.gbookTitle{
}
.gbookTitle li{
    list-style-image: none;
 list-style-type:none;
}
/*誰拜訪過我*/
#visitorTitle{
}
#visitorTitle li{
    list-style-image: none;
 list-style-type:none;
}
/*瀏覽方式切換*/
.ArticleShowMode {
    margin-bottom:10px;
}
/*列表模式 */
.singleArticle{
}
.singleArticle ul{
   padding-left:20px;
}
.singleArticle li{
    list-style-position:inherit;
   line-height:200%;
}

/*隨機推薦文章*/
.ArticleRandomSide{
}
/*相關文章*/
#ArticleRelateSide{
}

/*服務切換tab*/
.tab_service{
 position: absolute;
 width: 215px;
 top: 65px;
 left:25px;
 clear:both;
}
.tab_service ul{
}
.tab_service li{
 margin:0 1px 0 0;
 display:block;
 float:left;
 list-style-type:none;
 padding:3px;
 color:#ffcc66;
 cursor:pointer;
 background-color:#573B2D;
}

#tab_select_blog{ }
#tab_select_photo{}
#tab_select_vlog{}
#tab_select_gbook{}
#tab_select_friend{}
#tab_select_card{}
/* 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:94px;padding:0px; margin:10px auto;display:block;}
#personalLink li {list-style-type:none;float:left;height:1.7em;margin:0 4px 0 0;padding:2px 0 0 16px;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;
}
/* 2009/09 推推 bookmark 區塊 */
.bookmark{
float:right;
}

回應

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

今天去哪玩??
天氣
累積 | 今日
loading......
訂閱狗猫電子報

輸入你的email address:

Delivered by FeedBurner

    沒有新回應!
關鍵字
Xuite電影貼紙
平均分數:0 顆星
投票人數:0
我要評分:





Powered by Xuite
Re:[台北搬家公司 「搬家」值得您的託付 遠近...],By 搬家公司-賴工匠 於2016-08-15
Re:[讚!!!],By blog 於2015-06-18
Re:[謝謝],By blog 於2015-06-15
Re:[[Xuite秘笈]上傳MP3音樂來自訂背...],By ★ㄚ進のsmile加油站★ 於2015-05-03
Re:[隨意聽App推薦],By ★ㄚ進のsmile加油站★ 於2015-05-03
Re:[新版CSS]欄位的外框設定],By 天使的花園 於2015-04-12
Re:[[Xuite秘笈]背景音樂自動播放控制(...],By 天使的花園 於2015-04-05
Re:[[Xuite秘笈]背景音樂自動播放控制(...],By 天使的花園 於2015-04-05
Re:[名器],By 名器 於2014-12-16
Re:[棋牌游戏平台,网上棋牌游戏平台,棋牌游戏...],By 棋牌游戏平台,网上棋牌游戏平台,棋牌游戏平台网站,易发棋牌游戏平台-228238.com 於2014-11-24
CSS樣版三欄兩欄倒數冬季計時居家右欄黑色系藍色風水語法自由欄位保健播放器浮動寬度步道如果劇團兒童劇行動夢想iPAD兩欄右CSS語法裝潢耶誕borderiPhone系統家具影音手機家具望洋山登入問題L型Pixar客廳幾何影音播放器邊框標題名稱粉紅基礎入門圖片縮小Style Information童話故事影音選單訊息中心餐廳more
不顯示的自由欄位