本文章来讲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.net/cssdiv/css.html
