大型网站首页之链家实现

最新推荐文章于 2022-03-06 12:30:49 发布

wyhcczz

最新推荐文章于 2022-03-06 12:30:49 发布

阅读量438

点赞数 2

文章标签： html5 html javascript css

本文链接：https://blog.csdn.net/wyhcczz/article/details/108559675

版权


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ulife生活-引领你生活</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/> 
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
	<!--头部-->
	<header>
		<!--头部导航栏-->
		<div class="navBar">
			<div class="content clear">
				<div class="navBar-logo"></div>
				<ul class="navBar-link">
				  <li><a href="">新房</a></li>
					<li><a href="">二手房</a></li>
					<li><a href="">租房</a></li>
					<li><a href="">楼讯</a></li>
					<li><a href="">经纪人</a></li>
				</ul>
				<p class="navBar-loginBtn">
					<a href="">登录</a>
					<a href="">注册</a>
				</p>
			</div>
		</div>
		<!--头部标题-->
		<h1 class="header-title"></h1>
		<!--头部搜索栏-->
		<div class="header-searchBox">
			<ul>
				<li class="on">找出租</li>
				<li>找二手房</li>
				<li>找新房</li>
			</ul>
			<div>
				<input type="text" placeholder= "请输入搜索内容,例如:‘两室一厅'">
				<button>开始找房</button>
			</div>
			<span class="search-icon"></span><!-- 小三角-->
		</div>
		<!--信息滚动栏-->
		<ul class="header-infor">
			<li>
				<a href="">今日新增出租信息234条 二手房真实房源889套 在售新楼盘112个</a>
			</li>
		</u1> 
	</header>
	<!--导航-->
	<nav>
		<a href="">
			<span></span>
			<h4>找出租</h4>
			<p>真实出租房源，优生活承诺真实房源所见即真</p>
		</a>
		<a href="">
			<span></span>  
			<h4>地图找房</h4>
			<p>为您精准定位，位置周边配套设施-览无余</p>
		</a>
		<a href="">
			<span></span>
			<h4>地铁找房</h4>
			<p>房源紧邻地铁站，交通出行更方便说走就走</p>
		</a>
	</nav>
	<!--内容-->
	<section>
		<div class="content">
			<h1></h1>
			<p>
				集二手、新房、租房功能于一体，每天发布海量新房源，让您随时随地任性找房!
			</p>
			<div class="clear">
				<img src="images/code-img.png" alt="">
				<p>
					<a href="">iPhone</a>
					<a href="">Android</a>
				</p>
			</div>
		</div>
	</section>
	<!--页脚-->
	<footer>
		<div class="content clear">
			<div class= "footer-left">
				<ul class="clear">
					<li><a href="">了解优生活</a></li>
					<li><a href="">联系我们</a></li>
					<li><a href="">加入我们</a></li>
					<li><a href="">隐私声明</a></li>
					<li><a href="">网站地图</a></li>
					<li><a href="">友情链接</a></li>
					<li><a href="">经纪人登陆</a></li>
				</ul>
				<p>北京优生活房地产经纪有限公司</p>
				<p>网络经营许可证京ICP备11024601号-12</p>
				<p>@ Copyright@2010-2017 优生活Ulift.com版权所有</p>
			</div>
			<div class="footer-right" >
				<span></span>
				<div>
					<p>客服热线</p>
					<p>4008-220-220 (9:00 - 24:00)</p>
				</div>
			</div>
		</div>
	</footer>
	</body>
</html>

public.css

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
ul,ol{list-style: none;}
a{text-decoration: none;}
html,body{
	width: 100%;
	height: 100%;
}
/* 浮动清楚公共类声明 */
.clear::after{
	content: "";
	display: block;
	clear: both;
}
/* 网页整体内容宽度类声明 */
.content{
	width: 1000px;
	margin: 0 auto;
}
/* 登录样式规则 */

