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的样式控制器做出来的.本站原创文章

相关文章：

你感兴趣的文章：

标签云：