這次的CSS變化很大,一般需要改動的地方我都做了詳細(xì)解釋
以前7.1的風(fēng)格教程里我解釋過的老的CSS樣式在這里就不做說明了,提倡大家自己動手做風(fēng)格
========================================================================
/* 默認(rèn)風(fēng)格 */
a {text-decoration : none;color : #000000; }
a:hover {text-decoration : underline; color : #4455aa; }
body {font-size : 12px; color : #000000; font-family : tahoma, 宋體, fantasy; text-align : center; margin : 0; background-image : none; }
td {font-family : tahoma, 宋體, fantasy; font-size : 12px; line-height : 15px; }
th {background-image : url("skins/xx521_huo/xx521_18.jpg"); background-color : #4455aa; color : white; font-size : 12px; font-weight : bold; line-height: normal; }
th a {color : #fff; text-decoration : none; }
th a:hover {color : #fff;text-decoration : underline;}
.tabletitle1 {background-color : #6595d6; color : #fff;}
改變XML和WAP下面的背景顏色
.tabletitle2 {background-color : #e4e8ef; }
.tablebody1 {background-color : #fff; line-height : normal; }
.tablebody2 {background-color : #e4e8ef; line-height : normal; }
.tablebody3 {background-color : #6595d6; }
.tableborder1 {width : {$width}; border:1px none inherit; background-color : #6595d6;}
.tableborder2 {width : {$width}; border : 1px solid #dedede; background-color : #efefef; margin:0 auto;}
.tableborder3 {width : {$width}; border-left : 1px solid #6595d6; border-right : 1px solid #6595d6; border-top : 0px none inherit;border-bottom : 0 solid #6595d6; background-color : #efefef; }
.tableborder4 {width : {$width}; border : 1px solid #6595d6;}
.tableborder5 {border : 1px solid #6595d6; (XML最外框的顏色) background-color : #d6e0ef;(XML最外框下的一小圈背景顏色)}
.tableborder6 {width : {$width}; border : 0 none inherit;background-color : #fff;}
.singleborder {font-size : 0px;line-height : 1px;padding : 0px;background-color : #6595d6;}
#tabletitleLink a {color : #fff; text-decoration : none;}
#tabletitleLink a:hover {color:#fff;text-decoration : underline;}
#nobold {font-weight : normal;}
input , select , textarea , option {font-family : tahoma, verdana, 宋體, fantasy; font-size : 12px;line-height : 15px; color : #000000;}
.normaltextSmall {font-size : 11px; color : #000000;font-family : verdana, Arial, Helvetica, sans-serif, fantasy;}
.menuskin {border : 1px solid #666666; visibility : hidden; font-size : 12px;position : absolute;background-color : #efefef; background-image : url("{$PicUrl}dvmenubg3.gif"); background-repeat : repeat-y;}
.menuskin a {padding-right : 10px;padding-left : 25px; color : black;text-decoration : none;}
.menuitems {margin : 2px; padding : 1px; text-align : left; line-height : 14pt; }
.brightClass {background-color : #d7d7d7; }
.redfont {color : red;}
(今日發(fā)貼等紅色字的顏色)
.bluefont {color : #6595d6;}
小方塊的顏色
.imgonclick {cursor : pointer;}
.menu_popup {display : none; }
.itableborder {margin:0 auto;width : {$width};
line-height : 15pt;}
hr {height:0px;border :0px;border-top: #6595d6 1px solid;width : 100%; }
所有的分隔線的顏色
div.quote {margin : 5px 20px; border : 1px solid #cccccc; padding : 5px;background : #f3f3f3; line-height : normal;}
div.htmlcode {margin : 5px 20px; border : 1px solid #cccccc;padding : 5px;background : #fdfddf;font-size : 14px;
font-family : tahoma, 宋體, fantasy;font-style : oblique;line-height : normal;font-weight : bold;}
div.info {border-top : 1px dotted #cccccc; padding : 5px;line-height : normal; color : #c5c5c5;}
font.showtools {color : white; background-color : #b88ffc; }
.magicframe {border : 1px solid #cccccc; }
.pageinput {border : 1px solid #d6e0ef; background-color : #fafafa; height : 18px;
font-family : Arial, 宋體, fantasy; font-size : 11.5px; }
.copyright {color : #cccccc; line-height : 130%; }
#tdleft {float:left;border-right:1px solid #6595d6; (登陸信息與論壇信息中間那條豎線的顏色) width:50%; }
.mainbar1{border-left : 1px solid #6595d6; border-right : 1px solid #6595d6; width : {$width}; min-width :760px; margin : 0 auto;border-top : 1px solid #6595d6; (查看新貼 用戶列表等上的那一條線的顏色) border-bottom : 1px solid #6595d6; (查看新貼 用戶列表等下的那一條線的顏色) line-height:25px;background-color : #E4E8EF;(查看新貼 用戶列表等的背景顏色顏色)height:25px;}
.mainbar{border-left : 1px solid #6595d6; (改變最左上的半條線的顏色) border-right : 1px solid #6595d6; (改變最右上的半條線的顏色)width : {$width}; min-width :760px; margin : 0 auto;line-height:22px;background-color : #fff;}
.mainbar0{width : {$width};min-width :760px;margin : 0 auto;
line-height:22px;background-color : #fff;}
.mainbar2{border-left : 1px solid #6595d6; (版塊列表最左邊下半條線的顏色) border-right : 1px solid #6595d6; (版塊列表最右邊下半條線的顏色)width : {$width};min-width :760px; margin : 0 auto;border-bottom : 1px solid #6595d6;(版塊列表最底下那條線的顏色) line-height:22px;background-color : #E4E8EF; (斑竹下面的那一長條的背景顏色) }
.mainbar3{border-left : 1px solid #6595d6; (友情鏈接和論壇在線情況的最左邊的那條線) border-right : 1px solid #6595d6; (友情鏈接和論壇在線情況的最右邊的那條線)border-bottom : 1px solid #6595d6;(友情鏈接和論壇在線情況的最底下的那條線)width : {$width};min-width :760px; margin : 0 auto;background-color : #fff;(背景色)}
.mainbar4{border-left : 1px solid #6595d6; (分頁面版主左邊那條線的顏色) border-right : 1px solid #6595d6;(分頁面版主右邊那條線的顏色)border-top : 1px solid #6595d6;(分頁面版主上面那條線的顏色) width : {$width};min-width :760px;margin : 0 auto;background-color : #fff;height:25px;line-height:25px;}
.index_left_states{border-right : 1px solid #6595d6; (改變論壇狀態(tài)圖標(biāo)右邊的那條線的顏色)width :46px;float:left;height:60px;background-color : #fff;}
.index_right{float:right;width :240px;text-align : left; line-height:25px;}
.index_left_states img{margin-top:28px;}
.boardlogo{float:right;margin-top:4px;margin-right:5px;border:0px;}
(版塊圖片的樣式)
#topbar_top{background-image : url("{$PicUrl}css/default/topbg.gif"); height:9px;line-height:9px;font-size : 0px;color : #6595d6;}
#topbar_mid{height:70px;text-align : left;background-color : #fff;}
#topbar_bottom{background-image : url("{$PicUrl}css/default/bottombg.gif");height:9px;line-height:9px;font-size : 0px;color : #6595d6;}
#topbar_menu{background-image : url("{$PicUrl}css/default/tabs_m_tile.gif"); height:22px;line-height:22px;text-align : left;}
#topbar_mid_l{width:25%;float:left;margin-left:1px;margin-top:5px;min-width:180px;}
#topbar_mid_m{width:60%;float:left;margin-top:5px;min-width:468px;}
#topbar_mid_r{float:right;margin-top:5px;min-width:90px;line-height:15pt;text-align :right;margin-right:5px;}
.menudiv1{float:left;margin-left:2px;height:20px;line-height:20px;background : url("{$PicUrl}navspacer.gif") no-repeat;text-indent:8px;}(首頁菜單條分隔圖片的樣式)
.menudiv2{float:left;margin-left:2px;height:20px;line-height:20px;text-indent:8px;}
div.th{border: 1px solid #6595d6; (改變th上的那條橫線的顏色) border-bottom : 0px; width : {$width};min-width :760px;margin : 0 auto;background-image : url("{$PicUrl}css/default/bg1.gif");(改變th的背景)
background-color : #4455aa; color : white;font-size : 12px;font-weight : bold;height : 26px;line-height : 26px; text-align : left;text-indent: 5px;}
div.th div{height : 26px;line-height : 26px;text-align : center;text-indent:0px; }
div.th a {color : #fff;text-decoration : none; }
div.th a:hover {color : #fff;text-decoration : underline; }
div.th img{border:0px;margin-top:9px;}
.bottomline{height :24px;line-height :24px;border-bottom : 1px solid #6595d6;float:left;}
#rules{border-bottom : 1px solid #6595d6;text-align : left; line-height : 15px; }
版規(guī)下面那條線的顏色
#rulesbody{text-indent:24px;padding:10px;}
.list1{float:left;width:32px;border-right : 1px solid #6595d6;}
回復(fù) 人氣 狀態(tài)旁邊的那條線的顏色
.list_r{float:right;width:400px;border-left : 1px solid #6595d6; }
帖子列表th樣式背景作者左邊的那條線的顏色
.list{border-left : 1px solid #6595d6; (帖子列表左邊的那條線的顏色) border-right : 1px solid #6595d6;(帖子列表右邊的那條線的顏色)border-bottom : 1px solid #6595d6;(帖子列表底下的那條線的顏色)width : {$width};min-width :760px;margin : 0 auto;background-color : #fff; (貼子標(biāo)題列表的背景顏色) height:26px;line-height:26px;text-align : left;overflow :hidden;}
.list div{height:26px;overflow :hidden;}
.list_s{float:left;text-align : center;width:32px;border-right : 1px solid #6595d6; (帖子列表狀態(tài)圖片右邊那條線的顏色) background-color :#e4e8ef; (帖子列表狀態(tài)圖片下的背景顏色) }
.list_s img{margin-top:6px;}
.list_a{float:left;text-align : center;width:80px;border-right : 1px solid #6595d6; (帖子列表作者右邊那條線的顏色) background-color : #e4e8ef; (帖子列表作者的背景顏色)}
.list_c{float:left;text-align : center;width:50px;border-right : 1px solid #6595d6; (帖子列表回復(fù)和人氣右邊的那條線的顏色) background-color : #fff;(帖子列表回復(fù)和人氣的背景顏色) }
.list_t{float:left;text-align : center;width:120px;margin-left:5px;}
.list_r1{float:right;width:400px;border-left : 1px solid #6595d6; (貼子列表作者左邊的那條線的顏色) background-color : #e4e8ef; (最后更新的背景顏色) }
.list_img{float:left;text-align : center;}
.list_img img{margin-left:2px;margin-top:8px;margin-right:8px;border:0px;}
form{margin:0px;}
#posttopic{width:85px;height:26px;float:left;background-image : url("{$PicUrl}postnew.gif"); margin : 2px;cursor:pointer;}
(發(fā)表新貼的圖標(biāo)樣式)
#postvote{width:85px;height:26px;float:left;background-image : url("{$PicUrl}votenew.gif"); margin : 2px;cursor:pointer;}
(發(fā)新投票的圖標(biāo)樣式)
#postpaper{width:85px;height:26px;float:left;background-image : url("{$PicUrl}xzb.gif"); margin : 2px;cursor:pointer;}
(發(fā)小字報的圖標(biāo)樣式)
#repost{width:85px;height:26px;float:left;background-image : url("{$PicUrl}mreply.gif");margin : 2px;cursor:pointer;}
(回復(fù)此帖的圖標(biāo)樣式)
#postalipay{width:85px;height:26px;float:left;background-image : url("{$PicUrl}alipay.gif"); margin : 2px;cursor:pointer;}
(發(fā)起交易的圖標(biāo)樣式)
.main{width : {$width};min-width :760px;margin : 0 auto;}
#boardmaster{margin-top:2px;text-align : left;}
#boardmaster a{margin-right:2px;}
#masterpic{float:left;width:20px;height:20px;margin-top:3px;background-image : url("{$PicUrl}team2.gif"); }
(分頁版主圖標(biāo)的樣式)
#boardmanage{float:right;margin-right:2px;}
#subject{text-align :left;text-indent:5px;}
#subject img{margin-top:5px;}
.listexpression{margin-left:2px;margin-top:2px;margin-right:8px;float:left;}
.filetype{margin-top:5px;margin-right:8px;float:left;}
.listtitle{float:left;}
.listtitle div{float:left;}
.listtitle img{margin-top:5px;margin-right:8px;float:left;}
.postlary1{border: 1px solid #6595d6; (帖子內(nèi)容外框表格線的顏色 樣式一)width : {$width}; min-width :760px;margin : 0 auto;background-color:#fff;(貼子內(nèi)容背景顏色一)text-align : left;}
.postlary2{border: 1px solid #6595d6; (帖子內(nèi)容外框表格線的顏色 樣式二) width : {$width}; min-width :760px;margin : 0 auto;background-color:#E4E8EF; (貼子內(nèi)容背景顏色二) text-align : left; }
.postuserinfo{float:left;width:190px;text-indent:24px;}
.post{border-left: 1px solid #6595d6;margin-left : 190px;min-height:300px;padding:10px;}
.postie{border-left: 1px solid #6595d6; (帖子內(nèi)容和快速回復(fù)中間的那一長條豎線的顏色) margin-left:190px;height:300px;padding:10px;}
.postbottom1{width : {$width};min-width :760px;margin : 0 auto;background-color:#fff;(帖子內(nèi)容頁IP以及引用 回復(fù)菜單那一條的背景顏色樣式一)height:28px;line-height:28px;border-left: 1px solid #6595d6;(帖子內(nèi)容頁快速回復(fù)上的最后一個帖的最左邊的那條線的顏色樣式1)border-right: 1px solid #6595d6;(帖子內(nèi)容頁快速回復(fù)上的最后一個帖的最右邊的那條線的顏色樣式1)text-align : left; }
.postbottom2{width : {$width};min-width :760px;margin : 0 auto;height:28px;line-height:28px;background-color : #e4e8ef; (帖子內(nèi)容頁IP以及引用 回復(fù)菜單那一條的背景顏色樣式二) border-left: 1px solid #6595d6; (帖子內(nèi)容頁快速回復(fù)上的最后一個帖的最左邊的那條線的顏色樣式2)border-right: 1px solid #6595d6;(帖子內(nèi)容頁快速回復(fù)上的最后一個帖的最右邊的那條線的顏色樣式2)text-align : left; }
#postend{border-bottom : 1px solid #6595d6;}
帖子內(nèi)容頁快速回復(fù)上的最后一個帖的最下面的那條線的顏色
.lockuser{height:30px;line-height:30px;width:150px;border: 1px solid #6595d6;border-top:3px double #6595d6;text-align : center;color:#00008B;margin :240px 0px 0px 10px;background-color : #e4e8ef;float:right;}
.vote{float:left;border-left: 1px solid #6595d6; (投票帖中間的那條線的顏色) height:28px;}
.li1{border-left : 1px solid #6595d6;
line-height : 28px;height : 28px;}
.li2{border-left : 1px solid #6595d6; line-height : 28px;height : 28px;background-color : #e4e8ef;}
如對本文有疑問,請?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會為你解答!! 點擊進入論壇