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. [转]MySQL修改时区的方法小结

    本文转自:https://www.cnblogs.com/mracale/p/6064447.html 这篇文章主要介绍了MySQL修改时区的方法,总结分析了三种常见的MySQL时区修改技巧,包括命令 ...

  2. 【转载】C#检测客户端输入的内容是否含有危险字符串

    用户在客户端提交的内容有时候并不可信,如果客户端提交的内容中含有危险字符串信息,则很有可能造成应用程序安全性问题,如SQL注入风险等.因此在接收客户端提交过来的数据后,我们首先需要判断数据中是否含有危 ...

  3. Android Studio 新建项目结构分析

    这是我刚刚新建的项目  默认都是Android模式的项目结构,但这并不是真实的目录结构 把他换成Project模式 项目的真实目录结构 1app 项目的代码,资源 2 gradle  wrappere ...

  4. python基础学习(十一)公共方法

    Python内置函数 Python 包含了以下内置函数: 切片 切片 使用 索引值 来限定范围,从一个大的 字符串 中 切出 小的 字符串 列表 和 元组 都是 有序 的集合,都能够 通过索引值 获取 ...

  5. Java设计模式 - 单例模式详解(扩展)

    单例模式引发相关整理 如何破坏单例模式 示例: /** * 如果破坏单例模式 * * @author sunyang * @date 2018/11/13 20:14 */ public class ...

  6. Codeforces617E(莫队)

    E. XOR and Favorite Number time limit per test: 4 seconds memory limit per test: 256 megabytes input ...

  7. angular 分页插件的使用

    html: <pagination total-items="totalItems" ng-model="currentPage" items-per-p ...

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

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

  9. JS中的柯里化(currying)

    何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字命名). 柯里化通常也称部分求值,其含义是给函数分步传递参数,每次传递参 ...

  10. 【代码笔记】Web-JavaScript-javaScript for循环

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...