.login-box{
	width: 480px;
	height: 330px;
	background-color: #f2f2f2;
	position: relative;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	margin: 20px auto;
	padding-top: 8px;
}
.close-btn{
	display: block;
	width: 22px;
	height: 22px;
	background: url(../images/spirit-icon.png) no-repeat 0 -361px;
	position: absolute;
	top: 10px;
	right: 10px;
}
.login-title{
	width: 350px;
	height: 70px;
	overflow: hidden;
	margin: 0 auto;
}
.login-title>h1{
	float: left;
	font-size: 20px;
	font-weight: normal;
	line-height: 70px;
}
.login-title>a{
	float: right;
	line-height: 70px;
	color: #ff6600;
	font-size: 12px;
}
.login-title>a:hover{
	text-decoration: underline;
}
.login-input{
	width: 350px;
	height: 123px;
	border: 1px solid #ddd;
	border-radius: 5px;
	margin: 0 auto;
	background-color: #fff;
	overflow: hidden;
}
.login-input>input{
	display: block;
	width: 350px;
	border: none;
	outline: none;
	padding:0 20px 0 53px;
}
.login-input>input:nth-child(1){
	height: 61px;
	border-bottom: 1px solid #ddd;
	background: url(../images/spirit-icon.png) no-repeat -44px -433px;
}
.login-input>input:nth-child(2){
	height: 60px;
	
	background: url(../images/spirit-icon.png) no-repeat -44px -364px;
	
}
.login-btn{
	display: block;
	margin: 25px auto 0;
	width: 350px;
	background-color: #00ae66;
	color: #fff;
	height: 60px;
	border: none;
	outline: none;
}
.login-btn:hover{
	background-color: #008f53;
}
.err-infor{
	height: 32px;
	line-height: 32px;
	color: red;
	font-size: 12px;
	text-align: center;
}

index.css

