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>

qianduan的更多相关文章

  1. Sublime Text快捷键去除空白行 - 转载请保留原文链接：https://www.noniu.com/qianduan/sublime-text-kongbaihang.html

    如果使用notepad++或者Dreamweaver的朋友,应该知道有个快捷键或者功能按钮,可以实现删除文档空白行的功能.虽然空白行不会影响程序运行,但是会占一定的空间,对于有处女座特质的程序员来说, ...

  2. css 填坑常用代码分享

    以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. 因为提交比较麻烦,后来转置github:https://github.com/jsfront/src/blob/mast ...

  3. 4. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  4. [整理]AngularJS移动端开发遇到的问题

    最近在开发一个移动WebAPP的小项目,因为之前一直使用AngularJS, 对于这个项目,废话不多说,拿过来就用上了. 开发过程是一路通畅和舒服的,但是,却忽略了一个非常重要的问题,移动2G环境下的 ...

  5. svn post-commit 同步

    @echo on SET REPOS=%1 SET USER=%2 SET SVN="D:\Program Files\VisualSVN Server\bin\svn.exe" ...

  6. 让div垂直居中的5种方法

    方法一: 这个方法把 div 的显示方式设置为表格,然后我们可以使用表格的 vertical-align property 属性. HTML & CSS: <div class=&quo ...

  7. CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  8. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  9. css的命名规则

    本文转载自谈笑涧<css的命名规则> 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.35 ...

随机推荐

  1. [转]Windows Server 2016 服务器IIS配置

    本文转自:https://blog.csdn.net/corson/article/details/82185407 多余的话就不说了,配置Windows Server 2016服务器具体如下图    ...

  2. struts2_struts2线程安全吗?

    线程安全:在一个进程中有多个线程并发执行,线程执行过程中,变量值是相同的,执行结果也是相同的 struts2线程安全 1.每次请求都会重新创建新的action对象,所以线程安全. 2.由于action ...

  3. 黑客常用 Linux 入侵常用命令

    大学曾误入歧途算是一个脚本小子.... 系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cp ...

  4. 4.5 explain 之 ref

    一.说明 显示索引的哪一列被使用了,如果可能的话,是一个常数.哪些列或常量被用于查找索引上的值. 二.示例 a. b. c. 关注我的公众号,精彩内容不能错过

  5. Hibernate入门(五)---------事务管理

    在Hibernate中,可以通过代码来操作管理事务,如通过“Transaction tx = session.beginTransaction()”,开启一个事务,持久化操作后,通过"tx. ...

  6. JS 操作svg画图

    背景: 一共有3个文件:svg文件,html文件,js文件. 有一个svg图,使用embed标签,引入到了html文件中 svg文件: <svg width="640" he ...

  7. [Linux]lnmp一键安装包,访问yii/tp5/laravel的时候,报错500或者空白页面

    当你将默认的访问路径改后(nginx.conf中的root 之后的路径),同时应该将/home/wwwroot/default/.user.ini 中的路径也改了! .user.ini 是隐藏文件,需 ...

  8. blfs（systemd版本）学习笔记-构建gnome桌面系统后的配置及安装的应用

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.构建安装ibus-libpinyin的笔记地址:https://www.cnblogs.com/renren-study-n ...

  9. es6 语法 （map、set和array 的对比）

    //数据结构对比 增查改删 { //map和array对比 let map = new Map(); let array = []; //增 map.set('t',1); array.push({t ...

  10. 中国最强AI超级服务器问世，每秒提供AI计算2000万亿次

    https://mp.weixin.qq.com/s/1EVczHp11OJ4GEjeE3z5cA 业内唯一以“AI计算”为核心的人工智能大会昨天发布了一份重要报告. 9月12日,<中国AI计算 ...