dl 内容块

dt 内容块的标题

dd 内容

可以这么写：

<dl>

<dt>标题</dt>

<dd>内容1</dd>

<dd>内容2</dd>

</dl>

      <dl class="tbox light">

    在layout.css 中找到 tbox 的相关定义，其他的都不用罗嗦了，只有一句大家注意看一下   

.tbox dt strong{

height: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='light'><strong>特别推荐</strong></dt>

这里的 vlass 我就不明白了，不知道什么什么意思了。有知道的可以告诉小弟一下。

 

        <dd class='light'>

          <ul class="d2 ico2">

           下面的样式 已经在上面 分析过了。

          </ul>

        </dd>

      </dl>

    </div>

哦了，这些就是模板上面部分的部分 css 详解，大家是否明白了，相信让大家改个位置，变个边框线的颜色应该没有问题了吧

<div class="picnews">//大家找到与之相对应的CSS 这里是定义图文资讯的css，该宽度应该和pleft的宽度一样，除非你想要自己另外定义它的宽度。

      <dl class="tbox light">

        <dt class='light'><strong>图文资讯</strong></dt>

此处调用 dt.light strong{

background:url(../images/fbico2.gif) 5px 5px no-repeat;

} 这个CSS。

        <dd class='light'>

          <ul class="e1">

调用e1，.e1{/* 横向浮动的图片列表 120*90 */

width:100%;

overflow:hidden;

clear:both;

padding-top:10px;

padding-bottom:8px;

}以上是定义整体的图片显示空间。

.e1 li{

width:126px;定义每个图片的或者新闻列表的宽度，这个宽度不是随便定义的要具体的算一下，比如126*5+5*12=690

因为是5张图片，所以这么来算，在加上 .light dd{

border-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 .listbox{

width:720px;这个地方我觉得是为了下面容易分割。352+8=360，

overflow:hidden;超出就隐藏，因为pleft才712，所以多余的会隐藏。

float:left;

clear:both;

overflow:hidden;

}

.index .listbox dl{

width:352px;//内容块为352，大家都知道是调用了2列，但是大家可以看到其实第2列右边是没有空隙的，所以总宽度还是352+8+352=712px,正好是pleft的宽度，看来作者真是想的够周到的了。

margin-right:8px;

margin-top:8px;

float:left;

}

{dede:channelartlist}

      <dl class="tbox">/调用tbox ,不调用这个下部也没有 横线啊？

        <dt><strong><a href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a></strong><span class="more"><a href="{dede:field name='typeurl'/}">更多...</a></span></dt>调用标题.tbox dt strong 和上节课哪个调用特别推荐 是一个道理。

        <dd>

          <ul class="d1 ico3">

          {dede:arclist titlelen='60' row='8'}

            <li><span>[field:pubdate function="MyDate('m-d',@me)"/]</span><a href="[field:arcurl /]">[field:title /]</a></li>

          {/dede:arclist}

          </ul>//这里面有个 d1 ,主要是用来控制 每一行输出的样式，没有什么特殊的，就不啰嗦了。ico3就是给每个新闻标题加个前置图片。

        </dd>

      </dl>

{/dede:channelartlist}

    </div>

    <!-- /listbox -->

</div>

<!-- /pleft -->

至此，pleft 的css 分析结束了 。