<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#nav-link .nav-link{
color: aliceblue;
opacity: 0.5;
}
#nav-link .nav-link:hover{
color: aliceblue;
opacity: 1;
font-size: 18px;
}
.nav-item p{
font-size: 24px;
opacity: 0.5;
}
.nav-item select{
height: 35px;
margin-top: 10px;
text-align: center;
}
#navbar-nav .nav-link{
color: black;
opacity: 0.8;
font-size: 18px;
margin-top: -12px;
}
#navbar-nav .nav-link:hover{
opacity: 1;
color: deepskyblue;
}
.content{
width: 100%;
height: 400px;
background-image: url('../static/img/img2.jpg');
background-repeat: no-repeat;
background-size: auto;
}
#col-2{
height: 400px;
}
#col-2 select{
margin: 15px;
}
#col-2 button{
margin: 5px 15px;
width: 200px;
}
#col-2 .bg{
width: 100%;
height: auto;
}
.bg img{
width: 100%;
height: auto;
margin: 0 15px;
opacity: 1;
}
#search{
width: 100%;
height: 400px;
margin-left: 5px;
}
#search input{
width: 180px;
}
#search form{
margin-top: 40px;
}
#search span{
font-size: 14px;
}
#search p{
margin-top: 20px;
}
.col-7{
width: 110%;
height: 400px;
background-image: url('../static/img/bg2.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#loufang h1{
text-align: center;
margin: 15px 0;
}
.card{
margin-bottom: 25px;
}
.card img{
width: 100%;
height: 150px;
margin: 5px;
}
footer{
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark" style="margin: 0px; justify-content: space-between;">
<div class="container" id="nav-link">
<ul class="navbar-nav">
<li class="nav-item">
<a class="navbar-brand" href="#" style="color:whitesmoke;">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">二手房</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">新房</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">租房</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">海外</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">装修</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">商业办公</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">小区</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">百科</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">房价</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">发布房源</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">找房App</a>
</li>
</ul>
<!-- -->
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="#">登陆</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">注册</a>
</li>
</ul>
</div>
</nav>
<div class="container" id="nav">
<nav class="navbar navbar-expand-sm justify-content-between">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" style="font-size: 24px;"><i class="fa fa-envelope-open mr-2" aria-hidden="true" ></i>蜗壳找房</a>
</li>
<li class="nav-item">
<p class="nav-link" href="#" >|</p>
</li>
<li class="nav-item">
<form>
<div class="form-group">
<select class="form-control" id="sel1">
<option>广州</option>
<option>深圳</option>
<option>北京</option>
<option>上海</option>
</select>
</div>
</form>
</li>
</ul>
<ul class="navbar-nav" id="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">楼盘</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">在售</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">地图找房</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item" style="color: rgba(9, 99, 202, 0.979);">
<p style="font-size: 18px;margin-top: 8px;"><i class="fa fa-phone mr-2" aria-hidden="true"></i>客服热线 10086</p>
</li>
</ul>
</nav>
</div>
<div class="content">
<div class="container-fuild"></div>
<div class="row">
<div class="col-5">
<div class="row">
<div class="col-5" id="col-2">
<form>
<div class="form-group">
<select class="form-control" id="sel1" style="width: 40%;">
<option>广州</option>
<option>深圳</option>
<option>北京</option>
<option>上海</option>
</select>
</div>
</form>
<button class="btn btn-danger" >
地图找房
</button>
<div class="bg" >
<img src="./img/img1.png">
</div>
</div>
<div class="col-5" id="search" style="float: right !important;">
<form>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="楼盘/关键字">
<button class="btn btn-light"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>
</form>
<span class="text-success">推荐搜索：<span class="text-light">招商·臻珑府 中铁诺德·逸府 广东第二师范学院·教师公寓</span></span>
<p class="text-white">试试找房条件:</p>
<form id="searchDetial">
<div class="form-group" >
<select class="form-control" id="sel1">
<option>地铁</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="sel1" >
<option>户型</option>
</select>
</div>
<button class="btn btn-danger" style="width: 100%;">筛选楼房</button>
</form>
</div>
</div>
</div>
<div class="col-7" id="bg-img">
</div>
</div>
</div>
<div class="container" id="loufang">
<h1>精选楼盘</h1>
<div class="row">
<div class="col-6">
<div class="card">
<div class="row">
<div class="col-6"><img src="../static/img/loufang1.jpg" ></div>
<div class="col-6" >
<h3>海淀幸福里</h3>
<span class="badge badge-primary">在售</span>
<span>|<span class="text-muted"> 住宅</span></span>
<span>海淀/海淀北部新区</span>
<br>
<br>
<span class="text-danger" style="font-size: 18px;">均价 80000元/平</span>
<span class="text-muted">建面98-195m²</span>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="row">
<div class="col-6"><img src="../static/img/loufang2.jpg" ></div>
<div class="col-6" >
<h3>熙红印</h3>
<span class="badge badge-primary">在售</span>
<span>|<span class="text-muted"> 住宅</span></span>
<span>大兴/西门红</span>
<br>
<br>
<span class="text-danger" style="font-size: 18px;">均价 64400元/平</span>
<span class="text-muted">建面65-135m²</span>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="row">
<div class="col-6"><img src="../static/img/loufang3.jpg" ></div>
<div class="col-6" >
<h3>公园十七区</h3>
<span class="badge badge-primary">在售</span>
<span>|<span class="text-muted"> 住宅</span></span>
<span>顺义/后沙谷</span>
<br>
<br>
<span class="text-danger" style="font-size: 18px;">均价 55711元/平</span>
<span class="text-muted">建面90-144m²</span>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="row">
<div class="col-6"><img src="../static/img/loufang4.jpg" ></div>
<div class="col-6" >
<h3>海淀幸福里</h3>
<span class="badge badge-primary">在售</span>
<span>|<span class="text-muted"> 住宅</span></span>
<span>亦庄开发区/通州其他</span>
<br>
<br>
<span class="text-danger" style="font-size: 18px;">均价 47000元/平</span>
<span class="text-muted">建面57-139m²</span>
</div>
</div>
</div>
</div>
</div>
<hr>
</div>
<footer>
<p>Posted by:###</p>
<p>Contact @R_873_4045@ion: <a href="mailto:#####.com">#####.com</a>.</p>
</footer>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
