web简易页面(找房--1.index)

最新推荐文章于 2024-09-20 15:07:21 发布
Teng-YJ
最新推荐文章于 2024-09-20 15:07:21 发布
阅读量259
点赞数
分类专栏：自写小案例（粉丝）文章标签： css3 html5
本文链接：https://blog.csdn.net/weixin_46999664/article/details/112192661
版权
自写小案例（粉丝）专栏收录该内容
4 篇文章 0 订阅
订阅专栏
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210104182600868.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njk5OTY2NA==,size_16,color_FFFFFF,t_70#pic_center)
ind_1.jpg
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210104182600758.png#pic_center)
text_02.pnb
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210104182600763.png#pic_center)iconlist.png
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210104182600757.png#pic_center)
qrcode.png
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210104182600759.png#pic_center)
logo_2.png
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210104182600764.png#pic_center)
text_01.png
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210104182600755.png#pic_center)
user.png
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210104182600761.png#pic_center)
logo_1.png
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210104182600759.jpg#pic_center)
people.jpg
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210104182600743.png#pic_center)icon_2.png
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210104182600737.png#pic_center)icon_1.png

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<style>
	* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-size: 0.875rem;
}
.clear {
  clear: both;
}
a {
  color: #ffffff;
  text-decoration: none;
}
ul {
  list-style: none;
}
ul li {
  float: left;
}
/*header*/
header {
  width: 100%;
  position: relative;
  height: 62.5rem;
}

header .box{
	position: absolute;
	width: 100%;
	height: 400px;
	transform-style: preserve-3d;
	transform: rotateX(0deg) rotateY(0deg) translate3d(0px,0px,0px);
	transform-origin: 59.46875rem 6.8375rem -59.46875rem; 
	animation:mybg 5s;
	animation-iteration-count: infinite;
}

