Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实战“小诸葛金服”首页仿站及总结——2018年3月28日
Blogger Information
Blog 48
fans 3
comment 1
visits 37474
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实战“小诸葛金服”首页仿站及总结——2018年3月28日
JackBlog
Original
927 people have browsed it

在php中文网学了半个月左右了，今天终于开始实战了，说实话，心情有点小激动，因为终于能自己仿站了。

下面是我仿站的首页截图：QQ截图20180329111341.jpg

首页代码

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		
	</head>
	<body>
		<!--头部-->
		<div class="header">
			<div class="top">
				<div class="top_line">
					<p class="top_left">客服电话：400-600-6000</p>
					<p class="top_right"><a href="">登录</a> | <a href="">注册</a></p>
				</div>
				
			</div>
			<div class="logo_dh">
				<div class="logo"><img src="img/logo.png" alt="" /></div>
				<div class="dh">
					<ul>
						<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>
				</div>
			</div>
		</div>
		
		<!--轮播图及注册登录-->
		<div class="banner">
				<img src="img/banner1.png" alt="" />
				<div class="bannerbg">
					<div class="bannerlogin">
						<div class="logina">
							<p>安全</p><p>稳健</p><p>便捷</p>
						</div>
						<div class="loginb">
							588+888<span>元现金红包等你领！</span>
						</div>
						
						<div class="loginbtn">
							<button>立即登录</button>
						</div>
						<div class="loginc"><img src="img/aq_ico.png" alt="" /><span>交易资金安全全程有保障</span></div>
						
					</div>
				</div>
			</div>
		<div class="yyggbg">
			<div class="yygg">
			<ul>
				<li>2017年下半年运营报告</li>
				<li><span class="nrblack">投资人已赚收益</span> <span class="nrorange">103375960.35元</span></li>
				<li><span class="nrblack">累计用户</span> <span class="nrorange">1,617,445人</span></li>
			</ul>
		</div>
		</div>
		<!--体验标展示-->
		<div class="tybbg">
			<div class="tyb">
				<div class="tybborder"></div>
				<div class="tybzbg"><p>
					<img src="img/tyb.png" alt="" /> 体验专项标（收益免费拿）</p>
					<div class="tybmx">
							<div class="mx">
							<p class="mx1a">8.00%</p>
							<p>历史收益率</p>
						</div>
						<div class="mx">
							<p class="mx2a">2天</p>
							<p>投资期限</p>
						</div>
						<div class="mxbtn">
							<button>领取免费收益</button>
							
						</div>
					</div>
				</div>
				<div class="tybzbg"><p><img src="img/tyb.png" alt="" /> 新手标专享（限第一次投资用户）</p>
					<div class="tybmx">
								<div class="mx">
							<p class="mx1a">8.00%</p>
							<p>历史收益率</p>
						</div>
						<div class="mx">
							<p class="mx2a">2天</p>
							<p>投资期限</p>
						</div>
						<div class="mxbtn">
							<button>领取免费收益</button>
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--财富图片-->
		<div class="cgfkgf">
			<img src="img/cgfkgf.jpg" alt="" />
		</div>
		<!--新闻公告-->
		<div class="newsbg">
		<div class="news">
			<div class="meiti">
				<div class="t1"><h3>媒体报道</h3></div>
				<hr />
				<div class="n1">
					<img src="img/n1.jpg" alt="" />
					<p class="newstitle1"><a href="">小诸葛金服：践行合规 冲刺网贷</a></p>
					<p class="newstitle2">小诸葛金服：践行合规 冲刺网贷备案</p>
				</div>
				<div class="n1">
					<img src="img/n2.png"><a href=""></a>小诸葛金服：余额宝继续限购</p>
					<p class="newstitle2">小诸葛金服：余额宝继续限购，这些情况你应该了解</p>
				</div>
				<div class="n1">
					<img src="img/n3.jpg" alt="" />
					<p class="newstitle1"><a href=""></a>小诸葛金服：网贷想获得高收益?</p>
					<p class="newstitle2">小诸葛金服：网贷想获得高收益?这些偏见要抛弃</p>
				</div>
			</div>
			<div class="jituan">
					<div class="t1"><h3>集团公告</h3></div><hr />
					<div class="nrmain">
						<ul>
							<li><a href="">老用户福利升级 返现红包加码</a> <span>03-27</span></li>
							<li><a href="">关于网贷平台部分银行充值限额调整的公告</a> <span>03-27</span></li>
							<li><a href="">关于诸葛智投110天产品调整的公告</a> <span>03-27</span></li>
							<li><a href="">关于小诸葛财富部分银行充值限额的公告</a> <span>03-27</span></li>
							<li><a href="">关于财富平台农业银行认证支付维护的公告</a><span>03-27</span></li>
							<li><a href="">小诸葛财富送上三月踏青礼</a> <span>03-27</span></li>
							<li><a href="">关于网贷平台农业银行认证支付维护的公告</a> <span>03-27</span></li>
							<li><a href="">投资福利不停歇 网贷全场加息2%</a> <span>03-27</span></li>
							
						</ul>
					</div>
			</div>
		</div>
		</div>
		<!--广告图片-->
		<div class="contentbox">
			<img src="img/zc588.png" alt="" />
		</div>
		<!--合作商家-->
		<div class="newsbg">
			<div class="hzsj">
				<div class="hzsjtit"><p>合作伙伴</p></div>
			<div class="hzsjpic">
				<ul>
				<li><img src="img/hzsj1.jpg" alt="" /></li>
				<li><img src="img/hzsj2.png" alt="" /></li>
				<li><img src="img/hzsj3.png" alt="" /></li>
				<li><img src="img/hzsj4.png" alt="" /></li>
				<li><img src="img/hzsj5.png" alt="" /></li>
				<li><img src="img/hzsj6.png" alt="" /></li>
				<li><img src="img/hzsj7.png" alt="" /></li>
				<li><img src="img/hzsj8.png" alt="" /></li>
				<li><img src="img/hzsj9.png" alt="" /></li>
				<li><img src="img/hzsj10.png" alt="" /></li>
				</ul>
			</div>
				
			</div>
			
			
		</div>
		
		
		<!--底部-->
		<div class="footerbg">
			<div class="footer">
				<p>Copyright©2014-2018.小诸葛金服版权所有 沪ICP备15044200号 地址：上海市静安区江场路1377弄17号绿地中央广场2号楼9层 </p>
		</div></div>
	</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

