一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

css图文混排样式代码

时间:2008-09-19 编辑:简简单单 来源:一聚教程网

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

css图文混排样式代码

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

 代码如下 复制代码


           


   

           

           
青椒拆骨肉

           
一直惦记着回民街的小吃,边走边吃下来,肚子圆得像个皮球了。....

           
我要点评>>

           

           

           

           
青椒拆骨肉

           
一直惦记着回民街的小吃,边走边吃下来,肚子圆得像个皮球了。....

           
我要点评>>

           
         
           
           

这是就上面图片我们用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.111com.net/cssdiv/css.html

热门栏目