header .box > div{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

header .box > div span{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(0,0,0,.1);
	background: #ccc;
}

header .box > div span:nth-child(1){
	transform: rotateX(0deg) translate3d(0,0,237.5px);
}

header .box > div span:nth-child(2){
	transform: rotateY(-90deg) translate3d(-713px,0,951px);
}

header .box > div span:nth-child(3){
	   transform: rotateY(0deg) translate3d(0,0,-1662.5px);
}

header .box > div span:nth-child(4){
	   transform: rotateY(90deg) translate3d(713px,0,951px);
}

@keyframes mybg{
	0%   {transform: rotateY(0deg);}
	25%  {transform: rotateY(90deg);}
	50%  {transform: rotateY(180deg);}
	75%  {transform: rotateY(270deg);}
	100% {transform: rotateY(360deg);}
}

header section.top {
  width: 100%;
  position: absolute;
  top: 2.625rem;
}
header section.top .title1 {
  height: 2.625rem;
  background: rgba(0, 0, 0, 0.2);
}
header section.top .title1 img {
  height: 100%;
}
header section.top .title1 nav img {
  float: left;
  margin-left: 12.5rem;
  margin-top: -15px;
}
header section.top .title1 nav ul {
  float: right;
  line-height: 2.625rem;
  margin-right: 12.5rem;
  font-size: 1rem;
}
header section.top .title1 nav li {
  width: 5.25rem;
  height: 100%;
  text-align: center;
}
header section.top .title1 nav li:hover {
  background: rgba(0, 0, 0, 0.4);
}
header section.top .title1 nav li:last-child {
  margin-left: 5.25rem;
}
header section.top .title1 nav li:last-child:hover {
  background: none;
}
header section.top .title1 nav li:last-child a:hover {
  color: #ff0000;
}
header section.top .title1 nav li span {
  color: #ffffff;
}
header section.top .title2 {
  margin: 0 auto;
  margin-top: 8.75rem;
  width: 47.5rem;
}
header section.top .title2 .form-title,
header section.top .title2 .title,
header section.top .title2 .form {
  width: 100%;
}
header section.top .title2 .title {
  height: 0.875rem;
  margin-top: 3.625rem;
}
header section.top .title2 .title li {
  margin-right: 2.5rem;
}
header section.top .title2 .form {
  height: 50px;
  margin-top: 1rem;
  position: relative;
}
header section.top .title2 .form form {
  height: 50px;
  background: #ffffff;
  border-radius: 0.25rem;
}
header section.top .title2 .form input[type='submit'] {
  height: 100%;
  width: 7.5rem;
  background: #00b167;
  float: right;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  color: #ffffff;
}
header section.top .title2 .form input[type='text'] {
  height: 100%;
  width: 40rem;
  float: left;
  font-size: 1.5rem;
  outline: none;
  text-indent: 0.625rem;
}
header section.top .title2 .form .box-top {
  width: 0.625rem;
  height: 0.625rem;
  background: #ffffff;
  position: absolute;
  transform: rotate(45deg);
  top: -0.3rem;
  left: 1rem;
}
header section.bottom {
  height: auto;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  margin-left: -17.5rem;
}
header img.bg,
.se_bottom img.bg2 {
  width: 100%;
}
.se_bottom {
  position: relative;
  background-color: #333333;
}
.se_bottom img.bg2 {
  height: 31.25rem;
}
.se_bottom .se_bottom_art {
  height: 19.5rem;
  width: 29.8rem;
  position: absolute;
  top: 5.875rem;
  left: 12.5rem;
}
.se_bottom .se_bottom_art .parg {
  margin-top: 2.875rem;
  line-height: 1.875rem;
}
.se_bottom .se_bottom_art .qr {
  margin-top: 2.625rem;
}
.se_bottom .se_bottom_art .qr img {
  float: left;
}
.se_bottom .se_bottom_art .qr .bottom_form {
  float: left;
  margin-left: 1.25rem;
}
.se_bottom .se_bottom_art .qr .bottom_form input {
  width: 8.625rem;
  height: 3.19rem;
  background-color: #00ae66;
  border-radius: 0.25rem;
}
.se_bottom .se_bottom_art .qr .bottom_form input.mar {
  margin-top: 0.625rem;
}
.main_section {
  width: 62.5rem;
  height: 15rem;
  padding: 2.5rem 5.625rem;
  margin: 0 auto;
  text-align: center;
}
.main_section img {
  width: 4.625rem;
  height: 4.625rem;
}
.main_section article {
  float: left;
  height: 9.375rem;
}
.main_section article a {
  color: #000000;
  font-size: 1.25rem;
  font-weight: bold;
}
.main_section article span {
  color: #cccccc;
}
.main_section article.marginboth {
  margin-left: 8.56rem;
  margin-right: 8.56rem;
}

.main_section article.icon-hover{
	position: relative;
}

.main_section article.icon-hover img{
	top: -4rem;
	left: 3.5rem;
	position: absolute;
}

.main_section article.icon-hover img:hover{
	transform: rotateY(60deg);
}

/* footer */
footer {
  background: #333333;
  height: 10rem;
  border: #333333 0.0625rem solid;
}
footer .center {
  width: 62.5rem;
  height: 100%;
  margin: 0 auto;
  margin-top: 0.875rem;
}
footer .center .left {
  width: 32.5rem;
  float: left;
}
footer .center .left .top {
  height: 2.875rem;
  border-bottom: 0.125rem dashed #656565;
}
footer .center .left .top ul li {
  float: left;
  color: #ffffff;
  line-height: 2.875rem;
  margin-right: 1rem;
}
footer .center .left .top ul li:last-child {
  margin-right: 0;
}
footer .center .left .bottom div {
  margin-top: 0.875rem;
  color: #999999;
  height: 3.375rem;
}
footer .center .right {
  width: 20rem;
  height: 2.875rem;
  float: right;
  margin-top: 2.75rem;
}
footer .center .right .sm_img {
  width: 2.875rem;
  height: 2.875rem;
  background: url("../images/iconlist.png");
  background-position: 0rem -9.9rem;
  float: left;
}
footer .center .right .sm_text {
  float: left;
  margin-left: 1rem;
}
footer .center .right .sm_text span {
  font-size: 1.125rem;
  color: #ababab;
}

</style>
	<title>首页</title>
</head>
<body>
	<!--头部-->
	<header>
		<div class="box">
			<div id="">
				<span><img class="bg" src="images/ind_1.jpg"/></span>
				<span><img class="bg" src="images/ind_1.jpg"/></span>
				<span><img class="bg" src="images/ind_1.jpg"/></span>
				<span><img class="bg" src="images/ind_1.jpg"/></span>
			</div>
		</div>	
	<!--内容-->
	<section class="top">
		<article class="title1">
			<nav>
			<a href="index.html"><img src="images/logo_1.png"/></a>
				<ul>
					<li><a href="javasctipt:void(0)">新房</a></li>
					<li><a href="javasctipt:void(0)">二手房</a></li>
					<li><a href="search.html">租房</a></li>
					<li><a href="javasctipt:void(0)">楼讯</a></li>
					<li><a href="agent.html">经纪人</a></li>
					<li><a href="javasctipt:void(0)">登录</a>
					<span>|</span>
					<a href="javasctipt:void(0)">注册</a></li>
				</ul>
			</nav>
		</article>
		<article class="title2">
			<img src="images/text_01.png"/>
			<div class="form-title">
				<div class="title">
					<ul>
						<li><a href="javasctipt:void(0)">找出租</a></li>
						<li><a href="javasctipt:void(0)">找二手房</a></li>
						<li><a href="javasctipt:void(0)">找新房</a></li>
					</ul>
				</div>
				<div class="form">
					<form class="clear" action="" method="post">
						<input type="text" />
						<input type="submit" value="开始找房"/>
					</form>
					<div class="box-top"></div>
				</div>
			</div>
		</article>
	</section>
	
	<section class="bottom">
		<a href="javasctipt:void(0)">今日新增出租信息234条&nbsp;&nbsp;二手房真实房源889套&nbsp;&nbsp;在售新楼盘112个</a>
	</article>
	</header>
	<section class="main_section">
		<article class="icon-hover">
			<img class="hover_img1" src="images/icon_1.png"/><br />
			<a href="javasctipt:void(0)">找出租</a><br />
			<span>真实出租房源，优生活承诺真<br />实房源所见即真</span>
		</article>
		<article class="marginboth icon-hover">
			<img class="hover_img2" src="images/icon_2.png"/><br />
			<a href="javasctipt:void(0)">地图找房</a><br />
			<span>为您精确定位，位置周边配套<br />设施一览无余</span>
		</article>
		<article class="icon-hover">
			<img class="hover_img3" src="images/icon_3.png"/><br />
			<a href="javasctipt:void(0)">地铁找房</a><br />
			<span>房源紧邻地铁张，交通出行更<br />方便说走就走</span>
		</article>
	</section>
	<section class="se_bottom">
		<img class="bg2" src="images/ind_2.jpg"/>
		<article class="se_bottom_art">
			<img src="images/text_02.png"/><br />
			<div class="parg">
				集二手、新房、租房功能于一体，每天发布海量新房源，让您随时随地任性<br />
				找房！在线咨询让您更放心，消息动态推送让您省心，服务承诺让您安心，数<br />
				据百科锦囊让您感受贴心漫漫找房路，我们努力为您想更多！
			</div>
			<div class="qr">
				<img src="images/qrcode.png"/>
				<form class="bottom_form" action="" method="post">
					<input type="submit" name="" id="" value="iPhone" /><br />
					<input type="submit" class="mar" value="Android"/>
				</form>
			</div>
		</article>
	</section>
	<!--尾部-->
	<footer>
		<div class="center">
			<div class="left">
				<div class="top">
					<ul>
						<li><a href="javasctipt:void(0)">了解优生活</a></li>
						<li><a href="javasctipt:void(0)">联系我们</a></li>
						<li><a href="javasctipt:void(0)">加入我们</a></li>
						<li><a href="javasctipt:void(0)">隐私声明</a></li>
						<li><a href="javasctipt:void(0)">网站地图</a></li>
						<li><a href="javasctipt:void(0)">友情链接</a></li>
						<li><a href="javasctipt:void(0)">经纪人登录</a></li>
					</ul>
				</div>
				<div class="bottom">
					<div>
						北京优生活房地产经纪有限公司<br />
						网络经营许可证&nbsp;京ICP备11024601号-12<br />
						&copy;Copyright&copy;2010-2017&nbsp;优生活&nbsp;Ulift.com&nbsp;版权所有
					</div>
				</div>
			</div>
			<div class="right">
				<div class="sm_img"></div>
				<div class="sm_text">
					<span>客服热线<br />
					4008-220-220(9:00 - 24:00)</span>
				</div>
			</div>
		</div>
	</footer>
</body>
</html>