|
详细解释织梦DEDECMS的默认模板的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; background: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; } 文章来源：侠客站长站(www.) 详文参考：http://www./zz/ymzj/dedecms/201006/02-43256.html |
|
|
