DEDECMS 之CSS篇.doc

DEDECMS 之CSS篇首先，打开后台-模板-默认模板管理-index.htm.看到有一句，link href=dede：global.cfg_templeturl/style/dedecms.cssrel=stylesheetmedia=screentype=text/css/说明，我们模板是根据这个CSS来布局网页的，于是我们就打开网站目录下面的templetsstylededecms.css.然后来分析一下CSS的构成。我们根据主页的调用，来研究CSS这样容易理解。我们打开主页模板，找到：div class=w960 center clear mt1/*这句是控制除了网站头部和友情链接的所有结构样式*/那么w960 center clear mt1都定义了什么呢?我们打开DEDECMS.CSS找打相关的定义。/*-stock-*/.centermargin：0px auto；定义了CSS模块的边缘位置都是0，也就是这个center的层距离上右下左都是0px；.w960width：960px；定义了整体的宽度为960px；/*position：relative；*/.s_userinfomargin-bottom：0px；定义了首页右部下的互动中心的下面边缘为0px；.mt1/*(margin-top*1)*/margin-top：8px；定义了mt1的顶部边缘为8px；.pright.mt1margin-top：0px；定义了pright下面的mt1顶部边缘为0px；.mt2/*(margin-top*2)*/margin-top：16px；顶部边缘为16px；.clearoverflow：hidden；如果clear层里面的内容超出了层的范围就隐藏起来。div class=pleft这个pleft的定义没有在dedecms.css中，但是我们会发现一句话import url(layout.css)；import url(page.css)；这说明，在dedecms.css中引用了page.css和layout.css这两个样式表，于是我们就在page.css中找到了pleft的定义.pleftwidth：712px；定义了宽度float：left；该层向左浮动overflow：hidden；超出范围则隐藏div class=bignews在该层下面调用的是新闻头条的内容，看看它的css.index.bignewswidth：424px；height：400px；float：right；向右浮动border：1px solid#DFF2F5；表示边框线用#dff2f5的实体颜色填充background：url(./images/headbg-top.gif)repeat-x；背景图片为headbg-top.gif并且横向平铺overflow：hidden；超出则隐藏。所以，我们看到头条的这部分是在flash幻灯片右边显示，并且加上了浅蓝色的边框线。！-头条-div class=onenews再来看看onenews是如何定义的。.index.bignews.onenewsmargin：0 3px 03px；左右外边距分别空3个像素padding：7px 6px；上左内边距分别空7，6个像素border-bottom：1px dashed#EBEBEB；下边框加一个#ebebeb的虚线所以我们看见头条的文章左右都有一定的距离，并且下面还有一个虚线显示/div！-/onenews-这个下面调用的是以往的头条，默认的有4篇文章，调用了d1 d1arc 2个css.index.bignews div.d1padding：6px 10px；clear：both；这句话是清除浮动，如果不加它，大家可以试试看，是不是d1这个层就跑到头条的右边了。width：406px；overflow：hidden；.index.bignews div.d1arcmargin-right：12px；width：190px；float：left；因为此时要调用4篇文章，改文章是2*2排列的，如果不加这个属性，新闻就应该垂直排列了(因为你刚才用clear：both清除浮动啦)，大家试试看是不是这样的。height：24px；line-height：24px；行间距，即字体最底端与字体内部顶端之间的距离overflow：hidden；！-/头条-div class=newarticle最新文章/div下面看看newarticle这个css吧，还是拿快学网的首页举例子，上面的这句是用来显示最近更新那几个绿颜色字的，看看它是怎么定义的。.index.bignews div.newarticleheight：24px；高度background：url(./images/new-article.gif)8px 3px no-repeat；背景图片在x轴8px和y轴3px出出现font-size：0px；color：#fff；所以，我们能看到那个最近更新并且还有一个横条，其实它是个图片，大家右键图片另存为看看就知道了ul class=c2 ico1这里面调用了c2和ico1两个css.index.bignews ul.c2width：416px；padding：0px 4px 0px；内边距为上0右4下0 clear：both；清除浮动和上面的意思一样overflow：hidden；ico1这个css在layout.css中了。.ico1 lipadding-left：16px；指的是新闻列表左内边距为16px background：url(./images/ico-1.gif)7px 11px no-repeat；背景在7px,11px处出现，所以我们看到最新文章的列表左边都有一个小黑点，这个小黑点就是ico-1.gif/ul/div！-/bignews-到此，中部的头条新闻和最近更新已经分析完了。div class=flashnews看看flash的css定义.index.flashnewswidth：280px；height：192px；overflow：hidden；float：left；这句决定了，flash的新闻列表在头条的左边显示。如果你把bignews和flashnews的float属性互换一下应该是上面结果呢?大家试试看。/div！-/flashnews-div class=latestnews这边是特别推荐调用的样式，还是来看看css.index.latestnewswidth：280px；height：200px；margin-top：8px；float：left；.index.latestnews dl ddpadding：2px 5px；.index.latestnews ul acolor：#555；这里面就不用解释了吧，可以和上面的对照一下就能明白上面意思了。关键dl dt dd要弄明白是什么意思。dl内容块dt内容块的标题dd内容可以这么写：dl dt标题/dt dd内容1/dd dd内容2/dd/dl dl class=tbox light在layout.css中找到tbox的相关定义，其他的都不用罗嗦了，只有一句大家注意看一下.tbox dt strongheight：26px；line-height：26px；！important；line-height：25px；这一句是为了兼容IE和FF,比如font-size：12px！important；font-size：13px；在IE里面，由于IE不理解！important，则字体大小按照最后设定的13px展示而FF里面，！important为提高优先级别，则字体大小按照！important标记的12px展示某些css某些代码在这两类浏览器里的显示是有差别的(注意这也是使用！important的主要原因所在)，比如height：21px；，在IE6和(IE7，FF)里显示就有差别，后者(IE7，FF)会比前者(IE6)少一个像素。padding-left：22px；padding-right：4px；display：block；/变成块级，因为strong是内联元素，必须强制转换，不然的话你是没有办法定义padding的。大家可以百度一下内联元素看看。float：left；color：#397CBE；background：url(./images/fbico.gif)5px 6px no-repeat；letter-spacing：1px；dt vlass=lightstrong特别推荐/strong/dt这里的vlass我就不明白了，不知道什么什么意思了。有知道的可以告诉小弟一下。dd class=lightul class=d2 ico2下面的样式已经在上面分析过了。/ul/dd/dl/div哦了，这些就是模板上面部分的部分css详解，大家是否明白了，相信让大家改个位置，变个边框线的颜色应该没有问题了吧div class=picnews/大家找到与之相对应的CSS这里是定义图文资讯的css，该宽度应该和pleft的宽度一样，除非你想要自己另外定义它的宽度。dl class=tbox lightdt class=lightstrong图文资讯/strong/dt此处调用dt.light strongbackground：url(./images/fbico2.gif)5px 5px no-repeat；这个CSS。dd class=lightul class=e1调用e1，.e1/*横向浮动的图片列表120*90*/width：100%；overflow：hidden；clear：both；padding-top：10px；padding-bottom：8px；以上是定义整体的图片显示空间。.e1 liwidth：126px；定义每个图片的或者新闻列表的宽度，这个宽度不是随便定义的要具体的算一下，比如126*5+5*12=690因为是5张图片，所以这么来算，在加上.light ddborder-left：1px solid#BFE0F9；border-right：1px solid#BFE0F9；border-bottom：1px solid#BFE0F9；padding：4px 4px 0px；/上左右分别为4px；overflow：hidden；这个当中的8px所以没有超出712，看来定义一个css不是那么容易的事啊，像我这样数学不好的真就不能弄的太清楚了。overflow：hidden；padding-left：12px；列表的左内边距刚才*5就是用它乘的。float：left；text-align：center；列表中的文字居中对齐。把它改成left看看哪个地方可以改变?/ul/dd/dl/div！-/picnews-div class=listbox/调用listbox css.index.listboxwidth：720px；这个地方我觉得是为了下面容易分割。352+8=360，overflow：hidden；超出就隐藏，因为pleft才712，所以多余的会隐藏。float：left；clear：both；overflow：hidden；.index.listbox dlwidth：352px；/内容块为352，大家都知道是调用了2列，但是大家可以看到其实第2列右边是没有空隙的，所以总宽度还是352+8+352=712px,正好是pleft的宽度，看来作者真是想的够周到的了。margin-right：8px；margin-top：8px；float：left；dede：channelartlistdl class=tbox/调用tbox,不调用这个下部也没有横线啊?dt strong ahref=dede：field name=typeurl/dede：field name=typename/a/strong span class=morea href=dede：field name=typeurl/更多./a/span/dt调用标题.tbox dt strong和上节课哪个调用特别推荐是一个道理。dd ul class