前端学习之仿小米官网HTML+CSS

一个简单的仿小米官网

index.css

/* 主页index.html样式表 */
.topbar-wrapper{width: 100%;background-color:#333;height:40px;line-height:40px;}
/* 超链接颜色 */
.topbar a{font-size:12px;color:#b0b0b0;display:block;}
.topbar a:hover{color:#fff;
}
/* 设置中间分割线 */
.topbar .line{font-size:12px;color:#424242;margin:0 8px;}
/*左侧导航栏  */
.service{float:left;
}
.service,.topbar-wrapper li{float:left;
}
.app{position: relative;
}
/* 设置app下三角 */
.app::after{display: none;content: '';position: absolute;width: 0;height: 0;/* 设置四个方向边框 */border: 8px solid transparent;border-top:none;border-bottom-color:#FFFFFF;bottom:0;left:0;right:0;margin:auto;}
.app:hover .qrcode,
.app:hover::after{display: block;height: 148px;
}
/* 设置下载app的下拉 */
.app .qrcode{/* display: none; */position: absolute;width:124px;/* height: 148px; */height:0px;line-height:1;text-align:center;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.3);left:-40px;overflow: hidden;/* margin-left:-62px; *//* 为样式设置过渡效果 */transition: height .3s;}
.app .qrcode img{width:90px;margin:17px;margin-bottom:10px;
}
.app .qrcode span{font-size:14px;}
/* 右侧导航栏 */
.shop-cart,.user-info{float:right;
}
.shop-cart{margin-left:26px;background-color: #EEEEEE;
}
.shop-cart a{width: 120px;background-color:#424242;text-align:center;}
.shop-cart:hover a{background-color:#fff;color:#ff6700;/* color:red; */
}
.shop-cart i{padding-right:2px;
}
.shop-qrcode{position: absolute;width:316px;/* line-height:100px; */height: 0px;color: #424242;overflow: hidden;background-color: #FFFFFF;box-shadow:0 5px 5px rgb(0,0,0,0.2);transition: height .3s;margin-left:-196px;}
.shop-cart:hover .shop-qrcode,
.shop-cart:hover::after{display: block;height: 100px;line-height: 100px;
}/* .header-wrapper{background-color: red;
} */
/* 设置header */
.header{height: 100px;/* background-color: #bfa; */}
.header .logo{float: left;margin-top: 22px;width: 55px;height:55px;position: relative;overflow: hidden;text-indent: -999px;}
.header .logo a{position: absolute;width: 55px;height:55px;left:0;background-color:#ff6700;background-image:url(../img/mi-logo.png) ;background-position: center;transition: left 0.3s;
}
.header .logo .home{left:-55px;background-image:url(../img/mi-home.png) ;}
.header .logo:hover .mi{left: 55px;
}
.header .logo:hover .home{left: 0px;
}/* 设置导航条 */
.header .nav-wrapper{float:left;margin-left: 7px;}
.header .nav{/* width: 792px; *//* background-color: #bfa; */line-height: 100px;padding-left: 58px;
}
.nav > li{float:left;
}
.all-goods-wrapper{position: relative;/* background-color: red; */
}
/* 设置左侧导航条 */
.left-menu{height: 420px;width: 234px;padding:20px 0;background-color: rgba(0,0,0,0.6);position: absolute;z-index: 999;left:-120px;line-height: 1;
}
ul.left-menu li a{display: block;height: 42px;line-height: 42px;color: white;margin-right: 0;padding: 0 30px;font-size: 14px;
}
ul.left-menu li a:hover{color: white;background-color: #FF6700;
}
.left-menu a i{float:right;line-height: 42px;
}
.nav-wrapper li a{font-size: 16px;color: #000000;margin-right: 20px;display:block;}
.nav-wrapper li a:hover{color:#ff6700;
}/* 隐藏全部商品 */
.all-goods{visibility: hidden;
}
.nav .goods-info{background-color: #FFFFFF;width: 100%;height:0;overflow: hidden;
/*  border-top:1px solid rgb(224,224,224);box-shadow:0 5px 5px rgb(0,0,0,.2); */position: absolute;top:139px;left:0;transition: height 0.3s;z-index:999;}
/* .nav li:not(:first-of-type):not(:nth-child(10)):not(:nth-child(9)):hover ~ .goods-info, */
.nav .show-goods:hover ~ .goods-info,
.goods-info:hover{height: 228px;border-top:1px solid rgb(224,224,224);box-shadow:0 5px 5px rgb(0,0,0,0.3);
}/* 设置搜索框容器 */
.search-wrapper{width: 296px;height:50px;/* background-color: red; */float:right;margin-top: 25px;
}.search-wrapper .search-inp{box-sizing:border-box;width: 224px;border:none;float: left;padding:0 10px;height: 50px;font-size: 16px;border:1px solid rgb(224,224,224);outline:none;}
/* 设置获取焦点之后的样式 */
.search-wrapper .search-inp:focus,
.search-wrapper .search-inp:focus+button{outline:1px solid #ff6700;
}
.search-wrapper .search-btn{float: left;height: 50px;width: 52px;padding: 0;border:none;background-color:#FFFFFF;color:#616161;/* color:red; */font-size: 16px;border:1px solid rgb(224,224,224);border-left:none;
}
.search-wrapper .search-btn:hover{background-color: #ff6700;color: white;border:none;
}
/* 设置banner */
.banner{position: relative;height: 460px;
}
.banner .img-list li{position: absolute;
}
.banner img{width:100%;vertical-align:top;
}
/* 设置五个导航点 */
.pointer{position:absolute;bottom:22px;right:35px;
}
.pointer a{float:letf;width: 6px;height: 6px;border:2px rgba(255,255,255,.4) solid;border-radius: 50%;background-color: rgba(0,0,0,.4);margin-left:6px;
}
.pointer a:hover,
.pointer a.active{border-color:rgba(0,0,0,.4);background-color: rgba(255,255,255,.4);
}

reset.css

/* v2.0 | 20110126http://meyerweb.com/eric/tools/css/reset/ License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}

base.css

/* 公共样式 */
.clearfix::before,
.clearfix::after{content:'';display:table;clear:both;
}
a{text-decoration:none;}
body{font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serifcolor:#333;min-width:1226px;
}
/* 设置一个类，用来表示中间容器宽度 */
.w{width:1226px;/* 设置容器居中 */margin:0 auto;}

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title><!-- 引入重置样式表 --><link rel="stylesheet" type="text/css" href="./css/reset.css"/><!-- 引入图标字体库 --><link rel="stylesheet" type="text/css" href="./fa/css/all.css"/><!-- 引入当前页面样式表 --><link rel="stylesheet" type="text/css" href="./css/index.css"/><!-- 引入base.css --><link rel="stylesheet" type="text/css" href="./css/base.css"/></head><body><!-- 创建顶部导航条 --><!-- 顶部导航外部 --><div class="topbar-wrapper"><!-- 创建内部容器 --><div class="topbar w clearfix"><!-- 左侧导航 --><ul class="service"><li><a href="javascript:;">小米商城</a></li><li class="line">|</li><li><a href="javascript:;">MIUI</a></li><li class="line">|</li><li><a href="javascript:;">LOT</a></li><li class="line">|</li><li><a href="javascript:;">云服务</a></li><li class="line">|</li><li><a href="javascript:;">金融</a></li><li class="line">|</li><li><a href="javascript:;">有品</a></li><li class="line">|</li><li><a href="javascript:;">小爱开放平台</a></li><li class="line">|</li><li><a href="javascript:;">企业团购</a></li><li class="line">|</li><li><a href="javascript:;">资质证照</a></li><li class="line">|</li><li><a href="javascript:;">协议规则</a></li><li class="line">|</li><li><a class="app" href="javascript:;">下载app<!-- 添加一个弹出层 --><div class="qrcode"><img src="./img/download.png" ><span>小米商城APP</span></div></a></li><li class="line">|</li><li><a href="javascript:;">Select Location</a></li><li class="line">|</li>      </ul><!-- 购物车 --><ul class="shop-cart"><li><a href="javascript:;"><i class="fas fa-shopping-cart"></i>购物车（0）<!-- 添加一个弹出层 --><div class="shop-qrcode"><span>购物车中还没有商品，赶紧选购吧！</span></div></a></li></ul><!-- 用户注册登录信息 --><ul class="user-info"><li><a href="javascript:;">登录</a></li><li class="line">|</li><li><a href="javascript:;">注册</a></li><li class="line">|</li><li><a href="javascript:;">消息通知</a></li></ul> </div></div><!-- 导航条--><div class="header-wrapper"><div class="header w clearfix"><h1 class="logo" title="小米">小米官网<a class="home" href="/"></a><a class="mi" href="/"></a></h1><!-- 中间导航条 --><div class="nav-wrapper"><!-- 创建导航条 --><ul class="nav clearfix"><li class="all-goods-wrapper"><a class="all-goods" href="#">全部商品分类</a><!-- 创建左侧导航菜单 --><ul class="left-menu"><li><a href="#">手机 电话卡<i class="fas fa-angle-right"></i></a></li><li><a href="#">电视 盒子<i class="fas fa-angle-right"></i></a></li><li><a href="#">笔记本 平板<i class="fas fa-angle-right"></i></a></li><li><a href="#">家电 插线板<i class="fas fa-angle-right"></i></a></li><li><a href="#">出行 穿戴<i class="fas fa-angle-right"></i></a></li><li><a href="#">智能 路由器<i class="fas fa-angle-right"></i></a></li><li><a href="#">电源 配件<i class="fas fa-angle-right"></i></a></li><li><a href="#">健康 儿童<i class="fas fa-angle-right"></i></a></li><li><a href="#">耳机 音箱<i class="fas fa-angle-right"></i></a></li><li><a href="#">生活 箱包<i class="fas fa-angle-right"></i></a></li></ul></nav></li><li class="show-goods"><a href="#">小米手机</a></li><li class="show-goods"><a href="#">Redmi 红米</a></li><li class="show-goods"><a href="#">电视</a></li><li class="show-goods"><a href="#">笔记本</a></li><li class="show-goods"><a href="#">家电</a></li><li class="show-goods"><a href="#">路由器</a></li><li class="show-goods"><a href="#">智能硬件</a></li><li><a href="#">服务</a></li><li><a href="#">社区</a></li><!-- 创建一个层 --><div class="goods-info"></div></ul></div><div class="search-wrapper"><form class="search" action="#"><input class="search-inp" type="text"/><button class="search-btn"><i class="fas fa-search"></i></button></form></div></div></div><!-- 创建banner容器 --><div class="banner-wrapper"><div class="banner w"><ul class="img-list"><li><a href="#"><img src="./img/banner1.jpg" alt=""></a></li><li><a href="#"><img src="./img/banner2.jpg" alt=""></a></li><li><a href="#"><img src="./img/banner3.jpg" alt=""></a></li><li><a href="#"><img src="./img/banner4.jpg" alt=""></a></li><li><a href="#"><img src="./img/banner5.jpg" alt=""></a></li></ul><div class="pointer"><a class="active" href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div><div class="pre-next"><a class="prev" href="javascript:;"></a><a class="next" href="javascript:;"></a></div></div></div></body>
</html>

最后是效果图

希望对你们有帮助

前端学习之仿小米官网HTML+CSS相关推荐

Web前端仿小米官网实战总结
Web前端仿小米官网实战总结自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...
仿小米官网源码，2021年9月最新版
部分源码: <div class="header"><div class="page-top"><div class=" ...
html制作小米官网代码,仿小米官网(html+js+css)
[实例简介] 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码 [实例截图] [核心代码] 小米官网(高仿) └── xiaomi ├── css_1 │ ├── financ ...
电商项目：仿小米官网纯HTML+css布局
前言时间过得很快,已经步入大三下学期了,浪了大学这几年,这几个星期从新把之前学的html+css系统性复习了一遍,虽然之前也学习过,但Monto觉得无论任何事情,基础是最重要的,任何框架千变万变,但 ...
仿小米官网登录功能的实现
效果图如下: 首先我们需要搭建好页面布局 html的代码如下: <div class="contentrightbottom"><div class=&quo ...
仿小米官网php源码,精仿小米官网商城整站完美运营版源码Laravel内核
源码预览源码介绍运行环境:WIN-LINUX+APACHE2.4+PHP7.0+MYSQL5.5+伪静态服务器要求: 本系统Laravel框架对PHP版本和扩展有一定要求,有必要了解下这些以便确 ...
仿Apple官网首页 HTML+CSS+JS
WEB前端开发实践仿Apple官网首页 HTML+CSS+JS 一.前言静态页面,没有后端数据,只是单一的HTML 自写的APPLE.小米源码,严禁盗用二.图片资源这里用了一些iconfont ...
小米官网（部分内容）
今天是小米官网部分内容的制作 <link rel="stylesheet" href="css/小米官网1.css"><link rel=&q ...
前端实战：仿写小米官网第一天
前端实战的第一天小米官网目前效果: 实现功能: 导航栏,首页切换,无淡入淡出效果的轮播图,搜索功能,产品展示栏下滑代码(便于记录,将js.css和html糅合在了一起): <!DOCTYP ...

前端学习之仿小米官网HTML+CSS

前端学习之仿小米官网HTML+CSS相关推荐

最新文章

热门文章