前端小白仿写小米官网首页（静态页面+jquery轮播图）
前言：
（前端小白）最近为了稍微复习一下html和css，决定写一个页面练练手，最后决定仿写一下小米官网的首页，静态页面实现的差不多，再就写了一下轮播图效果，零零散散的时间加起来，大致用了一天半时间。有很多不足的地方，欢迎大家给出指导！
最终效果：
结构：
源码：
- index.html
"en">
"UTF-8">
"viewport" content="width=device-width, initial-scale=1.0">
小米首页
"shortcut icon" href="./image/favicon.ico" type="image/x-icon">
"stylesheet" href="./iconfont/iconfont.css">
"stylesheet" href="./css/base.css">
"stylesheet" href="./css/head.css">
"stylesheet" href="./css/footer.css">
"stylesheet" href="./css/index.css">
"head">
"topImg">
"*">
"./image/topim.jpg" alt="小米大促">
"topbar">
"site_topbar">
"top_headbar">
"container">
"search">
"home">
"container">
"home_main">
"top_row">
"banner">
"left_home">
- "i">
"*">手机 电话卡
"iconfont icon-arrow-right-bold">
"top_goods">
-
"./image/topgoods1.jpg">
-
"./image/s2.jpg">
-
"./image/s3.jpg">
-
"./image/s4.jpg">
-
"./image/s5.jpg">
-
"./image/s3.jpg">
-
"./image/s4.jpg">
-
"./image/s6.jpg">
-
"./image/s7.jpg">
-
"./image/s8.jpg">
-
"./image/s6.jpg">
-
"./image/s3.jpg">
-
"./image/topgoods1.jpg">
-
"./image/s3.jpg">
-
"./image/topgoods1.jpg">
-
"./image/topgoods1.jpg">
-
"./image/s2.jpg">
-
"./image/s3.jpg">
-
"./image/s4.jpg">
-
"./image/s5.jpg">
-
"./image/s4.jpg">
-
"./image/s5.jpg">
- "i">
"*">电视 盒子
"iconfont icon-arrow-right-bold">
- "i">
"*">笔记本 显示器
"iconfont icon-arrow-right-bold">
- "i">
"*">家电 插线板
"iconfont icon-arrow-right-bold">
- "i">
"*">出行 穿戴
"iconfont icon-arrow-right-bold">
"i">
- "i">
"*">智能 路由器
"iconfont icon-arrow-right-bold">
- "i">
"*">电源 配件
"iconfont icon-arrow-right-bold">
- "i">
"*">健康 儿童
"iconfont icon-arrow-right-bold">
- "i">
"*">耳际 音响
"iconfont icon-arrow-right-bold">
- "i">
"*">生活 箱包
"iconfont icon-arrow-right-bold">
"sub_row">
"row_li6">
"*">
"./image/span1.png" alt="">
米粉卡
"*">
"./image/span2.png" alt="">
小米秒杀
"*">
"./image/span3.png" alt="">
以旧换新
"*">
"./image/span4.png" alt="">
F码通道
"*">
"./image/span5.png" alt="">
话费充值
"*">
"./image/span6.png" alt="">
企业团购
"row_li3">
-
"./image/li1.jpg" alt="" />
-
"./image/li2.jpg" alt="" />
-
"./image/li3.jpg" alt="" />
"page_main">
"container">
"page_sale">
"top">
"title">小米闪购
"flash_buy">
-
"round">14:00 场
"iconfont icon-shandian">
"des">距离结束还有
"interval">
01
:
56
:
09
-
"*">
"content">
"thumb">
"./image/f1.jpg" alt="">
小米快充 续航时间长 值得拥有
"desc">变频 节能 省电环保
"price">
"color_orange">198元
398元
-
"*">
"content">
"thumb">
"./image/f8.png" alt="">
巨省电 | 小米新1级空调A大1匹
"desc">变频节能巨省电，自清洁
"price">
"color_orange">1099元
1290
-
"*">
"content">
"thumb">
"./image/f6.jpg" alt="">
米家踢脚线电暖器 白色
"desc">通电即热，冬日取暖神器
"price">
"color_orange">569元
599元
-
"*">
"content">
"thumb">
"./image/f5.png" alt="">
Pinlo迷你三明治机 白色
"desc">小巧身材，一机多用
"price">
"color_orange">198元
208元
"banner_ad_box">
"*">
"./image/banner_ad3.jpg" alt="">
"brick_box">
"top">
"title">手机
"more right">
"clearfix">
"ul_left left">
"ul_right left">
-
"*">
"content">
"thumb">
"./image/w1.png" alt="">
小米10至尊版
"desc">120X变焦/120W秒冲/120Hz屏幕
"price">
"color_orange">5299元起
-
"*">
"content">
"thumb">
"./image/w2.jpg" alt="">
Redmi K30 至尊版
"desc">120Hz弹出全面屏，天玑1000+
"price">
"color_orange">1299元起
-
"*">
"content">
"thumb">
"./image/w3.jpg" alt="">
腾讯黑鲨3s
"desc">骁龙865处理器，120Hz刷新率
"price">
"color_orange">3499元起
-
"*">
"content">
"thumb">
"./image/w4.jpg" alt="">
Redmi 9A
"desc">5000mAh循环大电量
"price">
"color_orange">599元起
-
"*">
"content">
"thumb">
"./image/w5.png" alt="">
小米10青春版5G
"desc">120X变焦/轻薄5G手机
"price">
"color_orange">1899元起
-
"*">
"content">
"thumb">
"./image/w6.png" alt="">
小米10
"desc">120W秒冲/120Hz屏幕
"price">
"color_orange">3799元起
-
"*">
"content">
"thumb">
"./image/w7.jpg" alt="">
Redmi K30 Pro
"desc">双模5G,骁龙865
"price">
"color_orange">5299元起
-
"*">
"content">
"thumb">
"./image/w8.jpg" alt="">
小米 Pro至尊版
"desc">120Hz屏幕/变焦
"price">
"color_orange">1299元起
"banner_ad_box" style="padding-bottom:24px">
"*">
"./image/banner_ad5.jpg" alt="">
"footer">
"site_footer">
"container">
"footer_service">
"footer_links">
"col_links">
- 关于小米
- "*">了解小米
- "*">加入小米
- "*">投资者关系
- "*">企业社会关系关系
- "*">廉洁举报
"col-contact">
"phone color_orange">400-100-5678
"tips">周一8:00-18:00（仅收市话费）
"service color_orange" href="*" target="_blank">
"iconfont icon-duanxin">
人工客服
"connect">
关注小米：
"*">
"iconfont icon-weibo">
"*">
"iconfont icon-weixing">
"site_info">
"container">
"logo">
"info-text">
"article">
"*" target="_blank">小米商城
"sep">|
"*" target="_blank">MIUI
"sep">|
"*" target="_blank">米家
"sep">|
"*" target="_blank">米聊
"sep">|
"*" target="_blank">多看
"sep">|
"*" target="_blank">游戏
"sep">|"*" target="_blank">路由器
"sep">|
"*" target="_blank">米粉卡
"sep">|
"*" target="_blank">政企服务
"sep">|
"*" target="_blank">小米天猫店
"sep">|
"*" target="_blank">小米集团隐私政策
"sep">|
"*" target="_blank">小米商城隐私政策
"sep">|
"*" target="_blank">小米商城用户协议
"sep">|
"*" target="_blank">问题反馈
"sep">|
"*" target="_blank">廉正举报
"sep">|
"*" target="_blank">诚信合规
"sep">|
"javascript:void(0);">Select Location
"ads">
©;
"*" target="_blank" title="mi.com">mi.com 京ICP证110507号
"*" target="_blank">京ICP备10046444号
"nofollow" href="*" target="_blank">京公网安备11010802020134号
"*" target="_blank">京网文[2017]1530-131号
"*" target="_blank">（京）网械平台备字（2018）第00005号
"*" target="_blank">互联网药品信息服务资格证 (京) -非经营性-2014-0090
"*" target="_blank">营业执照
"*" target="_blank">医疗器械公告
"*" target="_blank">增值电信业务许可证 ;
网络食品经营备案（京）【2018】WLSPJYBAHF-12 ;
"*" target="_blank">食品经营许可证
违法和不良信息举报电话：185-0130-1238 "*" target="_blank">知识产权侵权投诉
本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
"info-links">
"*" target="_blank">
"./image/v-logo-1.png" alt="TRUSTe Privacy Certification" />
"*" target="_blank">
"./image/v-logo-2.png" alt="诚信网站" />
"*" target="_blank">
"./image/v-logo-3.png" alt="可信网站" />
"*" target="_blank">
"./image/v3.png" alt="网上交易保障中心" />
"*" target="_blank">
"./image/v7.png" alt="诚信经营 放心消费" />
"slogan">
"./image/slogan2020.png" alt="">
- base.css
*{
margin:0;padding:0}
a{
text-decoration:none;color:#333}
ul, ol{
list-style-type:none}
img{
border:0}
body,ul,li,h1,h2,h3,h4,h5,h6{
font-size: 12;font-weight:normal}
h1,h2,h3,h4,h5,h6{
font-size:100%;font-weight:normal}
body,button,input,select,textarea{
font:14px/1.5 tahoma, \5b85\4f53, sans-serif;}
.left{
float:left}
.right{
float:right}
.container{
width:1228px;margin:0 auto}
.color_orange{
color:#FF6700}
- footer.css
#footer .site_footer{
overflow:hidden}
#footer .site_footer .footer_service{
height:80px;margin-top:24px;border-bottom: 1px solid #e0e0e0;}
#footer .site_footer .footer_service li{
float:left;width:244px;text-align:center;height: 25px;border-left: 1px solid #e0e0e0;font-size: 16px;line-height: 25px;padding-top:6px}
#footer .site_footer .footer_service li:first-child{
border-left:0}
#footer .site_footer .footer_service a{
color:#616161;}
#footer .site_footer .footer_service .iconfont{
font-size:26px;padding-right:4px}
#footer .site_footer .footer_links .col_links{
float:left;width:160px;margin:0;padding-top:42px}
#footer .site_footer .footer_links .col_links dt{
padding-bottom:32px}
#footer .site_footer .footer_links .col_links dd{
padding-bottom:16px;color:#757575;font-size:12px}
#footer .site_footer .footer_links .col-contact{
float: right;width: 246px;border-left: 1px solid rgb(224, 224, 224);text-align: center;color: rgb(97, 97, 97);margin-top:70px}
#footer .site_footer .footer_links .col-contact .phone{
font-size:18px}
#footer .site_footer .footer_links .col-contact .tips{
font-size:10px}
#footer .site_footer .footer_links .col-contact .service{
font-weight:bold;display:block;width:122px;height:30px;border:1px solid #FF6700;margin-left:64px;margin-top:10px;padding-top:4px}
#footer .site_footer .footer_links .col-contact .connect{
font-size:12px;}
#footer .site_footer .footer_links .col-contact .connect .iconfont{
font-size:24px;padding-top:-2px}
#footer .site_footer .footer_links .col-contact .connect .iconfont:hover{
color:#FF6700}
#footer .site_footer .footer_links .col-contact .service:hover{
background-color:#FF6700;color:white}
#footer .site_info{
padding: 30px 0;font-size: 12px;background: #fafafa;position:relative;}
#footer .site_info .logo{
width:57px;height:57px;margin-right:10px;background:url('../image/logo-footer.png') no-repeat 50% 50%;position:absolute;top:30px;left:60px;}
#footer .site_info .info-text{
position:absolute;top:30px;left:132px;}
#footer .site_info .info-text .article{
color:#757575}
#footer .site_info .info-text .ads,.ads a{
color:#B0B0B0;}
#footer .site_info .info-links{
position:absolute;top:120px;left:130px}
#footer .site_info .info-links a:nth-child(5) img{
width:106px;height:42px;margin-top:6px}
#footer .site_info .slogan{
position:absolute;top:200px;left:490px;margin-bottom:30px}
#footer .ads a:hover{
color:#FF6700}
#footer dd a:hover{
color: #FF6700;}
#footer .article a:hover{
color: #FF6700;}
#tool_bar{
width:28px;height:260px;position:fixed;bottom:38px;right:32px}
#tool_bar div{
width:100%;height:40px;border:1px solid #F5F5F5;background-color:#FFFFFF}
#tool_bar div span{
font-size:18px;padding:4px;line-height:40px;color:#999999}
#tool_bar .iconfont:hover{
color:#FF6700}
- head.css
#head .site_topbar{
width:100%;height:42px;background-color:#333333;margin-top:-6px}
#head .site_topbar ul:nth-child(2){
margin-left:140px}
#head .site_topbar ul:nth-child(2) li{
margin-left:8px}
#head .site_topbar ul:nth-child(3){
opacity:.5;}
#head .site_topbar img{
width:30px;height:30px}
#head .site_topbar .split{
width:1px;height:16px;background-color:#ffffff;margin-top:15px}
#head .site_topbar ul li{
float:left;margin-right:8px;line-height:42px}
#head .site_topbar ul li a {
font-size:10px;color:#ffffff}
#head .site_topbar ul li em{
color:#ffffff;font-size:14px}
#head .top_headbar{
height:100px;}
#head .top_headbar .logo img{
width:55px;height:55px;margin:24px 0 24px 0}
#head .top_headbar{
position:relative}
#head .top_headbar .list{
position:absolute;left:304px;top:34px;}
#head .top_headbar .list li{
float:left;margin-right:18px}
#head .top_headbar .list a{
color:rgb(10, 9, 9);font-size:16px}
#head .top_headbar .search{
position:absolute;top:26px;right:58px;}
#head .top_headbar .search .search-text{
width:244px;height:50px;border:1px solid gray;position:absolute;
top:-1px;left:-251px}
#head .top_headbar .search a{
display:block;width:50px;height:50px;}
#head .top_headbar .search a:hover .search-btn{
color:#ffffff;background-color:#FF6700}
#head .top_headbar .search .search-btn{
display:inline-block;border:1px solid gray;width:30px;height:50px;margin-left:-6px;background-color:#ffffff;margin-top:-1px;}
#head .top_headbar .search .icon-sousuo{
font-size:18px;font-weight:bold;line-height:50px;padding-left:18px;color:#2E1F1F}
- index.css
#head img{
width:100%;height:120px}
#home .home_main{
position:relative}
#home .top_row{
height:462px;} /* 高度塌陷*/
#home .top_row div{
height:462px;position:absolute;left:0;top:0}
#home .left_home{
width:234px;background-color:#9B9B9D;opacity:.8;line-height:42px;}
#home .left_home a{
color:#ffffff;font-size:16px}
#banner{
width:100%;}
#banner ul li img{
width:1228px;height:462px}
#banner{
overflow:hidden;width:1228px;height:462px;}
#banner ul{
position:absolute;}
#banner ul li a{
display: block;width:100%;height:100%}
#banner ul li{
float:left;}
#banner ul li a{
opacity:1}
#banner ol{
position:absolute;bottom:20px;right:34px;z-index:2;cursor: pointer;}
ol li{
float:left;width:6px;height:6px;border-radius:50%;border:2px solid #899093;background-color:#79818B;z-index:1;margin-left:5px}
.active{
background-color:#ffffff;}
#home .left_home ul li{
float:left;width:100%;height:42px;position:relative}
#home .left_home ul .i:hover{
background-color:#FF6700}
#home .left_home ul .i:first-child{
margin-top:22px}
#home .left_home ul .i a{
font-size:14px;padding-left:30px;}
#home .left_home .icon-arrow-right-bold{
font-size:16px;font-weight:bold;color:#ffffff;position:absolute;right:20px;top:2px}
#home .sub_row{
overflow:hidden;margin-top:16px;margin-bottom:28px}
#home .sub_row .row_li6{
width:234px;height:172px;float:left}
#home .sub_row .row_li6 li{
float:left;width:80px;height:88px;background-color:#5F5750;margin:-2px;list-style-type: none;border:1px solid white}
#home .sub_row .row_li6 li img{
width:24px;height:24px;margin:24px 0 0 28px;}
#home .sub_row .row_li6 li span{
color:#ffffff;font-size:10px;padding:0 0 32px 16px}
#home .sub_row .row_li3{
width:982px;height:172px;float: left;margin-left:12px}
#home .sub_row .row_li3 li{
float:left;width:318px;height:172px;margin-right:14px}
#home .sub_row .row_li3 li:last-child{
margin-right:0}
#home .sub_row .row_li3 li img{
width:100%;height:100%}
.top_goods{
width:800px;height:300px;margin-left:232px;margin-top:-22px;display:flex;display:none}
#home .top_goods ul li{
width:198px;height:66px;background-color:#ffffff;}
#home .top_goods ul li img{
display:inline-block;width:60px;height:60px;margin-left:15px;margin-top:5px}
#home .top_goods ul li span{
line-height:66px}
.i:hover .top_goods{
display:block}
#page_main{
background-color:#f5f5f5;position:relative;}
.top{
height:62px}
.title{
font-size:22px;font-weight:200;line-height:58px;color:#333}
#page_main .page_sale .top .swiper_controls{
position:absolute;top:26px;right:60px;}
#page_main .page_sale .top .swiper_controls span{
display:inline-block;width:34px;height:22px;border:1px solid #E0E0E0;line-height:22px}
#page_main .page_sale .top .swiper_controls .swiper_pre{
margin-right:-5px;}
#page_main .page_sale .top .swiper_controls .swiper_pre a{
display:block;width:34px;height:22px;}
#page_main .page_sale .top .swiper_controls span i{
padding-left:8px;}
#page_main .page_sale .flash_buy{
overflow:hidden} /* 解决子元素浮动带来的父元素高度塌陷问题 */
#page_main .page_sale .flash_buy ul li{
float:left;height:342px;width:234px;border-top:2px solid green;background:#FFFFFF;margin-right:14px}
#page_main .page_sale .flash_buy ul li:first-child{
border-top:2px solid red}
#page_main .page_sale .flash_buy ul li:nth-child(2){
border-top:2px solid blue}
#page_main .page_sale .flash_buy ul li:nth-child(3){
border-top:2px solid pink}
#page_main .page_sale .flash_buy ul li:last-child{
margin-right:0px;border-top:2px solid brown}
.content .thumb{
width:160px;margin: 44px auto 22px;}
.content .thumb img{
height:160px;width:160px;}
.content .thumb img a{
width:234px;height:342px;display:block;color:black;}
.content .desc,.price,h3{
text-align:center}
.content .desc{
height: 18px;margin: 2px 20px 12px; font-size: 12px;color: #b0b0b0;overflow: hidden;white-space: nowrap;}
.clearfix .content img{
width:100%;height:100%}
#page_main .page_sale .flash_buy .round{
font-size: 21px;color: #ef3a3b;margin-top:62px;text-align:center}
#page_main .page_sale .flash_buy .icon-shandian{
color:red;font-size:50px;padding-left:100px}
#page_main .page_sale .flash_buy .des{
color:#6F6D6D;text-align:center;padding-top:30px}
#page_main .page_sale .flash_buy .interval{
margin:26px 0 0 34px}
#page_main .page_sale .flash_buy .interval span{
display:inline-block;width:48px;height:44px;background-color:#605751;color:#ffffff;text-align:center;font-size:24px;padding-top:4px;}
#page_main .banner_ad_box{
height:120px;margin-top:22px}
#page_main .banner_ad_box img{
width:100%;height:100%}
#page_main .brick_box{
position:relative}
#page_main .brick_box .more{
font-size:16px;position:absolute;top:24px;right:0}
#page_main .icon-xiangyou{
font-size:18px}
.clearfix{
height:616px;overflow:hidden}
#page_main .clearfix .ul_left{
width:232px;height:100%}
#page_main .clearfix .ul_left img{
width:100%;height:616px}
#page_main .clearfix .ul_right{
width:994px;overflow:hidden;}
#page_main .clearfix .ul_right li{
float:left;width:230.5px;height:300px;margin-left:18px;
background: #fff;margin-bottom:16px}
/* 小米盒子阴影 */
.clearfix ul li{
border-radius: 5px;transition: .5s;}
.clearfix ul li:hover{
box-shadow:0px 6px 8px 3px #ccc;}
- banner.js
$(function () {
var oBtns = null;
var oImgs = null;
var isNow = 0; //记录当前图片的下标
var timer = null;
// 设置定时器
timer = setInterval(function () {
isNow++;
tab();
}, 2500);
//封装切换函数
function tab() {
if (!oImgs) {
oImgs = $("#ul1 li").find("a");
}
if (!oBtns) {
oBtns = $("#banner ol li");
}
if (isNow == 5) {
isNow = 0;
}
oBtns.attr("class", "").eq(isNow).attr("class", "active");
if (isNow == oBtns.size()) {
oBtns.eq(0).attr("class", "active");
//判断，若当前显示图片下标为当前按钮个数时，将oBtns中的第一个按钮的class置为active
}
oImgs.hide().css("opacity", "0.2").eq(isNow).show().animate({
opacity: 1 }, 500);
}
//点击小圆点，跳到对应的图片
$("#banner ol a").click(function () {
isNow = $(this).index(); //获取当前节点在兄弟节点中的下标
tab();
return false; //阻止a链接的默认行为
})
//添加鼠标移入移出
$("#banner").mouseenter(function () {
clearInterval(timer);
}).mouseleave(function () {
timer = setInterval(function () {
isNow++;
tab();
}, 2500);
})
})
完整源码请移步：https://github.com/Gladiola-fei/–XIAOMI/tree/master