css图文混排样式代码

本文章来讲css图文混排样式代码吧,这对新手是很有帮助了,下面我们先看看是以什么样式排列的吧.

就这种效果哦.好了我们先来看看他的css 代码吧.

<div id="ployMain">
            <h4><img src="../imgs/ploy_04.gif"></h4>
   <dl>
            <dt></dt>
            <dd class="dishTitle">青椒拆骨肉</dd>
            <dd class="dishMain">一直惦记着回民街的小吃，边走边吃下来，肚子圆得像个皮球了。....</dd>
            <dd class="dishOn"><a href="#">我要点评>></a></dd>
            </dl>
            <dl>
            <dt></dt>
            <dd class="dishTitle">青椒拆骨肉</dd>
            <dd class="dishMain">一直惦记着回民街的小吃，边走边吃下来，肚子圆得像个皮球了。....</dd>
            <dd class="dishOn"><a href="#">我要点评>></a></dd>
            </dl>         
           
            </div>

这是就上面图片我们用css+div布局写出来的,下面我们来看看样式ployMain,dishTitle,dishMain,dishOn

#ployMain {
 float: left;
 width: 436px;
}
#ployMain dl {
 padding-left: 20px;
 display: block;
 padding-top: 12px;
 clear: both;
 height: 100px;
}
#ployMain dt {
 display: block;
 float: left;
 height: 90px;
 width: 120px;
 background-color: #E0E0E0;
 border: 1px solid #A4C934;
5
}
#ployMain dt a {
 
}

dd.dishTitle {
 line-height: 22px;
 height: 22px;
 display: block;
 float: left;
 margin-left: 20px;
 color: #efa11c;
 font-weight: 700;
}
dd.dishMain {
 display: block;
 width: 250px;
 float: left;
 line-height: 22px;
 margin-left: 20px;
 padding: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #a4c934;
}
dd.dishOn {
 display: block;
 float: left;
 height: 30px;
 width: 250px;
 line-height: 30px;
 margin-left: 20px;
 text-align: right;
}
dd.dishOn a {
 color: #CC0000;
}哈哈由于是用dw的样式控制器做出来的.本站原创文章www.111cn.cn/cssdiv/css.html