<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>找房无忧-租房列表页</title>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/SecondHandList.css"/>
<link rel="stylesheet" href="css/rentalList.css"/>
</head>
<body>
<!--头部-->
<header>
<h1><a href="index.html"><img src="image/index/logo.jpg" alt=""/></a></h1>
<div class="icon">
<a href="my.html"><img src="image/index/my.jpg" alt=""/></a>
<a href="#"><img src="image/index/xiazai.jpg" alt=""/></a>
</div>
</header>
<section class="rentalAddr">
<p><strong>首页</strong> > <span>北京租房</span></p>
</section>
<!--搜索-->
<section class="secondSearch">
<input type="search" />
<span>|</span>
<a href="#"><img src="image/secondhandlist/search_03.png" alt=""/></a>
</section>
<!--区域分类-->
<section class="secondList">
<!--遮罩层-->
<div class="hide"></div>
<ul class="list">
<li>
<!--添加active类名就可以改变小箭头的方向和颜色-->
<h2><a href="#">区域<span></span></a></h2>
</li>
<li>
<h2><a href="#">月租<span></span></a></h2>
</li>
<li>
<h2><a href="#">房型<span></span></a></h2>
</li>
<li>
<h2><a href="#">更多<span></span></a></h2>
</li>
</ul>
<ul class="someList">
<!--区域-->
<li class="area">
<div class="title">
<h2 class="active">区域</h2>
<h2>地铁</h2>
</div>
<div class="hideList">
<ul>
<li><a href="#">附近</a></li>
<li><a class="active" href="#">不限</a></li>
</ul>
<ul>
<li><a href="#">不限</a></li>
<li><a href="#">安贞</a></li>
<li><a class="active" href="#">朝阳</a></li>
<li><a href="#">奥林匹克公园</a></li>
<li><a href="#">海淀</a></li>
<li><a href="#">百子湾</a></li>
<li><a href="#">昌平</a></li>
<li><a href="#">北工大</a></li>
<li><a href="#">丰台</a></li>
<li><a href="#">北苑</a></li>
<li><a href="#">石景山</a></li>
<li><a href="#">CBD</a></li>
</ul>
</div>
</li>
<!--价格-->
<li class="price">
<ul>
<li><a href="#">不限</a></li>
<li><a href="#">100万以下</a></li>
<li><a href="#">100万-150万</a></li>
<li><a href="#">150万-200万</a></li>
<li><a href="#">200万-250万</a></li>
<li><a href="#">250万-300万</a></li>
<li><a href="#">自定义价格</a></li>
</ul>
</li>
<!--房型-->
<li class="house">
<ul>
<li>不限</li>
<li>
1室 <span></span>
</li>
<li>
2室 <span class="active"></span>
</li>
<li>
3室 <span></span>
</li>
<li>
4室 <span></span>
</li>
<li>
5室 <span></span>
</li>
<li><a class="btnOK" href="#">确定</a></li>
</ul>
</li>
<!--更多-->
<li class="more">
<ul>
<li>
<h3>区域</h3>
<ul class="childList">
<li>南</li>
<li>南北</li>
<li>东</li>
<li>西</li>
<li>北</li>
</ul>
</li>
<li>
<h3>面积（平方）</h3>
<ul class="childList">
<li>50以下</li>
<li>50-70</li>
<li>70-90</li>
<li>90-110</li>
<li>110-130</li>
<li>130-150</li>
<li>150-200</li>
<li>200以上</li>
</ul>
</li>
<li>
<h3>标签</h3>
<ul class="childList">
<li>学区房</li>
<li>地铁房</li>
<li>不限购</li>
<li>满两年</li>
<li>满五唯一</li>
<li>降价</li>
<li>新上</li>
<li>独家</li>
<li>有钥匙</li>
</ul>
</li>
<li class="clear"><a href="#">清空条件</a></li>
<li class="btnOK"><a href="#">确定</a></li>
</ul>
</li>
</ul>
</section>
<!--房屋详细信息-->
<section>
<ul class="secondContent">
<li>
<div class="left">
<img src="image/rentalList/img1.png" alt=""/>
</div>
<div class="right">
<h2><a href="rentalDetails.html"> 南沙滩小区 超低价急售</a></h2>
<p>2室1厅 96㎡ 南北</p>
<div>青岛新天地</div>
<div class="retalCont1"><span>集中供暖</span><strong>3700元/月</strong></div>
</div>
</li>
<li>
<div class="left">
<img src="image/rentalList/img2.png" alt=""/>
</div>
<div class="right">
<h2>青年汇二期 免税三居</h2>
<p>3室2厅 129㎡ 南北</p>
<div>青年汇家园</div>
<div class="retalCont1"><span>集中供暖</span><strong>4610元/月</strong></div>
</div>
</li>
<li>
<div class="left">
<img src="image/rentalList/img3.png" alt=""/>
</div>
<div class="right">
<h2>博雅德源稀缺两居 钥匙房源</h2>
<p>2室2厅 126m² 南北</p>
<div>西二旗</div>
<div class="retalCont1"><span>天然气供暖</span><strong>3420元/月</strong></div>
</div>
</li>
<li>
<div class="left">
<img src="image/rentalList/img4.png" alt=""/>
</div>
<div class="right">
<h2>朝阳北路赠车库自住首选</h2>
<p>5室3厅 260m² 南北</p>
<div>武夷花园二手房</div>
<div class="retalCont1"><span>集中供暖</span><strong>5408元/月</strong></div>
</div>
</li>
<li>
<div class="left">
<img src="image/rentalList/img5.png" alt=""/>
</div>
<div class="right">
<h2>金汉旭城 东南金角一居</h2>
<p>1室1厅 60m² 东南</p>
<div>鲁谷二手房</div>
<div class="retalCont1"><span>集中供暖</span><strong>3300元/月</strong></div>
</div>
</li>
</ul>
</section>
<!--版权底部-->
<footer class="copyright">
<h2>北京找房无忧 > 首页</h2>
项目案例：制作移动端找房无忧网
需积分: 23 131 浏览量
2019-10-25
15:21:24
上传
评论 4
收藏 18.18MB ZIP 举报
Nine.zip （79个子文件） 
Nine css 
SecondHandList.css 6KB my.css 4KB reset.css 1KB rentalList.css 3KB login.css 1KB secondHandDetail.css 6KB index.css 5KB image index 
banner2.png 9.9MB img2.png 61KB
img1.jpg 9.82MB img3.png 54KB index_05.png 10KB banner.png 263KB index_09.png 12KB seach.jpg 9.79MB download.png 5KB android.png 4KB close.png 3KB logo.jpg 9.81MB my.jpg 9.8MB xiazai.jpg 9.8MB index_03.png 11KB index_07.png 14KB apple.png 3KB SecondHandList img7.png 44KB ok.png 3KB img2.png 46KB img3.png 42KB img1.png 48KB map.png 73KB xin.png 4KB img.png 369KB user.png 4KB search_03.png 2KB phone.png 3KB img4.png 34KB img5.png 34KB img6.png 48KB public my icon4.png 2KB img2.png 60KB bg2.png 31KB img3.png 58KB img1.png 52KB right.png 3KB urse2.png 6KB icon2.png 2KB icon1.png 2KB down.png 3KB bg1.png 24KB img4.png 52KB logo.png 12KB icon3.png 2KB urse.png 3KB rentalList img2.png 61KB img3.png 56KB img1.png 53KB map.png 50KB banner.png 279KB right.png 3KB xin.png 4KB man.png 2KB icon2.png 4KB icon1.png 5KB img4.png 57KB img5.png 41KB
SecondHandDetails.html 7KB rentalList.html 10KB public.html 1KB myLogin.html 1KB login.html 3KB index.html 5KB js rem.js 578B zepto.js 72KB myHouse.html 3KB SecondHandList.html 10KB register.html 2KB rentalDetails.html 4KB findPassword.html 2KB my.html 1KB资源评论
