建站學院(LieHuo.Net)訊 現在的網頁制作已經基本上告別了table式，在w3c日益發展的今天，國內知名論壇phpwind更是將css運用的非常靈活，但是對于現階段的草根站長來說，有很多朋友對css一知半解，甚至完全不懂。如何解決這一問題，現學肯定是來不及的。于是pw論壇將css樣式的每句語法都進行了詳細的描述，只要您懂中文，就能看會，建站學院的小編特別將此帖轉載到這里，并增加了部分描述。
| 以下為引用的內容： body{font-size:9pt; background:url($imgpath/$stylepath/bodybg.gif) repeat-x ; font-family:Verdana; color:#333} /*網頁頁面定義：依次定義了字體大小,背景,字體樣式,字體顏色,如font-size代表文字大小*/ h1,h2,h3,h4,h5,h6,form,body{padding:0;margin:0} /*設置部分標簽的內填充和外邊距 [ 沒有重定義的必要 ]*/ td,th,div{word-break:break-all;word-wrap:break-word} /*設置td、th和div元素內的文本強行截斷單詞，此代碼僅對ie有用。 [ 沒有重定義的必要 ] */ img{border:0} /*默認圖片邊框初始化* border是邊框的意思/ [ 沒必要修改 ] h1{font-size:16px;margin:0;} /* 文章瀏覽頁里得標題樣式 */ [ 沒必要修改 ] h3,h2{display:inline;font-size:1.0em;} h3{font-weight:normal} h3 a{color:#444;margin-right:.5em;} /*h3 文章列表頁文章標題*/ h2 a{color:#000;} /*h2 板塊列表頁板塊名稱標題*/ .c{clear:both;height:0px;font:0px/0px Arial;} /* 清除浮動樣式 [ 沒必要修改 ] */ .b{ font-weight:700} /* 字體加粗 [ 沒必要修改 ] */ .w{white-space:nowrap} /* 強制在同一行內顯示所有文本 [ 沒必要修改 ] */ .tal{text-align:left} /*文本左對齊*/[ 沒必要修改 ] .tac{text-align:center} /*文本中對齊*/ [ 沒必要修改 ] .tar{text-align:right} /*文本右對齊*/ [ 沒必要修改 ] .fr{float:right} /*往左邊浮動*/ [ 沒必要修改 ] .fl{float:left} /*往右邊浮動*/ [ 沒必要修改 ] /*a link 基本連接顏色*/ a{text-decoration:none;color:$linkcolor} 鏈接樣式[鼠標未移動上去，顯示的樣式] a:hover{color:#0070AF; text-decoration:underline} /*鼠標移動上去顯示的樣式*/ /*字體大小*/ [ 沒必要修改 ] .f9{font-size:10px;} .f10{font-size:11px;} .f12{font-size:12px} .f14{font-size:14px} .fn,.fn a{font-weight:normal} /*去除粗體字*/ [ 沒必要修改 ] /*span color 數值自定義*/ .s0{color:#333} .s1{color:#008000;} /*綠色*/ .s2{color:#984B98;} /* 紫色 */ .s3{color:#FA891B;} /*橙色*/ .s4{color:#0033FF;} /* 藍色 */ .s5{color:#659B28} /* 綠淺色 */ .s7{color:#ff00a2;} /*粉色*/ .s8,.s8 a{color:#006699;} /*深藍*/ .gray,.gray a{color:#888;} /*次要文字顏色-可定義*/ .gray3{color:#777;} .gray2{color:#94938c;} .link5{ color:#006AAA} /*深藍*/ /*main color 數值自定義*/ .f_one /*首頁版塊里的第一顏色*/ .f_two /*首頁版塊里鼠標移動到上面所顯示的顏色*/ .t_one /* 主題列表版塊里的第一顏色*/ .t_two /* 主題列表版塊里鼠標移動到上面所顯示的顏色*/ .r_one /* 主題瀏覽里的主題內容背景*/ .r_two /* 主題瀏覽里用戶信息的背景*/ 以上可以分開設置 如 .f_one{background:$forumcolorone;} .t_one{background:$forumcolorone;} .r_one{background:$forumcolorone;} 也可以默認設置 .f_one,.t_one,.r_one{background:$forumcolorone;} /*按鈕*/ .abtn{cursor:pointer;border:1px solid $tdcolor;color:$linkcolor;padding:2px 8px 2px; font-family:simsun;background:#fff;margin:2px;} .abtn:hover{border:1px solid $tablecolor;text-decoration:none;} /*連接文字按鈕*/ .btn{cursor:pointer;color:#fff;background:#80d1fb url($imgpath/$stylepath/bg.png) 0 top repeat-x;border-width:1px;padding-left:15px;padding-right:15px;vertical-align:middle} /* 全局通用按鈕設置 */ .btn2{border: 1px solid $tdcolor;background:$forumcolortwo;border-width:1px;padding-left:5px;padding-right:5px;vertical-align:middle;color:#555;} .btn2:hover{border:1px solid $tablecolor;color:#0070AF;} .btn3{margin-left:2em;vertical-align:middle;cursor:pointer;text-decoration:underline;} /*其他類型按鈕*/ /*form*/ textarea,input,select{font:12px Arial;padding:1px 3px 0 3px;vertical-align:middle;margin-bottom:1px} /* 輸入框,標題填寫,下拉框 綜合樣式 [可以一起設置，也可以分開在下面的幾個表里設置] */ select{border:solid 1px $tdcolor;} /* 下拉框具體設置*/ [ 沒必要修改 ] .input{border: 1px solid; border-color: #c0c0c0 #ededed #ededed #c0c0c0;padding:2px 0px 2px 1px;font-size:1.0em;vertical-align:middle;color:#000;} /* 標題填寫輸入框 */ form{display:inline;} /*無修改必要*/ textarea{border: 1px solid; border-color: #c0c0c0 #ededed #ededed #c0c0c0;} /* 大型文本輸入框樣式 */ /*header*/ #header{width:$mtablewidth;margin:auto;} /*頭部寬度樣式 [后臺風格編輯里的 頭部和尾部表格寬度設置之一] */ /*自定義導航*/ #toptool{ padding:.5em 1em; text-align:right; line-height:100%;border-bottom:1px solid #eee;} .listinline{ padding:0; margin:0; list-style:none;} .listinline li{ padding:0 .7em; border-right:1px solid #eee; display:inline;} /*頭部導航樣式*/ /*banner*/ .banner img{vertical-align:middle;} /*圖片居中顯示[無修改必要]*/ /*top-logo下導航背景*/ #mainNav{background:url($imgpath/$stylepath/bg.png) 0 -300px repeat-x #0082C1;position:relative;_height:30px} /* 重要欄目導航 [如 社區服務等] */ /*guide*/ .guide { margin:0; list-style:none; padding:5px 1em 0; float:right} .guide li{ float: left; margin:0; padding:0} .guide li a{ float:left; padding:0 .6em; color:#fff; line-height:22px;*line-height:23px; height:25px;*word-wrap:normal;*white-space:nowrap} .guide li.drop-item a{ padding-right:1.2em; background:url($imgpath/$stylepath/drop-icon.gif) no-repeat right .7em} .guide li a:hover{ background-color:#4598C6; text-decoration:none; color:#fff} .guide li.current a{ background-color:#006AAA; font-weight:bold; border:1px solid #4598C6; border-bottom:0} /* 重要欄目導航連接樣式 [如 社區服務等] */ /*top信息開關*/ #one-key {position:absolute;left:.6em; bottom:-1px; _bottom:-2px;width:32px; height:20px; cursor:pointer} .one-hidden {background:url($imgpath/$stylepath/infobox_13.png) 0 top no-repeat; } .one-show {background:url($imgpath/$stylepath/infobox_13.png) 0 bottom no-repeat;} /**頭部個人信息開關/ /*top用戶名*/ #user-login{ padding-left:50px; color:#fff; padding-bottom:.2em} #user-login a{margin-right:.5em;} /*頭部個人信息開關右邊的用戶名 與設置 的樣式*/ /*index info*/ #profile-menubar{border:$tdcolor 1px solid;margin-top:-.6em;background:url($imgpath/$stylepath/bg.png) 0 -400px repeat-x #E1F6F9;} #infobox{ border:1px solid #eee; border-top:0; padding:.2em .5em .5em;margin-top:1px; background:#fff url($imgpath/$stylepath/bg.png) 0 -400px repeat-x;} #infobox td{ vertical-align:top} /* 首頁登陸框的樣式 [包含公告欄] */ /*收藏板塊*/ #fav-fid{ line-height:150%} #fav-fid ul{ padding:0; margin:0 0 0 75px; color:#aaa;} #fav-fid li{float:left;*word-wrap:normal;*white-space:nowrap;padding:0; margin:0; padding-left:1em;list-style:none;background:url($imgpath/$stylepath/fav-fid.gif) .2em .5em no-repeat;} /*頭部簽名*/ #honor {color:#333;line-height:1.3em; padding:.2em 0 0 .1em;} /*通用公告框*/ #breadcrumbs{ margin-top:8px;overflow:hidden;border:1px solid $tdcolor; height:28px; padding:0 1em 0 0;background:url($imgpath/$stylepath/menubg.gif) repeat-x #EFFCFE; line-height:27px;*line-height:26px;} #breadcrumbs .crumbs-item{ overflow:hidden; height:28px; padding:0 1.3em 0 1.3em;background:url($imgpath/$stylepath/breadcrumbs-item.gif) right top no-repeat; float:left; position:relative ; margin-right:-7px;} #breadcrumbs .crumbs-item .strong{color:#60afe6;*line-height:29px;_line-height:29px;} #breadcrumbs .crumbs-item i { position:absolute; height:28px; width:7px; left:0px; top:0} #breadcrumbs .crumbs-item:hover i{ background:url($imgpath/$stylepath/breadcrumbs-item.gif) right bottom no-repeat;} #breadcrumbs .crumbs-item:hover{ background-color: #EFF9C8;text-decoration:none} #notice{padding:.3em 0;height:18px;} #notice a{padding-left:1em; background:url($imgpath/$stylepath/dotB.png) no-repeat 0 .2em; margin-left:1em} /*main*/ #main{width:$tablewidth;margin: auto; padding:1px 0 0} /* 中間得整體框架樣式 */ /*table*/ .t{border:1px solid $tablecolor;border-top:2px solid $tablecolor;margin:0 auto 8px; height:auto; overflow:hidden;} /* 風格里所有的框架邊框樣式 [后臺風格編輯里的 表格外邊框顏色 ] */ .t table{border:0px solid $forumcolorone;margin:0; width:100%;border-top:none;} /* 樣式.t里的table框架樣式 */ .t2{border-top:$tablecolor 1px solid;margin:0px auto 5px;} /* 瀏覽頁里的框架 [ 無修改必要 ] */ .t3{margin:4px auto 3px;} .t3 table{padding:0px;} /* [ 無修改必要 ] */ .t4{padding:0px;} /* [ 無修改必要 ] */ .t5{border:1px solid $tdcolor;margin:0 auto 8px; height:auto; overflow:hidden;} /*淺邊框樣式*/ /*table head*/ .h{border-bottom:1px solid $headborder;background:$headcolor;text-align:left;color:$headfontone;padding:2px .5em 0; line-height:220%;} .h span{font-weight:normal;} .h h2{font-weight:bold} .h a{font-family:Arial;color:$headfontone} .h span a,.h span{color:$headfonttwo;} .h a.a2{margin-left:12px;} /*標題欄樣式*/ .h1{color:#008ef1;margin:0 0 1em 0;} /*文章瀏覽頁標題補充樣式*/ .h2{background:$headcolor;color:$headfontone;text-align:left;padding:0 12px 0 12px;height:28px;line-height:28px;border-bottom:1px solid $tdcolor;} .h2 a{color:$headfontone;} /*文章瀏覽頁標題欄*/ .h3{border-bottom:1px solid $headborder;background:$headcolor;text-align:left;color:$headfontone;line-height:24px;padding-right:8px;} .h3 a{font-family:Arial;color:$headfontone} .closeicon{margin-top:.3em} /*無修改必要*/ .cate_fold{padding:0 5px 0 5px;margin-bottom:2px;text-decoration:none;} .cate_fold:hover{text-decoration:none;} /*無修改必要*/ /* tab */ .tab{float:left;padding:0 .8em 0;border:1px solid $forumcolorone;background:$headborder;border-bottom:0;line-height:200%;margin-top:3px;cursor:pointer;margin:2px 0;} .h span.activetab{border-color:$tablecolor;cursor:default;font-weight:700} /*table tr1*/ .tr1 th{padding:5px 10px;text-align:left;vertical-align:top;font-weight:normal;} .tr1 td.td1{border-bottom:1px solid $tdcolor;} /* 列表頁里左右框架樣式[如無必要不用修改] */ /*table tr2*/ .tr2{background:$cbgcolor url($imgpath/$stylepath/bg.png) 0 -200px repeat-x;color:$cbgfont;} .tr2 td,.tr2 th{line-height:18px;border-bottom:1px solid $cbgborder;padding:4px 6px 1px;} .tr2 a{color:$cbgfont;margin:0 2px 0} /* 表格副標題欄 可修改背景 框大小 [如 首頁 主題 文章 最后發表 版主] */ /*table tr3*/ .tr3{ line-height:130%;} .tr3 td,.tr3 th{border-bottom:1px solid $tdcolor;padding:.3em .6em;} .tr3 th{text-align:left;font-weight:normal;} .z .tr3:hover{background:$forumcolortwo;} /* 全局td樣式，如首頁板塊的下邊框 */ .tr4{background:$forumcolortwo;padding-left:12px;height:27px;line-height:27px;} /* 備用css[ 無修改必要 ] */ .tr td,.tr th{padding:2px} /*[ 無修改必要 ] */ /*topic content tips*/ .tpc_content{font-family:Arial;padding:0 2% 0 2%;margin:0 0 2%;line-height:2em;} .tpc_content font{line-height:1.1em;} .tpc_content a{text-decoration:none;color:#0070AF;} .tpc_content a:hover{text-decoration:underline} /*瀏覽頁內容樣式表*/ .tips{background:#fff;border:$cbgborder 1px solid;padding:5px;margin:0 1% 1em 0;float:left;text-align:left;} /* 本帖最近評分記錄等樣式 */ .tiptop{border-bottom:1px dotted #ccc ;padding:0 0 0 1px;height:27px;line-height:27px;margin:0 1em 1em 1em;} /*樓主,發帖時間所在的那個位置樣式*/ .tipad{margin:2em 1em 0 1em;padding-bottom:1em;} .tipad .fr a{color:#333;} /* 瀏覽頁里 評分,禁言,屏蔽,提醒等 樣式控制 */ .quote{width:80%;font-size:70%;color:#333;margin:8px 2px 2px;padding:0} .blockquote{width:80%;border:1px solid #ece9d8;background:#fffef3;border-left-width:3px;padding:5px;margin:0 0 1%;color:#736933;} /*應用提醒等樣式*/ .honor{line-height:130%;padding:3px 0 5px 8px;overflow:hidden;color:#777;} /*瀏覽頁里個性簽名樣式控制*/ /*menu*/ .menu{position:absolute;background:#fff url($imgpath/$stylepath/menubg.gif) center top repeat-x;border:1px solid $tdcolor;} .menu .bor{padding-bottom:8px;*padding-bottom:0px;_padding-bottom:0px;border:5px solid $tdcolor;} .menu li,.menu ul{padding:0; margin:0;} .menu td{line-height:20px;} .menu li{list-style:none;} .menu a{display:block;padding:3px 15px;} .menu ul.ul1 li a{display:inline;padding:0;} .pad{padding-bottom:8px;*padding-bottom:0px;} /*下拉或ajax彈出通用樣式*/ .menu .ul2{width:170px;padding:8px;} .menu .ul2 li{float: left; width: 7em;line-height: 24px;height: 24px; overflow: hidden;border-bottom: 1px solid $tdcolor;} .menu .ul2 li:hover{border-bottom: 1px solid $tablecolor;} .menu .ul2 li a:hover{text-decoration:none;background:$forumcolorone;} /*風格切換等下拉菜單*/ .menu h2 a{font-size:1.0em;color:#008ef1;height:20px;line-height:20px;width:550px;} .menu .ul3{width:600px;padding:6px;clear:both;} .menu .ul3 li{float:left;line-height:20px;*word-wrap:normal;*white-space:nowrap;display:inline;} .menu .ul3 a{float:left;} .menu .ul3 li a:hover{color:$tablecolor;} /*板塊菜單下拉菜單*/ /*pages*/ .pages{float:left;border:1px solid $tdcolor;height:24px;line-height:24px;margin:2px 5px 3px 0;} .pages ul{padding:0; margin:0} .pages ul li{list-style:none;float:left;} .pages ul li a{display:block;padding:0 7px 0 7px;} .pages ul li b{padding:0 5px 0 9px;background:#f7fadd;display:block;color:#FA891B;} .pages ul li a:hover{background:#f7fadd;color:#FA891B;text-decoration:none;} .pages ul .pagesone{height:24px;_height:23px;margin-left:5px;border-left:1px solid $tdcolor;padding-left:12px;background:#fefff3;} .pages input{border:1px solid $tdcolor;font:12px/15px Verdana;height:14px;color:$cbgfont;margin-right:5px;margin-bottom:3px;*margin-bottom:2px;_margin-top:3px;} /*分頁代碼*/ /*footer*/ #footer{background:#fff url($imgpath/$stylepath/menubg.gif) 0 1px repeat-x;border-top:1px solid $tdcolor;border-bottom:3px solid $headborder;} .footer{width:$mtablewidth;text-align:right;margin:auto;padding:.8em 0 .3em;} /*底部信息樣式*/ /*wind7 begin*/ #wrapA{ width:100%; margin:auto; max-width:1250px} /*中間框補充樣式*/ .cc{ zoom:1; overflow:hidden;_overflow:inherit} [ 沒必要修改 ] /*通用下拉*/ .content-dropB{margin-top:2px;} .dropB{cursor:pointer;text-indent:-2000em;background:url($imgpath/$stylepath/dropB-cion.gif) 0 0 no-repeat;width:15px;height:12px; overflow:hidden; ;font:0/0 a;float:left} .dropB:hover{background-color:$tablecolor; background-position:0 -20px;} /*如 頭部，我的回復旁邊的那個加號下拉*/ .listmg{ padding:0; margin:0; list-style:none;} .listmg li{ padding:0 .7em; border-right:1px solid #eee;cursor:pointer;} .bdbdash{border-bottom:1px dashed #ccc} |
如果還有不明白的，請您在評論中留言，我們會在最短的時間內回復給您。
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
