head.html
<style type="text/css"> #header { height: 70px; line-height: 60px; background: #fff; position: relative; z-index: 99; border-bottom: solid 2px #ddd; background-image: url(img/WALL.PNG); } #header #headerlogo { float: left; padding-left:80px; width: 250px; height: 40px; display: inline; margin-top: 7px; } #header p { float: left; display: inline; height: 50px; padding-bottom: 20px; padding-left: 10px; font-family: "Microsoft Yahei",Arial,sans-serif,Arial,STHeiti; font-size: 19px; line-height: 150%; font-weight: 600; margin-top: 20px; } #header img{ width: 32px; height: 32px; } .nav { display: inline; margin-top: 10px; } #header .nav { float: left; padding-left: 40px; height: 60px; } ul, ol { list-style: none outside none; } .nav ul li { float: left; position: relative; } #header .nav ul li a.s { font-size: 16px; line-height: 50px; display: inline-block; padding: 0 20px; text-decoration:none; } #header a:hover, #sub-header a.active { color: #ffa000; } #header a { color: #666; font-size: 14px; line-height: 20px; } #content { position: relative; z-index: 9; background: grey; height: 300px; } #searchpan{ height: 200px; } </style> <div id="header"> <img id="headerlogo" src="img/LOGO.PNG" /> <p>南京</p> <div class="nav"> <ul class="clearfix"> <li><a href="/" title="首页" class="active s" onclick="_gaq.push(['_trackEvent', 'home_310000', 'click', 'ownhome'])">首页</a></li> <li><a href="http://www.ziroomapartment.com/" title="自如寓" class="s" onclick="_gaq.push(['_trackEvent', 'home_310000', 'click', 'apart'])">自如寓</a></li> <li><a href="http://z-inn.com" title="自如驿" class="s" onclick="_gaq.push(['_trackEvent', 'home_310000', 'click', 'zinn'])">自如驿</a></li> <li><a href="http://www.ziroom.com/zhuanti/minsu/index.html" title="民宿" class="s" onclick="_gaq.push(['_trackEvent', 'home_310000', 'click', 'minsu'])">民宿</a> </li> <li><a href="/ziroomer/" title="生活" class="s" onclick="_gaq.push(['_trackEvent', 'home_310000', 'click', 'life'])">生活</a></li> </div> </div>
qianru.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>11</title> </head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="bootstrap-3.3.5/dist/css/bootstrap.min.css" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> <link rel="stylesheet" href="bootstrap-3.3.5/dist/css/bootstrap-theme.min.css" crossorigin="anonymous"> <script src="bootstrap-3.3.5/dist/js/jquery-1.11.1.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="bootstrap-3.3.5/dist/js/bootstrap.min.js" crossorigin="anonymous"></script> <body> <div class="container"> <div class="row" id="headerContainer"></div> <div class="row"> <div class="col-md-9" id="left"> </div> <div class="col-md-3" id="right">.col-md-4</div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $('#headerContainer').load('head.html'); //$('#left').load('postcontent.html'); $('#left').load('showcontent.html'); $('#right').load('right.html'); }); </script> <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> </body> </html>
postcontent.html
<style> .postrow{ padding: 5px 20px; background-color: #f5f5f5; overflow: hidden; _width: 760px; font-size: 14px; } h2{ font-size: 18px; background: #fff; padding-right: 20px; position: relative; padding-left: 15px; margin-top: 10px; padding: 5px; z-index: 2; } </style> <div style="margin-top: 10px"> <h2>基本信息</h2> <form class="form-horizontal postrow"> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">区域</label> <div class="col-sm-7"> <input type="email" class="form-control" id="inputEmail3" placeholder="区域"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">小区</label> <div class="col-sm-7"> <input type="password" class="form-control" id="inputPassword3" placeholder="新增小区"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">地铁</label> <div class="col-sm-7"> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 4 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 6 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> S1 </label> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">周边</label> <div class="col-sm-7"> <textarea class="form-control" rows="2"></textarea> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">交通</label> <div class="col-sm-7"> <textarea class="form-control" rows="2"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-7 col-sm-3"> <button type="submit" class="btn btn-default">保存改动</button> </div> </div> </form> <h2>房主描述</h2> <form class="form-horizontal postrow"> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">设施</label> <div class="col-sm-7"> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 空调 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 洗衣机 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> WIFI </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 厨房 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 独卫 </label> </div> <div class="col-sm-offset-3 col-sm-7"> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 洗衣机 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> WIFI </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 厨房 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 独卫 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 阳台 </label> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">面积</label> <div class="col-sm-7"> <input type="email" class="form-control" id="inputEmail3" placeholder="面积"> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">朝向</label> <div class="col-sm-7"> <input type="email" class="form-control" id="inputEmail3" placeholder="面积"> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">楼层</label> <div class="col-sm-7"> <input type="email" class="form-control" id="inputEmail3" placeholder="面积"> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">其他信息</label> <div class="col-sm-7"> <textarea class="form-control" rows="2"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-7 col-sm-3"> <button type="submit" class="btn btn-default">保存改动</button> </div> </div> </form> <h2>上传图片</h2> <form class="form-horizontal postrow"> <img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail"> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label">面积</label> <div class="col-sm-7"> <input type="email" class="form-control" id="inputEmail3" placeholder="面积"> </div> </div> <div class="form-group"> <div class="col-sm-offset-7 col-sm-3"> <button type="submit" class="btn btn-default">保存改动</button> </div> </div> </form> 上传图片-- 地图信息 wuzhuxinx </div>
showcontent.html
<style> .postrow{ padding: 5px 20px; background-color: #f5f5f5; overflow: hidden; _width: 760px; font-size: 14px; } h2{ font-size: 18px; background: #fff; padding-right: 20px; position: relative; padding-left: 15px; margin-top: 10px; padding: 5px; z-index: 2; } h3{ font-size: 17px; padding-right: 20px; position: relative; padding-left: 15px; margin-top: 10px; padding: 5px; z-index: 2; } .detail_room { padding: 0 25px; background: #f5f5f5; border-radius: 5px; color: #666; font-size: 12px; margin-bottom: 20px; height: 160px; position: relative; z-index: 6; } .detail_room li { line-height: 31px; position: relative; border-bottom: solid 1px #fff; font-size: 14px; } .dview_icon_list li { float: left; margin-right: 33px; text-align: center; } </style> <div > <h2>租售信息</h2> <div class="postrow"> <ul class="detail_room"> <li><b></b>面积： 19.3㎡ </li> <!--<li><b></b>朝向： 南</li>--> <li><b></b>朝向： 南</li> <li><b></b>户型： 3室1厅 <span class="icons">合</span> </li> <li><b></b>楼层： 03/18层</li> <li class="last"><b></b>交通： <span class="lineList lineListnone" id="lineList"> 距9号线松江新城2039米 </span> </li> </ul> </div> <h2>基本信息</h2> <div class="postrow"> <h3 class="fb"> <strong>编号：</strong> SHZRGY081772660_03</h3> <p><strong>周边：</strong>隔一条马路就是安信商业广场，美容养生馆一条街！步行10分钟直达开元地中海商业广场，以及"zui娱乐"地段——后街。安信有养生一条龙，开元地中海有奥特莱斯，后街有夜宵一条龙。生活，就要"zui娱乐"！</p> <br> <p><strong>交通：</strong>从小区南门出有公交站台，松江3路、5路、14路等多条公交干线。步行到九号线松江大学城地铁站需要25分钟，通往徐家汇、漕河泾等。小区北门出口都有摩拜单车、出行方便。小区地段交通便利，出行不愁！</p> </div> <h2>房屋配置</h2> <div class="postrow"> <ul class="dview_icon_list"> <li><i class="icon_view_01"></i><p>无线WIFI</p></li> <li><i class="icon_view_09"></i><p>宽带</p></li> <li><i class="icon_view_02"></i><p>停车场</p></li> <li class="no"><i class="icon_view_04"></i><p>餐厅</p></li> <li class="no"><i class="icon_view_07"></i><p>游泳池</p></li> <li class="no"><i class="icon_view_08"></i><p>健身房</p></li> <li class="no"><i class="icon_view_03"></i><p>接机服务</p></li> <li class="no"><i class="icon_view_06"></i><p>会议服务</p></li> <li class="no"><i class="icon_view_05"></i><p>商务中心</p></li> <li> <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span> <span class="glyphicon-class">刷新</span> </li> </ul> </div> </div>
right.html
<style> .nav>li>a:focus, .bs-docs-sidebar .nav>li>a:hover { padding-left: 19px; color: #563d7c; text-decoration: none; background-color: transparent; border-left: 1px solid #563d7c; } </style> <nav style="margin-top: 20px;" class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix"> <ul class="nav bs-docs-sidenav"> <li class=""> <a href="#overview">基本信息</a> </li> <li class=""> <a href="#overview">Area信息</a> </li> <li class=""> <a href="#grid">配置信息</a> <!-- <ul class="nav"> <li class="active"><a href="#grid-intro">简介</a></li> </ul> --> </li> <li class=""> <a href="#overview">Mate信息</a> </li> <li class=""> <a href="#overview">描述信息</a> </li> <li class=""> <a href="#overview">热门标签</a> </li> <li class="" style="margin-top: 30px;"> <a href="#overview">返回头部</a> </li> </ul> </nav>