在php中文网学了半个月左右了，今天终于开始实战了，说实话，心情有点小激动，因为终于能自己仿站了。
下面是我仿站的首页截图：
首页代码
实例
<!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小时。很多东西等到实际需要用的时候，不知道怎么用了！虽然最后做出来了，样式和原网站基本差不多了，但是也不知道是否算成功。看样子还是得多练习，多记，多看。
