本文章來講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
