仿制线刷宝首页，
首页用index.css 制作样式
header footer 用 common.css 制作样式
resest.css 添加少量通用样式
index.css
/*
* @Author: Marte
* @Date: 2018-03-29 09:33:31
* @Last Modified by: Marte
* @Last Modified time: 2018-03-30 10:20:40
*/
.container{
width: 1180px;
height:310px;
margin: 0 auto;
margin-bottom: 50px;
}
// 主体部分
.main{
width: 1180px;
height:310px;
// margin: 0 auto;
}
.main .main-box1{
width: 380px;
height:120px;
// border:1px solid red;
margin-top:50px;
float: left;
margin-right:10px;
}
.main .main-box1 img{
width: 120px;
height:120px;
float: left;
}
.main .main-box1 .box1-info{
width: 260px;
height:120px;
float: right;
}
.main .main-box1 .box1-info .title{
font-size:24px;
color: #333;
margin-top:20px;
}
.main .main-box1 .box1-info .text{
font-size:14px;
color: #666;
margin-top:10px;
}
// 搜索 box
.searchbox{
width: 1020px;
height:174px;
margin: 0 auto;
}
.searchbox p{
font-size:24px;
color: #333;
text-align: center;
}
.searchbox .search{
width:950px;
height:49px;
margin: 0 auto;
padding-top:30px;
text-align: center;
}
.searchbox .search label{
float: left;
line-height:49px;
}
.searchbox .search input{
border:1px solid #bcbcbc;
border-right: none;
width:519px;
height:44px;
padding-left:10px;
color: #999;
float: left;
line-height:49px;
}
.searchbox .search .cx{
display: block;
cursor:pointer;
width: 120px;
font-size:18px;
line-height:49px;
float: left;
color:#fff;
background-color:#00A6FC;
}
.searchbox .search span{
color: #666;
font-size: 12px;
margin-left: 5px;
float: left;
line-height: 49px;
}
.searchbox .search .more{
color: blue;
font-size: 12px;
margin-left: 5px;
float: left;
line-height: 49px;
}
// 广告列表
.index-m{
width:100%;
height: 1025px;
background-color:#EEE;
position:relative;
}
.index-m .index-m-content{
width:1180px;
margin:10px auto;
overflow:hidden;
}
.index-m .index-m-content-left{
width:368px;
height:519px;
background-color:#fff;
margin-top:54px;
border:1px solid red;
float: left;
}
.index-m .index-m-content-left p{
margin-left:30px;
margin-top:10px;
font-size:24px;
}
.index-m .index-m-content-left img{
float: left;
vertical-align: middle;
}
.index-m .index-m-content-left .more{
float: right;
margin-right:24px;
margin-top:10px;
font-size:14px;
}
.index-m .index-m-content-right{
width:368px;
height:519px;
background-color:#fff;
margin-top:54px;
border:1px solid red;
float: left;
margin-left:20px;
// margin-right:20px;
}
.index-m .index-m-content-right dl{
text-align: center;
width: 300px;
color: #333;
font-size: 14px;
line-height: 42px;
}
.index-m .index-m-content-right p{
margin-left:30px;
margin-top:10px;
font-size:24px;
}
.index-m .index-m-content-right .more{
float: right;
margin-right:24px;
margin-top:10px;
font-size:14px;
}
.index-m .index-m-content-middle{
width:368px;
height:519px;
background-color:#fff;
margin-top:54px;
border:1px solid red;
float: left;
margin-left:20px;
}
.index-m .index-m-content-middle dl{
text-align: center;
width: 300px;
color: #333;
font-size: 14px;
line-height: 42px;
}
.index-m .index-m-content-middle p{
margin-left:30px;
margin-top:10px;
font-size:24px;
}
.index-m .index-m-content-middle .more{
float: right;
margin-right:24px;
margin-top:10px;
font-size:14px;
}common.css
/*
* @Author: Marte
* @Date: 2018-03-29 09:33:20
* @Last Modified by: Marte
* @Last Modified time: 2018-03-30 11:24:30
*/
.header_top{
height: 32px;
background-color: #F3F3F3;
}
.header_top_box{
width: 1180px;
max-height: 32px;
margin: 0 auto;
}
.header_top_box .welcome{
font-size: 12px;
line-height: 32px;
margin-right: 10px;
}
.header_top_box .loginBtn, .right{
font-size:12px;
margin-right:10px;
}
.header_top_box a:hover{
text-decoration: underline;
}
.header_top_box .top_right{
float: right;
line-height:32px;
}
.header_top_box .top_right a{
margin:2px;
font-size:12px;
}
.header_top_box .top_right span{
margin-left: 5px;
}
.header_top_box img{
vertical-align: middle;
}
// 导航区域
.header_contianer{
background-color:#fff;
margin: 0 auto;
}
.head{
width: 1180px;
height:88px;
padding-top:15px;
margin: 0 auto;
}
.head .logo-text{
font-size:12px;
}
.head .logo{
float: left;
}
.head .logo strong{
vertical-align:bottom;
position:relative;
margin-left:-96px;
}
.head .nav{
height:80px;
float: right;
}
.head .nav ul li {
float: left;
font-size:16px;
line-height:55px;
margin-right: 10px;
padding: 0 10px;
}
.head .nav ul li:first-child{
border-bottom: 2px solid #0EA2F7ed;
}
.head .nav ul li:hover{
cursor: pointer;
list-style-type: none;
border-bottom: 2px solid #0EA2F7ed;
}
.head .nav ul li a:hover{
color:#0EA2F7ed;
}
// banner 区域
.banner{
width: 100%;
height:480px;
}
.banner img{
vertical-align: top;
}
.banner-bottom-box{
width: 100%;
height:70px;
background-color: rgba(0, 0, 0, .25);
position: absolute;
margin-top: -70px;
float: left;
}
.banner-bottom-box span{
line-height:70px;
color:#FFFFFF;
font-size:12px;
padding-left: 100px;
}
.banner-bottom-box .banner-bootom-box-down{
float: right;
padding-right:200px;
margin: 0 auto;
overflow: hidden;
}
.banner-bottom-box .banner-bootom-box-down img{
vertical-align: middle;
}
.banner-bottom-box .banner-bootom-box-down span{
padding:5px;
}
.banner-bottom-box .banner-bootom-box-down a{
color: #fff;
cursor: pointer;
background-position: right 50%;
}
.banner-bottom-box .banner-bootom-box-down p {
margin-left:25px;
position:relative;
color:#FFF;
font-size:24px;
float: right;
width: 230px;
height:70px;
background-color:#00B4FF;
display: inline-block;
line-height:61px;
text-align: center;
background: #0eadff url(../images/downicon.png) no-repeat 28px;
background-position:left 20%;
background-position:10px center;
}
.banner-bottom-box .banner-bootom-box-down em{
display: block;
position: relative;
margin-top: -36px;
font-size: 12px;
color: #f7f5f5;
}
// 头部结束
// 底部信息
.footer{
width: 100%;
height:315px;
}
.footer .footer-link h4{
margin-left:40px;
}
.footer .links ul li{
float: left;
margin:10px;
}
.footer .links ul li a{
font-size:12px;
}
.footer .footer-box{
clear: both;
text-align: center;
line-height:70px;
background-color:#303333;
}
.footer .footer-box p{
color:#fff;
font-size:14px;
}resest.css
/*
* @Author: Marte
* @Date: 2018-03-29 09:30:04
* @Last Modified by: Marte
* @Last Modified time: 2018-03-30 10:51:54
*/
/*样式重置*/
html {
overflow-y: auto;
overflow-x: hidden;
}
body, h1,h2,h3, ul,li,p {
margin: 0;
padding: 0;
font-family: 'microsoft yehei', Verdana, Arial;
color: #505050;
}
em{
font-style: normal;
}
// p, li, a {
// font-size: 14px;
// }
ul, li {
list-style-type: none;
}
a:link, a:visited, a:active {
// color: #505050;
text-decoration: none;
}
a:hover {
text-decoration: none;
/*color: #ff0000;*/
// color: #f00;
}index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>刷机软件_一键救机 - 线刷宝</title> <link rel=stylesheet href="css/reset.css"> <link rel=stylesheet href="css/common.css"> <link rel="stylesheet" href="css/index.css"> </head> <body> <!-- 公共header --> <div> <div> <span>欢迎来到线刷宝！</span><a href="">请登录</a><a href="">注册</a> <div> <a href="">开始者招募</a><span>|</span> <a href="">技术支持QQ群</a><span>|</span> <a href="">极度精简ROM</a><span>|</span> <a href="">官方论坛</a><span>|</span> <img src="images/mobile_ico.png"><a href="">支持机型</a> </div> </div> </div> <div> <div> <div> <img src="images/index-logo.png" alt="线刷宝" /> <strong>做靠谱的刷机工具</strong> </div> <div> <ul> <li><a href="">首 页</a></li> <li><a href="">刷机工具</a></li> <li><a href="">刷机包下载</a></li> <li><a href="">特制ROM</a></li> <li><a href="">ROM专题</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> <!-- 首页banner图 --> <div> <img src="images/banner.png"> <div> <span>智能的安卓刷机工具，一键线刷，化繁为简，让人人成为刷机高手。</span> <div> <img src="images/icon-baidu-download.png"><span><a href="">百度软件中心下载</a></span> <a href=""> <p>下载线刷宝 <em>V1.7 | 51.91MB</em> </p> </a> </div> </div> </div> <!-- 主体部分 main --> <div> <div> <div> <div> <img src="images/box-1.png"> </div> <div> <p>智能线刷</p> <p>智能的安卓刷机工具,一键线刷化繁为简,让人人成为刷机高手</p> </div> </div> <!-- box2 --> <div> <div> <img src="images/box-1.png"> </div> <div> <p>智能线刷</p> <p>智能的安卓刷机工具,一键线刷化繁为简,让人人成为刷机高手</p> </div> </div> <!-- box3 --> <div> <div> <img src="images/box-1.png"> </div> <div> <p>智能线刷</p> <p>智能的安卓刷机工具,一键线刷化繁为简,让人人成为刷机高手</p> </div> </div> <!-- box4 --> <div> <div> <img src="images/box-4.png"> </div> <div> <p>智能线刷</p> <p>智能的安卓刷机工具,一键线刷化繁为简,让人人成为刷机高手</p> </div> </div> <!-- box5 --> <div> <div> <img src="images/box-5.png"> </div> <div> <p>智能线刷</p> <p>智能的安卓刷机工具,一键线刷化繁为简,让人人成为刷机高手</p> </div> </div> </div> </div> <!-- 搜索 box --> <div> <p>已兼容4505个手机型号共12145个刷机包</p> <div> <label>快速匹配机型：</label> <input type="text" id="cx" name="cx" value="输入你要查询的手机品牌、型号、固件号" placeholder=""> <a>查 询</a> <span>没有您的机型?</span> <a href="">申请适配机型</a> </div> </div> <!-- 广告列表 --> <div> <div> <div> <p>热门品牌<a href="">更多></a></p> <div style="overflow: hidden;height:462px;"> <img src="images/samsung.png"> <img src="images/huawei.png"> <img src="images/xiaomi.png"> <img src="images/oppo.png"> <img src="images/vivo.png"> <img src="images/zte.png"> <img src="images/lenovo.png"> <img src="images/letv.png"> <img src="images/gionee.png"> <img src="images/coolpad.png"> </div> </div> <div> <p>热门机型<a href="">更多></a></p> <div style="overflow: hidden;height:462px;"> <dl> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> </dl> </div> </div> <div> <p>最新上线<a href="">更多></a></p> <div style="overflow: hidden;height:462px;"> <dl> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> <dt> <a href="">小米 红米2A（标准版_CPU_联芯）</a></dt> </dl> </div> </div> </div> </div> <!-- 公共footer --> <div> <div> <h4>友情链接（申请友链，请联系QQ：2850326380）</h4> </div> <div> <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> <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> <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> <li><a href="">百度一下</a></li> </ul> </div> <div> <p>Copyright © 2013-2018 xianshuabao.com All Rights Reserved 线刷宝线刷工具 浙ICP备14007167号-4</p> </div> </div> </body> </html>
运行截图：
在线地址：http://23.105.194.33/xianshuabao/
总结：定位布局运用不熟悉，还有少许几点未做完美。。
