導讀:DEDE技術DEDE技術我們的一些新手站長一看到模板文件中的CSS的代碼密密麻麻的，就有點頭暈！我在網上找到一位熱心的站長給出了一份織夢模板的CSS詳解，以下就是代碼和代碼的解釋！織夢模板網dede模板免費。

其實，很多朋友不會CSS，如果把CSS精通了，美工就簡單多了。我把自己總結的織夢CSS全整理出來了。希望對你有所幫助，見下： /*---------- import ---------*/ //調用外部CSS中調用外部CSS的語法是@import url("file.css");直接插入到CSS文件或<style></style>之間就可以了。 @import url("layout.css"); @import url("page.css"); /*---------- base ---------*/  //基本樣式 *{ //*，通用符     padding:0px; //對像間隔，     margin:0px; //左右邊距 } html{ //所有html均適用此樣式     background:#FFF; } body{     font:12px Verdana,Arial,Tahoma; //正文字體，字號 } img{     border:none; //圖片，不顯示邊框 } a{//超鏈接     color:#3366CC;     text-decoration:none; //表示沒有下劃線 } a:hover{     color織夢文章模板:#F33;     text-decoration:underline; //表示有下劃線的 } ul{     list-style:none; } input,select,button{     font:12px Verdana,Arial,Tahoma;     vertical-align:middle; //堅直上居中排列 } /*---------- stock ---------*/ .center{ //中間主體部分，導航欄處     margin:0px auto; } .w960{     width:960px; //中間主體寬度960     position:relative; //它可以隨窗口大小變化 } .mt1{/* ( margin-top * 1 ) */ //樣式mt11，距頂端8PX     margin-top:8px; } .mt2{/* ( margin-top * 2 ) */     margin-top:16px; } .clear{     overflow:hidden; //讓瀏覽器窗口永遠不出現滾動條 } .fs-12{     font-size:12px; }織夢模板 .fc-f60{     color:#F60; } .fc-f90{     color:#F90; } .ipt-txt{     line-height:15px;     padding:4px 5px;     border-width:1px;     border-style:solid;     border-color:#666 #BBB #BBB #666;     font-size:12px;     margin-right:2px; } .btn-1{     width:56px;     height:23px;     border:none;     background:url(../images/btn-bg1.gif) no-repeat; //不平鋪,repeat-x為向上平鋪     line-height:25px; //行高為     letter-spacing:1px; //文字間隔屬性     overflow:hidden;     color:#2F592E; } .btn-2{     width:70px;     height:25px;     border:none;     background:url(../images/btn-bg2.gif) left top no-repeat;     line-height:25px;     overflow:hidden;     color:#444;     margin-right:2px; } .header{     width:100%;     padding-top:16px;     overflow:hidden; } .header a{     color:#777; } .header a:hover{     color:#390;     text-decoration:none; } .header .top{     clear:both;     overflow:hidden; } .header .title{     float:left;     padding-left:16px; } .header .title h1 a{     width:200px;     height:56px;     display:block;// 可以理解為塊。把這個區域變成塊狀。當然你加了寬度和高度效果不明顯了。如果去掉寬度和高度試試。再去掉display試試就發現問題了    font-size:0px;     text-indent:-200px;     overflow:hidden;     background:url(../images/top-logo.gif) center center no-repeat; //logo大小 } .header .banner{     width:480px;     height:56px;     float:left;     margin-left:40px;     overflow:hidden; //頂部圖片} .header .banner img{     width:480px;     height:56px;     display:block; } .header .rlink{     width:172px;     height:52px;     float:left;     margin-left:32px;     overflow:hidden;     padding-top:4px; } .header .rlink ul li{     width:78px;     height:21px;     background:url(../images/toprlink-bg.gif) left top no-repeat; //“收藏”等一些圖標    float:left;     margin-right:8px;     margin-bottom:8px;     overflow:hidden; } .header .rlink ul li a{     display:block;     color:#777;     line-height:21px;     text-indent:22px;     background-image:url(../images/toprlink-bg.gif);     background-repeat:no-repeat; } .header .rlink ul li a:hover{     color:#000; } .header .rlink ul li.r1 a{     background-position:0px -21px; //背景位置：100% -12px } .header .rlink ul li.r2 a{     background-position:0px -42px; } .header .rlink ul li.r3 a{     background-position:0px -63px; } .header .rlink ul li.r4 a{     background-position:0px -84px; } .header .welcome{     float:right;     margin-top:20px;     padding-right:10px;     color:#999; } .header .welcome a{     margin:0px 3px;     } .header .nav{//導航欄     width:100%;     height:32px;     background:url(../images/nav-bg.gif) repeat-x; //水平上平鋪，導航欄背景圖片    clear:both;     overflow:hidden; } .header .nav ul{     height:32px;     margin:0px auto;     overflow:hidden; } .header .nav ul li{     float:left;     line-height:31px;     background:url(../images/nav-bg.gif) 0px -32px no-repeat;     margin-left:-2px; } .header .nav ul li a{     height:32px;     padding:0px 16px 0px 17px;     display:block;     color:#FFF;     float:left; } .header .nav ul li a:hover{     color:#FF3;     } .header .search{     height:40px;     background:url(../images/search-bg.png) repeat-x;     clear:both; } .header .search .form{     padding-left:8px; 左部離8    padding-top:5px; //頂部離5     float:left; //從左開如排 } .header .search .form h4{     display:none; //文字已經變成塊狀了 } .header .search .form input.search-keyword{     width:156px;     height:18px;     border:none;     badede手機模板ckground:url(../images/search-bg.gif) left top no-repeat;     line-height:15px;     font-size:12px;     padding:5px 3px 0px 58px;     overflow:hidden; } .header .search .form select.search-option{     margin-left:2px; } .header .search .form button.search-submit{  //搜索按鍵的大小及樣式    width:68px;     height:22px;     border:none;     background:#F00 url(../images/search-bg.gif) right top no-repeat;     font-size:0px;     line-height:100px;     margin-left:2px;     *margin-left:5px;     overflow:hidden; } .header .tags{     float:left;     margin-left:16px;     padding-top:8px; }相關織夢模板網dede模板免費。

關鍵詞標簽: 標簽 CMS 詳解