相册分类列表页
相册分类列表页
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>在线运行</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style>
body{background:#FFF;font:12px "宋体", Arial;color:#333;margin:0;padding:0;}
div,form,img,ul,ol,li,dl,dt,dd,p{margin:0;padding:0;border:0;}
li{list-style-type:none;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
a{outline-style:none;color:#333;text-decoration:none}
a:hover{color:#049;text-decoration:underline;}
a.link_fc {
color: #333333;
font-size: 12px;
text-decoration: none;
}
.blank8{height:8px;overflow:hidden;clear:both;}
.clear{overflow:hidden;clear:both;font-size:0;height:0px;}
.reltv{position:relative;}
/*color*/
.red {color:#f00;}
.red a:link,.red a:visited {color:#f00; text-decoration:none}
.red a:hover {color:#f00; text-decoration:underline}
.link_00{font-size: 12px;color: #FF0000;}
.blue {color:#049;}
.blue a:link,.blue a:visited {color:#049; text-decoration:none}
.blue a:hover {color:#049; text-decoration:underline}
.main_list{width:960px;margin-top:8px;overflow:hidden;}
.main_list_title{height:36px;background:url(http://img1.soufun.com/house/detail_php/photo_images/xf_lpxc_listbg.jpg) repeat-x;overflow:hidden;}
.main_list_title li{display:inline;float:left;margin-right:2px;overflow:hidden;}
.main_list_title li .mlts1{float:left;width:10px;height:36px;background:url(http://img1.soufun.com/house/detail_php/photo_images/xf_lpxc_wxztitbg.jpg) no-repeat left;overflow:hidden;}
.main_list_title li .mlts2{float:left;height:26px;line-height:26px;background:url(http://img1.soufun.com/house/detail_php/photo_images/xf_lpxc_wxztitbg.jpg) no-repeat right;padding:8px 10px 2px 0;overflow:hidden;}
.main_list_title li.on .mlts1{float:left;width:10px;height:36px;background:url(http://img1.soufun.com/house/detail_php/photo_images/xf_lpxc_xztitbg.jpg) no-repeat left;overflow:hidden;}
.main_list_title li.on .mlts2{float:left;height:30px;line-height:30px;background:url(http://img1.soufun.com/house/detail_php/photo_images/xf_lpxc_xztitbg.jpg) no-repeat right;padding:4px 10px 2px 0;font-weight:bold;overflow:hidden;}
.main_list_title li a,.main_list_title li a:visited{color:#064756;}
.main_list_title li a:hover{color:#f00;text-decoration:none;}
.main_list_commnet{width:944px;border:#ddd 1px solid;border-top:none;padding:10px 7px 30px;overflow:hidden;}
.mlccom{width:944px;overflow:hidden;}
.mlccom li{display:inline;float:left;width:210px;margin:20px 13px 0;overflow:hidden;height:200px;}
.mlccom_img{cursor:pointer;position:relative;display:table-cell;width:204px;height:144px;border:#d4dede 1px solid;padding:2px;text-align:center;vertical-align:middle;overflow:hidden;}
.mlccom_img p{position:static;+position:absolute;top:50%;}
.mlccom_img p img{position:static;+position:relative;top:-50%;left:-50%;max-height:144px;border:0;overflow:hidden;}
.mlccom_txt{width:180px;height:44px;line-height:22px;padding:0 15px;margin-top:6px;text-align:center;overflow:hidden;}
.mlccom_txt a,.mlccom_txt a:visited{color:#064756;}
.mlccom_txt a:hover{color:#f00;}
.mlcpage{width:900px;padding-left:298px;margin-top:30px;overflow:hidden;}
.mlcpage li{display:inline;float:left;margin-right:2px;overflow:hidden;}
.mlcpage li.c1{height:19px;line-height:19px;border:#c4c4c4 1px solid;padding:0 9px;color:#c4c4c4;overflow:hidden;}
.mlcpage li.c2{height:19px;line-height:19px;background:#6a92db;border:#516cc4 1px solid;padding:0 9px;color:#fff;overflow:hidden;}
.mlcpage li.c3 a,.mlcpage li.c3 a:visited{cursor:pointer;display:inline-block;height:19px;line-height:19px;border:#a7bbcc 1px solid;padding:0 9px;color:#049;overflow:hidden;}
.mlcpage li.c3 a:hover{border:#516cc4 1px solid;color:#049;text-decoration:none;}
.mlcpage li.c4{color:#049;}
.mlcpage li.c5{margin-left:10px;line-height:21px;}
.mlcpage li.c6{margin-left:5px;line-height:21px;}
.main_tabox { width:958px; padding-left:2px; background:url(http://img1.soufun.com/house/detail_php/images/tabg.png) no-repeat 0 0; height:57px; overflow:hidden;}
.main_tabox_ul { float:left; display:inline; }
.main_tabox_ul .b1{float:left;padding:0 16px; height:57px;text-align:center; line-height:16px; display:inline; }
.main_tabox_ul .b2{float:left;width:2px; height:57px; overflow:hidden;background:url(http://img1.soufun.com/house/detail_php/images/tabg.png) no-repeat scroll right bottom transparent; }
.main_tabox_ul li span a { color:#515151; display:block; margin-top:10px; text-decoration:none!important; }
.main_tabox_ul li em { font-style:normal; color:#8f8f8f; display:block; }
.main_tabox_ul li.current {background: url(http://img1.soufun.com/house/detail_php/images/tabg.png) no-repeat center bottom; height:57px; text-align:center; line-height:16px; float:left; display:inline;}
.main_tabox_ul li.current span a { color:#0084d7; font-weight:bold; display:block; margin-top:10px; }
.main_tabox_btn { height:57px; float:left; display:inline; margin:0;}
.main_tabox_btn a { float:left; display:inline; margin:10px 0 0 6px;}
.hxsearch_db{width:930px;background:#f5f5f5;border:#ddd 1px solid;padding:7px; height:25px;}
.hxsearch_db li{display:inline;float:left;line-height:22px;margin-right:5px;position:relative; }
.hxsinput03_db{background:url(http://img1.soufun.com/house/detail_php/images/selectbg.png) no-repeat 0 0; border:1px solid #85a4c1; color:#888; padding-left:2px;overflow:hidden;}
</style>
<head>
<body>
<div style="width:1000px;margin:0 auto;margin-top:50px;"><h3>这儿为页面内容</h3>
<div class="main_list">
<!--导航 begin-->
<div class="main_tabox">
<ul class="main_tabox_ul">
<li class="b1">
<span><a href="http://difannitown.soufun.com/photo/3211031488.htm">全部图片</a></span>
<em>(110)</em>
</li>
<li class="b2"></li>
<li class="b1">
<span><a href="http://difannitown.soufun.com/photo/list_900_3211031488.htm">户型图</a></span>
<em>(16)</em>
</li>
<li class="b2"></li>
<li class="b1">
<span><a href="http://difannitown.soufun.com/photo/list_901_3211031488.htm">交通图</a></span>
<em>(1)</em>
</li>
<li class="b2"></li>
<li class="b1">
<span><a href="http://difannitown.soufun.com/photo/list_902_3211031488.htm">外景图</a></span>
<em>(1)</em>
</li>
<li class="b2"></li>
<li class="b1">
<span><a href="http://difannitown.soufun.com/photo/list_903_3211031488.htm">实景图</a></span>
<em>(31)</em>
</li>
<li class="b2"></li>
<li class="b1 current">
<span><a href="http://difannitown.soufun.com/photo/list_904_3211031488.htm">效果图</a></span>
<em>(8)</em>
</li>
<li class="b2"></li>
<li class="b1">
<span><a href="http://difannitown.soufun.com/photo/list_905_3211031488.htm">样板间</a></span>
<em>(10)</em>
</li>
<li class="b2"></li>
<li class="b1">
<span><a href="http://difannitown.soufun.com/photo/list_906_3211031488.htm">项目现场</a></span>
<em>(28)</em>
</li>
<li class="b2"></li>
<li class="b1">
<span><a href="http://difannitown.soufun.com/photo/list_907_3211031488.htm">配套图</a></span>
<em>(15)</em>
</li>
<li class="b2"></li>
<li class="b1">
<span><a href="http://difannitown.soufun.com/photo/list_1003_3211031488.htm">装修案例</a></span>
<em>(10)</em>
</li>
<li class="b2"></li>
</ul>
<div class="main_tabox_btn" style="float:right;padding-right:10px;">
<a href="http://www.soufun.com/Album/WebUpload_new.aspx?setting=newcode&newcode=3211031488" target="_blank"><img src="http://img1.soufun.com/house/detail_php/images/tabtn1.png" width="86" height="29" border="0"></a><!--<a href="http://jk3.photo.soufun.com/Album/SlideShowNewHouse.aspx?channelid=2&channelpk=3211031488"><img src="http://img1.soufun.com/house/detail_php/images/tabtn2.png" width="86" height="29" border="0" /></a>-->
</div>
</div>
<!--导航 end-->
<div class="main_list_commnet">
<ul class="mlccom">
<li>
<div class="mlccom_img">
<p><a target="_blank" href="http://difannitown.soufun.com/photo/d_other_103201012.htm"><img border="0" src="http://imgs.soufun.com/viewimage/house/2011_09/15/chengdu/1316051591693_000/200x144.jpg" alt="蒂梵尼TOWN效果图夜景" title="蒂梵尼TOWN效果图夜景"></a></p>
</div>
<div class="mlccom_txt">
<a title="蒂梵尼TOWN效果图夜景" target="_blank" alt="蒂梵尼TOWN效果图夜景" href="http://difannitown.soufun.com/photo/d_other_103201012.htm">蒂梵尼TOWN效果图夜景</a>
</div>
</li>
<li>
<div class="mlccom_img">
<p><a target="_blank" href="http://difannitown.soufun.com/photo/d_other_108162356.htm"><img border="0" src="http://imgs.soufun.com/viewimage/house/2012_02/08/chengdu/1328685248470_000/200x144.jpg" alt="蒂梵尼TOWN效果图鸟瞰" title="蒂梵尼TOWN效果图鸟瞰"></a></p>
</div>
<div class="mlccom_txt">
<a title="蒂梵尼TOWN效果图鸟瞰" target="_blank" alt="蒂梵尼TOWN效果图鸟瞰" href="http://difannitown.soufun.com/photo/d_other_108162356.htm">蒂梵尼TOWN效果图鸟瞰</a>
</div>
</li>
<li>
<div class="mlccom_img">
<p><a target="_blank" href="http://difannitown.soufun.com/photo/d_other_103201010.htm"><img border="0" src="http://imgs.soufun.com/viewimage/house/2011_09/15/chengdu/1316051589834_000/200x144.jpg" alt="蒂梵尼TOWN效果图中庭" title="蒂梵尼TOWN效果图中庭"></a></p>
</div>
<div class="mlccom_txt">
<a title="蒂梵尼TOWN效果图中庭" target="_blank" alt="蒂梵尼TOWN效果图中庭" href="http://difannitown.soufun.com/photo/d_other_103201010.htm">蒂梵尼TOWN效果图中庭</a>
</div>
</li>
<li>
<div class="mlccom_img">
<p><a target="_blank" href="http://difannitown.soufun.com/photo/d_other_103282559.htm"><img border="0" src="http://imgs.soufun.com/viewimage/house/2011_09/16/chengdu/1316166478461_000/200x144.jpg" alt="蒂梵尼TOWN效果图中庭鸟瞰图" title="蒂梵尼TOWN效果图中庭鸟瞰图"></a></p>
</div>
<div class="mlccom_txt">
<a title="蒂梵尼TOWN效果图中庭鸟瞰图" target="_blank" alt="蒂梵尼TOWN效果图中庭鸟瞰图" href="http://difannitown.soufun.com/photo/d_other_103282559.htm">蒂梵尼TOWN效果图中庭鸟瞰图</a>
</div>
</li>
<li>
<div class="mlccom_img">
<p><a target="_blank" href="http://difannitown.soufun.com/photo/d_other_103282560.htm"><img border="0" src="http://imgs.soufun.com/viewimage/house/2011_09/16/chengdu/1316166479602_000/200x144.jpg" alt="蒂梵尼TOWN效果图中庭意境图" title="蒂梵尼TOWN效果图中庭意境图"></a></p>
</div>
<div class="mlccom_txt">
<a title="蒂梵尼TOWN效果图中庭意境图" target="_blank" alt="蒂梵尼TOWN效果图中庭意境图" href="http://difannitown.soufun.com/photo/d_other_103282560.htm">蒂梵尼TOWN效果图中庭意境图</a>
</div>
</li>
<li>
<div class="mlccom_img">
<p><a target="_blank" href="http://difannitown.soufun.com/photo/d_other_103201005.htm"><img border="0" src="http://imgs.soufun.com/viewimage/house/2011_09/15/chengdu/1316051586898_000/200x144.jpg" alt="蒂梵尼TOWN效果图夜景透视" title="蒂梵尼TOWN效果图夜景透视"></a></p>
</div>
<div class="mlccom_txt">
<a title="蒂梵尼TOWN效果图夜景透视" target="_blank" alt="蒂梵尼TOWN效果图夜景透视" href="http://difannitown.soufun.com/photo/d_other_103201005.htm">蒂梵尼TOWN效果图夜景透视</a>
</div>
</li>
<li>
<div class="mlccom_img">
<p><a target="_blank" href="http://difannitown.soufun.com/photo/d_other_103201008.htm"><img border="0" src="http://imgs.soufun.com/viewimage/house/2011_09/15/chengdu/1316051588219_000/200x144.jpg" alt="蒂梵尼TOWN效果图中庭" title="蒂梵尼TOWN效果图中庭"></a></p>
</div>
<div class="mlccom_txt">
<a title="蒂梵尼TOWN效果图中庭" target="_blank" alt="蒂梵尼TOWN效果图中庭" href="http://difannitown.soufun.com/photo/d_other_103201008.htm">蒂梵尼TOWN效果图中庭</a>
</div>
</li>
<li>
<div class="mlccom_img">
<p><a target="_blank" href="http://difannitown.soufun.com/photo/d_other_103201022.htm"><img border="0" src="http://imgs.soufun.com/viewimage/house/2011_09/15/chengdu/1316051596925_000/200x144.jpg" alt="蒂梵尼TOWN效果图立面" title="蒂梵尼TOWN效果图立面"></a></p>
</div>
<div class="mlccom_txt">
<a title="蒂梵尼TOWN效果图立面" target="_blank" alt="蒂梵尼TOWN效果图立面" href="http://difannitown.soufun.com/photo/d_other_103201022.htm">蒂梵尼TOWN效果图立面</a>
</div>
</li>
</ul>
<ul class="mlcpage">
共<strong class="red">8</strong>张 </ul>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
//这儿加载页面加载完成后执行的代码
});
</script>
</body>
</html>
出处：http://bober.cnblogs.com/
CARE健康网: http://www.aicareyou.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