header{
	height: 740px;
	background: url(../images/index-bg.jpg) no-repeat center top fixed;
	background-size: cover;
	padding: 42px;	
	position: relative;
}
.navBar{
	background-color: rgba(0,0,0,0.5);
	height:42px;
}
.navBar-logo{
	width: 250px;
	height: 74px;
	float: left;
	background: url(../images/spirit-icon.png) no-repeat 0 0;
	margin-top: -16px;
}
.navBar-link{
	float: left;
	margin-left: 140px;
}
.navBar-link>li{float: left;}
.navBar-link>li>a{
	display: block;
	height: 42px;
	line-height: 42px;
	padding: 0px 20px;
	color: #fff;
}
.navBar-link>li>a:hover{
	color: #ff6600;
}
.navBar-loginBtn{
	float: right;
	margin-top:13px;
}
.navBar-loginBtn>a{
	float: left;
	display: block;
	height: 16px;
	line-height: 16px;
	font-size: 14px;
	color: #fff;
	padding: 0 5px;
}
.navBar-loginBtn>a:hover{
	color: #FF6600;
}
.navBar-loginBtn>a:nth-child(1){
	border-right: 1px solid #FFF;
}
.header-title{
	width: 574px;
	height:66px ;
	background: url(../images/spirit-icon.png) no-repeat 0 -93px;
	margin: 180px auto 0px;
}
.header-searchBox{
	width: 674px;
	margin: 0 auto;
	position:relative;
}
.header-searchBox>ul{
	overflow: hidden;
	margin-top: 40px;
}
.header-searchBox>ul>li{
	float: left;
	font-size: 14px;
	width: 56px;
	text-align: center;
	height: 42px;
	line-height: 42px;
	color: rgba(255,255,255,0.7);
	margin-right: 30px;
}
.header-searchBox>ul>.on{
	color: rgba(255,255,255,1);
	font-weight: bold;
}
.header-searchBox>div{
	height: 50px;
	/* background-color: #fff; */
	overflow: hidden;
	border-radius: 5px;
	border: 2px solid transparent;
	position: relative;
	z-index: 1;
}
.header-searchBox>div>input{
	float: left;
	width: 640px;
	height: 50px;
	line-height: 50px;
	border: none;
	outline: none;
	padding-left: 20px;
	
}
.header-searchBox>div>button{
	float: right;
	width: 120px;
	height: 50px;
	color: #fff;
	background-color:#00ae66;
	border: none;
	outline:none;
	cursor: pointer;
}
.header-searchBox>div>button:hover{
	background-color: #008f53;
}
.search-icon{
	display: block;
	width: 10px;
	height: 10px;
	background-color: #fff;
	position: absolute;
	transform: rotate(45deg);
	position: absolute;
	top: 40px;
	left: 20px;
}
.header-infor{
	position: absolute;
	width: 840px;
	left: 50%;
	margin-left: -420px;
	bottom: 21px;
}
.header-infor>li{}
.header-infor>li>a{
	display: block;
	font-size: 14px;
	color: #fff;
	height: 30px;
	line-height: 30px;
	text-align: center;
	
}
/* 导航样式规则 */
nav{
	height: 300px;
	text-align: center;
	padding-top: 73px;
}
nav>a{
	display: inline-block;
	width: 180px;
	margin: 0 100px;
}
nav>a>span{
	display: block;
	width: 74px;
	height: 74px;
/* 	background-color: red; */
	margin: 0 auto;
}
nav>a:nth-child(1)>span{
	background:url(../images/spirit-icon.png) no-repeat -2px -267px;
}
nav>a:nth-child(2)>span{
	background: url(../images/spirit-icon.png) no-repeat -120px -272px;
}
nav>a:nth-child(3)>span{
	background: url(../images/spirit-icon.png) no-repeat -251px -267px;
}
nav>a>h4{
	line-height: 30px;
	color: #333;
	margin-top: 14px;
}
nav>a>p{
	font-size: 12px;
	line-height: 18px;
	color: #999;
}
nav>a:hover>p{
	text-decoration: underline;
}
/* 内容样式规则 */
section{
	height: 550px;
	background: url(../images/index-coming.jpg) no-repeat center top 80px;
	background-size: cover;
	padding-top: 114px;
}
section>div>h1{
	width: 300px;
	height: 55px;
	background: url(../images/spirit-icon.png) no-repeat -2px -180px;
	margin-bottom: 34px;
}
section>div>p{
	width: 470px;
	line-height: 36px;
	font-size: 14px;
	color: #333;
}
section>div>div{
	margin-top: 32px;
	
}
section>div>div>img{
	display: block;
	float: left;
}
section>div>div>p{
	float: left;
	margin-left: 20px;
}
section>div>div>p>a{
	display: block;
	width: 136px;
	height: 45px;
	color: #fff;
	background-color: #00ae66;
	margin-bottom: 10px;
	text-align: center;
	line-height: 45px;
	border-radius: 5px;
}
section>div>div>p>a:hover{
	background-color: #008f53;
}

/* 页脚样式规则 */
footer{
	height: 200px;
	background-color: #333;
}
.footer-left{
	float: left;
	padding-top: 36px;
}
.footer-left>ul{
	border-bottom: 1px dashed  #666;
	margin-bottom: 10px;
}
.footer-left>ul>li{
	float: left;
	margin-right: 15px;
}
.footer-left>ul>li:last-child{margin-right:0}
.footer-left>ul>li>a{
	display: block;
	height: 44px;
	line-height: 44px;
	color: #fff;
	font-size: 13px;
}
.footer-left>ul>li>a:hover{
	color: #00ae66;
}
.footer-left>p{
	color: #666;
	font-size: 12px;
	line-height: 20px;
}
.footer-right{
	float: right;
	padding-top: 70px;
}
.footer-right>span{
	display: block;
	float: left;
	width: 40px;
	height: 40px;
	background:url(../images/spirit-icon.png) no-repeat -400px -282px;
	margin:12px 16px 0 0;
}
.footer-right>div{
	float: left;
	
}
.footer-right>div>p{
	height: 31px;
	line-height: 31px;
	color: #666;
}

大型网站布局效果如下

在这里插入图片描述

wyhcczz

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
大型网站首页之链家实现

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Ulife生活-引领你生活</title> <link rel="stylesheet" type="text/css" href="css/public.css"/> <link rel="stylesheet" type="text/css" href="css/index..
复制链接

扫一扫