css dt dl dd实例教程

   <dl id="msgdl">
                 <dd>
                    <span id="commentname">
                    <?php
                   echo $rs['gx_title'];
              ?>
                    </span>
                        <span id="commenttime">
                        <?php
                  echo $rs['gx_time'];
               ?>
                         </span>                
                   </dd>
                    <dt>
                     <p id="commentp">
                        <?php
                     echo $rs['gx_content'];
                  ?>
                        </p>
                    </dt>
                </dl>  

上面是加了php的代码我们来看看最后的效果。

效果还不错吧，下面我们就来看看css如何控制吧。我们看看msgdl,commentnam,commenttime,commentp这个名称是如何定义的

#commentname{
line-height:30px;
padding:0 0 0 15px;
color:#432914;
background:url(images/nameback.jpg) no-repeat top left;
height:36px;
width:90px;
display:block;
}
#commenttime{
font-size:9px;
}
#showcomment{
width:450px;
clear:left;
}

#commentp{
height:60px;
width:400px;
margin:30px 0 0 0;
padding: 0 0 0 30px;
background:url(images/line.jpg) repeat-x bottom left;
}

可能细心的朋友会发现msgdl并没有，因为我们让它占一行所以就没必要写了。哈哈。

本站原创转载注明: www.111cn.net