DIV+CSS实现新闻图片列表通用
时间：2011-05-25 来源：ChaseMars
CSS样式:
View Code
View Code
*{list-style-type:none;margin:0;padding:0}
body{font:12px "宋体";color:#333;width:1000px;margin:0 auto}
a{font:12px;color:#333;text-decoration:none}
a:hover{text-decoration:underline;color:#0b565f}
img{border:0; padding:0;margin:0;}
h1,h2,h3,h4,h5,h6,h7,div,ul,li{ margin:0; padding:0;}
ul{ list-style-type:none;}
.cle{ clear:both;}
.font12{font-size:12px;font-weight:normal;line-height:24px; height:24px;}
.f-right{float:right}
.f-left{float:left}
.p-left10{padding-left:10px}
.p-top10{padding-top:10px}
.p-top5{padding-top:5px}
.p-right10{padding-right:10px}
.m-top5{ margin-top:5px;}
.m-top10{ margin-top:10px;}
.m-left10{ margin-left:10px;}
.m-right10{ margin-right:10px;}
.m-bottom10{margin-bottom:10px;}
/*标题开始*/
.title{height:23px;padding:0;margin:0;background-image: url(b1t.jpg);background-repeat: repeat-x;background-position: center; border:1px #A5C8E4 solid;}
.titletext{padding:0;float:left;line-height:23px;height:23px;font-size:14px;}
.bgimg{background-image: url(1.gif);background-repeat: no-repeat;background-position:10px center;text-indent:30px;}
.bgimgs{background-image: url(2.gif);background-repeat: no-repeat;background-position:10px center;text-indent:30px;}
.titlemore{width:50px;text-align:right;padding:0 10px;float:right;line-height:23px;height:23px;}
/*标题结束*/
/*内容*/
.content{border:1px #A5C8E4 solid; margin:0 0 10px 0;}
.divimg{border:solid #CCCCCC 1px; padding:3px; text-align:center;}
.divimg img{ width:120px; height:110px;}
body内容：
View Code
<!--文字列表【窄】-->
<div style="width:240px;">
<div class="title">
<h2 class="titletext bgimg">公司新闻</h2>
<div class="titlemore"><a href="#">more</a></div>
</div>
<div class="content" style="">
<ul>
<li class="font12 p-left10"><a href="#" target="_blank">“两面针”商标异议复审案</a></li>
<li class="font12 p-left10"><a href="#" target="_blank">•“两面针”商标异议复审案</a></li>
<li class="font12 p-left10"><a href="#" target="_blank">• “两面针”商标异议复审案</a></li>
<li class="font12 p-left10"><a href="#" target="_blank">• “两面针”商标异议复审案</a></li>
<li class="font12 p-left10"><a href="#" target="_blank">• “两面针”商标异议复审案</a></li>
<li class="font12 p-left10"><a href="#" target="_blank">• “两面针”商标异议复审案</a></li>
</ul>
</div>
</div>
<!--图片列表【宽】-->
<div style="width:705px;">
<div class="title">
<h2 class="titletext bgimgs">标题</h2>
<div class="titlemore"><a href="#">more</a></div>
</div>
<div class="content">
<ul class="m-top5">
<li class="f-left m-left10 m-bottom10"><div class="divimg"><img src="01.jpg" /><br /><span class="font12">创意数据测试</span></div></li>
<li class="f-left m-left10 m-bottom10"><div class="divimg"><img src="02.jpg" /><br /><span class="font12">创意数据测试</span></div></li>
<li class="f-left m-left10 m-bottom10"><div class="divimg"><img src="03.jpg" /><br /><span class="font12">创意数据测试</span></div></li>
<li class="f-left m-left10 m-bottom10"><div class="divimg"><img src="04.jpg" /><br /><span class="font12">创意数据测试</span></div></li>
<li class="f-left m-left10 m-right10 m-bottom10"><div class="divimg"><img src="05.jpg" /><br /><span class="font12">创意数据测试</span></div></li>
</ul>
<div class="cle"></div>
</div>
</div>
<!--文字列表【宽】-->
<div style="width:490px;">
<div class="title">
<h2 class="titletext bgimgs">标题</h2>
<div class="titlemore"><a href="#">more</a></div>
</div>
<div class="content">
<ul>
<li class="font12 p-left10"><span class="f-right p-right10">2011-15-23</span><a href="#">• “两面针”商标异议复审案</a></li>
<li class="font12 p-left10"><span class="f-right p-right10">2011-15-23</span><a href="#">• 商标使用许可合同不备案无效吗</a></li>
<li class="font12 p-left10"><span class="f-right p-right10">2011-15-23</span><a href="#">• 商品外形立体商标注册标准判断</a></li>
<li class="font12 p-left10"><span class="f-right p-right10">2011-15-23</span><a href="#">• 2008年保护国内企业注册商标</a></li>
<li class="font12 p-left10"><span class="f-right p-right10">2011-15-23</span><a href="#">• 2008年保护外国企业注册商标</a></li>
<li class="font12 p-left10"><span class="f-right p-right10">2011-15-23</span><a href="#">• 2008年涉嫌假冒注册商标犯罪</a></li>
</ul>
</div>
</div>
相关阅读 更多 +