样式代码：

重置样式reset.css：

实例

html {
	overflow-y: auto;
	overflow-x: hidden;
}
a:link, a:visited, a:active {
	color: #505050;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	/*color: #ff0000;*/
	color: #f00;
}
body, h1,h2,h3, ul,li,p {
	margin: 0;
	padding: 0;
	font-family: Helvetica, "Microsoft YaHei", Heiti, SC;
	color: #505050;
}
p, li, a {
	font-size: 12px;
}
ul, li {
	list-style-type: none;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

公共样式public.css

实例

.header{
	width: 100%;
	height: 100px;
	
}

.header .top{
	height: 30px;
	background-color: #f9f9f9;
	border-bottom: 1px solid #DCDCDC;
	overflow: hidden;
	
}
.header .top .top_line{
	
	width: 1200px;
	margin: auto;
	line-height: 30px;
	color: #aaa;
	
}
.header .top .top_line .top_left{
	float: left;
}
.header .top .top_line .top_right{
	float: right;
}

.header .top .top_line .top_right a + a{
	color: red;
}

.logo_dh{
	width: 1200px;
	
	margin: auto;
	overflow: hidden;
}

.logo_dh .logo{
	width: 360px;
	height: 70px;
	float: left;
}
.logo_dh .dh{
	float: right;
}
.logo_dh .dh ul li{
	line-height: 70px;
	padding-left: 40px ;
	float: left;

	
}
.logo_dh .dh ul{
	margin: auto;
	
}
.logo_dh .dh ul li a{
	font-size: 16px;	
	text-align: center;
}
.logo_dh .dh ul li a:hover{
	color: #26a8fe;
	font-weight: bolder;
	font-size: 18px;
	border-bottom: 3px solid #26a8fe;
	padding-bottom: 20px;

}

.footerbg{
	width: 100%;
	background-color: #363636;
	
}

.footer{
	
	
	height: 100px;
	margin: auto;
	text-align: center;

}

.footer p{
	color: #6c6c6c;
	font-size: 16px;
	line-height: 100px;
	
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

首页主体样式index.css

实例

.banner{
	width: 100%;
	height: 380px;
	margin: auto;
	/*border: 1px solid #22AACC;*/
	
}
.banner img{
	line-height: 1px;
	background-repeat: no-repeat;
	
}

.banner .bannerbg{
	width: 1200px;
	position: relative;
	margin: auto;
	
}
.banner .bannerbg .bannerlogin{
	width: 300px;
	height: 250px;
	background-color: #fff;
	position: absolute;
	top: -320px;
	right: 20px;
}
.banner .bannerbg .bannerlogin .logina{
	width: 270px;
	text-align: center;
	margin: 30px auto;
	overflow: hidden;
	
}
.banner .bannerbg .bannerlogin .logina p{
	float: left;
	width: 65px;
	height: 28px;
	border: 1px solid #f26061;
	font-size: 16px;
	margin: 0 10px ;
	line-height: 28px;
	color:#f36162 ;
	font-weight: bold;
	
}

.banner .bannerbg .bannerlogin .loginb{
	font-size: 20px;
	color:#f35e64;
	text-align: center;
	font-weight: bolder;
	
}
.banner .bannerbg .bannerlogin .loginb span{
	font-size: 16px;
	color:#454545 ;
	font-weight: normal;
}
.banner .bannerbg .bannerlogin .loginbtn{
	
	margin-left: 50px;
	margin-top: 20px;
	
}
.banner .bannerbg .bannerlogin .loginbtn button{
	
	width:200px;
	height: 40px;
	background-color: #F26262;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	color: #fff;
}
.banner .bannerbg .bannerlogin .loginbtn button:hover{
	background-color: #f1403e;
}

.banner .bannerbg .bannerlogin .loginbtn button:hover{
	background-color: #f1403e;
}

.banner .bannerbg .bannerlogin .loginc{
	width: 300px;
	height: 22px;
	margin-top: 20px;
	margin-left: 50px;
}
.banner .bannerbg .bannerlogin .loginc span{
	line-height: 22px;
}

.yyggbg{
	height: 60px;
	background-color: #fff;
}
.yygg{
	width: 1200px;
	margin: auto;
}
.yygg ul li{
	display: inline-block;
	width: 33%;
	text-align: center;
	line-height: 60px;
	font-size: 18px;
	color: #444444;
	border-right: 1px dotted #DCDCDC;
}

.yygg .nrblack{
	color: #000000;
	
}
.yygg .nrorange{
	color: orange;
}

.tybbg{
	width: 100%;
	background-color: #f2f2f2;
	
}

.tyb{
	width: 1200px;
	height: 267px;
	margin: auto;
	overflow: hidden;
}
.tyb .tybzbg{
	
	width: 570px;
	height: 172px;
	background-color: #fff;
	border-radius: 10px;
	float: left;
	margin: 40px  10px ;
}
.tyb .tybzbg:hover{
	box-shadow: 1px 1px 20px   #F77979;	
}
.tyb .tybzbg p{
	font-size: 20px;
	color: #000;
	margin: 20px 50px;
}


.tybmx .mx{
	
	float: left;
	overflow: hidden;
}
.tybmx .mx p{
	font-size: 18px;
	line-height: 10px;
	
}
.tybmx .mx .mx1a{
	color: #fe5b60;
	font-size: 28px;
}
.tybmx .mxbtn{
	margin-top: 30px;
	margin-left: 50px;
	float: left;

}
.tybmx .mxbtn button{
		width: 110px;
	height: 35px;
	background-color: #f26261;
	border: none;
	color: #fff;
	border-radius: 5px;
}
.cgfkgf{
	width: 1200px;
	height: 120px;
	margin: auto;
}
.cgfkgf img{
	width:1200px;
	height: 120px;
}

.newsbg{
	width: 100%;
	background-color: #f2f2f2;
}
.news{
	
	width:1200px;
	margin: auto;
	padding-top: 20px;
	overflow: hidden;
	
}
.news .meiti{
	width: 800px;
	height: 336px;
	background-color: #fff;
	float: left;
}
.news .meiti .t1{
	padding: 20px 20px;
}
.news .meiti .n1{
	width: 220px;
	float: left;
	margin-left: 35px;
}
.news .meiti img{
	
	height: 140px;
}
.news .meiti .n1 .newstitle1{
	font-size: 16px;
	text-align: center;
	
}
.news .meiti .n1 .newstitle2{
	font-size: 14px;
	color: #999;
}


.jituan{
	width: 380px;
	height: 336px;
	background-color: #fff;
	float: right;
}
.jituan .t1{
	padding: 20px 20px;
}

.nrmain{
	width: 380px;
	margin: auto;
	overflow: hidden;
}
.jituan .nrmain ul li{
	font-size: 14px;
	
	line-height: 30px;
	padding-left: 30px;
	width: 380px;
	text-align: left;
	float: left;
	position: relative;
}
.jituan .nrmain ul li a{
	color: #000000;
	}
.jituan .nrmain ul li a:hover{
	color: #26A8FE;
	}
.jituan .nrmain ul{
	
}

.jituan .nrmain li span{
	padding-left: 20px;
	position: absolute;
	right: 60px;
	color: #999999;

}

.contentbox{
	width: 100%;
	/*border: 1px solid #FF0000;*/
	line-height: 1px;
}
.contentbox img{
	height: 136px;
	width: 100%;
}

.hzsj{
	width: 1200px;
	margin: auto;
	overflow: hidden;
}
.hzsjtit{
	padding-top: 50px;
	padding-bottom: 20px;
}
.hzsjtit p{
	font-size: 20px;
	
	font-weight: bolder;
	color: #000000;
}

.hzsjpic ul li{
	float: left;
	margin-right: 17px;
	margin-bottom: 20px;
}
.hzsjpic ul li img{
	width: 223px;
	height: 97px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


总结：随便找了个看上去排版简单的网站，但是做的时候才发现，子块实在是太多了，有一段时间想换个简单点了，还好最终完成了。在看老师实战的时候，感觉都懂。但是等自己做的时候，手足无措的！最终仿这首页，竟然花了4小时。很多东西等到实际需要用的时候，不知道怎么用了！虽然最后做出来了，样式和原网站基本差不多了，但是也不知道是否算成功。看样子还是得多练习，多记，多看。

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post