文章目录

小米官网
- 小米官网的效果图
- 小米官网的HTML代码
- 小米官网的CSS代码——banner
- 小米官网的CSS代码——banner2
- 小米官网的CSS代码——common
- 小米官网的CSS代码——fonter
- 小米官网的CSS代码——header
- 小米官网的CSS代码——main
- 小米官网的CSS代码——rm
- 小米官网的CSS代码——topnav

小米官网

小米官网是学习前端实战项目锻炼最多的一个项目，基本上就是学习完HTML和CSS之后就可以开始锻炼自己实战的能力，学习如何搭建自己一个完整的页面实战，对之后的学习打下很好的基础，在这个博客的代码中，我只是涉及到相关的HTML和CSS，图片路径可以自己改并且找一些相关的图片，或者下载我主页的资源。

小米官网的效果图

在这里插入图片描述

小米官网的HTML代码

Document 购物车（0）购物车中还没有商品，赶紧选购吧！

小米商城

小米手机红米手机电视笔记本平板家电路由器服务社区++++ 【Web前端HTML+CSS基础——小米官网项目实战】

Redmi Note 11 5G 1199元起【Web前端HTML+CSS基础——小米官网项目实战】

Redmi Note 11 5G 1199元起全部商品手机耳机小米平板5 Pro 加湿器笔记本

手机 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列 Note 11 Pro 系列
电视 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款 Redmi 智能电视X65 2022款
笔记本平板小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版小米笔记本 Pro 14 锐龙版
家电冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱冰箱
出行穿戴 Redmi 手表 2 Redmi 手表 2 Redmi 手表 2 Redmi 手表 2 Redmi 手表 2 Redmi 手表 2 Redmi 手表 2 Redmi 手表 2 Redmi 手表 2 Redmi 手表 2 Redmi 手表 2 Redmi 手表 2 Redmi 手表 2 Redmi 手表 2
智能路由器 CyberDog CyberDog CyberDog CyberDog CyberDog CyberDog CyberDog CyberDog CyberDog CyberDog CyberDog CyberDog CyberDog CyberDog
电源配件移动电源移动电源移动电源移动电源移动电源移动电源移动电源移动电源移动电源移动电源移动电源
健康儿童米家跑步机米家跑步机米家跑步机米家跑步机米家跑步机米家跑步机米家跑步机米家跑步机米家跑步机米家跑步机米家跑步机米家跑步机米家跑步机米家跑步机米家跑步机米家跑步机
耳机音箱 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版 Redmi Buds 3 青春版
生活箱包小背包小背包小背包小背包小背包小背包小背包小背包小背包小背包小背包小背包小背包小背包

保障服务企业团购 F码通道米粉卡以旧换新话费充值【Web前端HTML+CSS基础——小米官网项目实战】

手机

黑鲨4S Pro

磁动力升降肩键

4799元起

黑鲨4S Pro

磁动力升降肩键

4799元起

黑鲨4S Pro

磁动力升降肩键

4799元起

黑鲨4S Pro

磁动力升降肩键

4799元起

黑鲨4S Pro

磁动力升降肩键

4799元起

黑鲨4S Pro

磁动力升降肩键

4799元起

黑鲨4S Pro

磁动力升降肩键

4799元起

黑鲨4S Pro

磁动力升降肩键

4799元起

预约维修服务 7天无理由退货 15天免费换货满69包邮 520余家售后网点

帮助中心

账号管理购物指南订单操作

服务支持

售后政策自助服务相关下载

线下门店

小米之家服务网点授权体验店/专区

关于小米

了解小米加入小米投资者关系企业社会责任廉洁举报

关注我们

新浪微博官方微信联系我们公益基金会

特色服务

F 码通道礼物码防伪查询人工客服手机APP 【Web前端HTML+CSS基础——小米官网项目实战】

扫码领取新
人百元礼包

个人中心售后服务人工客服购物车回到顶部

小米官网的CSS代码——banner

.banner {
    height: 460px;
    position: relative;
  }
  
  .banner-cover img {
    width: 1226px;
    height: 460px;
  }
  .banner-pointer {
    /* 箭头的统一样式 */
    position: absolute;
    width: 40px;
    height: 70px;
    color: #b8c3cb;
    text-align: center;
    line-height: 70px;
    cursor: pointer;
    top: 50%;
    margin-top: -35px;
  }
  .banner-pointer:hover {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
  }
  .banner-pointer .iconfont {
    font-size: 30px;
  }
  
  .banner-pointer-left {
    left: 234px;
  }
  
  .banner-pointer-right {
    right: 0;
  }
  
  .banner-dots {
    position: absolute;
    right: 30px;
    bottom: 30px;
  }
  .banner-dots span {
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin: 0 4px;
    cursor: pointer;
  }
  .banner-dots span.banner-dots-selected {
    border-color: rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.3);
  }
  
  /* 横幅-菜单 */
  .banner-menu {
    width: 234px;
    height: 100%;
    background: rgba(105, 101, 101, 0.6);
    position: absolute;
    left: 0;
    top: 0;
    padding: 20px 0;
  }
  .banner-menu-item {
    color: #fff;
    padding: 0 20px 0 30px;
    height: 42px;
    /* outline: 1px solid; */
    line-height: 42px;
    cursor: pointer;
  }
  .banner-menu li:hover .banner-menu-item {
    background: #ff6700;
  }
  .banner-menu li:hover .banner-sub-menu {
    display: block;
  }
  
  /* 子菜单 */
  .banner-sub-menu {
    position: absolute;
    top: 0;
    left: 234px;
    width: 992px;
    height: 100%;
    background: #fff;
    /* outline: 1px solid; */
    border: 1px solid #eee;
    display: none;
  }
  .banner-sub-menu a {
    width: 25%;
    height: 16.666%;
    padding: 0 20px;
  }
  .banner-sub-menu img {
    width: 40px;
    height: 40px;
    margin-top: 17px;
    margin-right: 12px;
  }
  .banner-sub-menu span {
    width: 154px;
    margin-top: 28px;
  
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

小米官网的CSS代码——banner2

.banner2 {
    margin-top: 14px;
    margin-bottom: 26px;
  }
  .banner2-service {
    width: 234px;
    height: 170px;
    /* outline: 1px solid; */
    margin-right: 14px;
  }
  .banner2-item {
    width: 316px;
    height: 170px;
    /* outline: 1px solid; */
    margin-right: 15px;
  }
  .banner2-item img {
    width: 100%;
    height: 100%;
  }
  .banner2-item:last-child {
    margin-right: 0;
  }
  
  .banner2-service {
    background: #5f5750;
    padding: 3px;
    font-size: 12px;
    color: #ccc;
  }
  .banner2-service a:hover {
    color: #fff;
  }
  .banner2-service .iconfont {
    font-size: 26px;
    display: block;
  }
  .banner2-service a {
    width: 76px;
    height: 82px;
    text-align: center;
    padding-top: 10px;
    position: relative;
  }
  .banner2-service a::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 70px;
    background: #665e57;
    left: 0;
    top: 6px;
  }
  .banner2-service a::after {
    content: '';
    position: absolute;
    width: 64px;
    height: 1px;
    background: #665e57;
    left: 6px;
    bottom: 0;
  }
  .banner2-service a:nth-child(3n + 1)::before {
    content: none;
  }
  .banner2-service a:nth-child(n + 4)::after {
    content: none;
  }

小米官网的CSS代码——common


/* 通用的css代码 */
* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
  }
  *::before,
  *::after {
    box-sizing: border-box;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  a:hover {
    color: #ff6700;
  }
  html {
    color: #333;
    min-width: 1226px;
    font: 14px/1.5 'Helvetica Neue', Helvetica, Arial, 'Microsoft Yahei',
      'Hiragino Sans GB', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif;
  }
  
  /* 浮动处理 */
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  .clearfix::after {
    content: '';
    display: block;
    clear: both;
  }
  
  /* 通用容器 */
  .container {
    width: 1226px;
    margin-left: auto;
    margin-right: auto;
  }

小米官网的CSS代码——fonter

/* 页脚-顶部 */

.footer-top {
    padding: 27px 0;
    border-bottom: 1px solid #e0e0e0;
    height: 75px;
    color: #616161;
  }
  .footer-top a {
    /* outline: 1px solid; */
    width: 20%;
    font-size: 16px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    border-right: 1px solid #e0e0e0;
  }
  .footer-top .iconfont {
    font-size: 26px;
    vertical-align: -4px;
  }
  .footer-top a:last-child {
    border-right: none;
  }
  
  /* 页脚-底部 */
  .footer-bottom {
    padding: 40px 0;
  }
  .footer-links {
    width: 160px;
    color: #757575;
  }
  .footer-links h3 {
    font-size: 14px;
    font-weight: normal;
    color: #424242;
    margin-bottom: 17px;
  }
  .footer-links a {
    display: block;
    font-size: 12px;
    margin-top: 10px;
  }
  
  /* 页脚-联系 */
  .footer-contact {
    width: 245px;
    text-align: center;
    border-left: 1px solid #e0e0e0;
    font-size: 12px;
  }
  .footer-phone {
    font-size: 22px;
    color: #ff6700;
  }
  .footer-phone-desc {
    color: #616161;
  }
  .footer-support {
    width: 118px;
    border: 1px solid #ff6700;
    color: #ff6700;
    display: block;
    margin: 6px auto;
    height: 30px;
    line-height: 30px;
  }
  .footer-support .iconfont {
    vertical-align: -1px;
    font-size: 14px;
  }
  .footer-support:hover {
    background: #ff6700;
    color: #fff;
  }
  .footer-subcribe {
    color: #616161;
  }
  .footer-subcribe .iconfont {
    font-size: 20px;
    vertical-align: middle;
    cursor: pointer;
  }
  .footer-subcribe .iconfont:hover {
    color: #ff6700;
  }

小米官网的CSS代码——header

.header {
    height: 100px;
    /* background: lightblue; */
    position: relative;
  }
  
  .header-logo h1 {
    display: none;
  }
  .header-logo {
    background: url('../img/logo.png');
    width: 56px;
    height: 56px;
    background-size: 100% 100%;
    margin-top: 22px;
    margin-right: 172px;
  }
  
  .header-menu > a {
    height: 100px;
    line-height: 100px;
    padding: 0 10px;
    font-size: 16px;
  }
  
  .header-submenu {
    position: absolute;
    display: none;
    z-index: 30;
    background: #fff;
    /* background: red; */
    left: 0;
    width: 100%;
    top: 100px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 30px 0;
  }
  .header-cover img {
    width: 160px;
    height: 110px;
  }
  
  .header-submenu a {
    width: 204px;
    text-align: center;
    font-size: 12px;
  }
  
  .header-cover {
    /* background: red; */
    border-right: 1px solid #eee;
  }
  
  .header-submenu a:last-child .header-cover {
    border-right: none;
  }
  .header-name {
    margin-top: 10px;
    color: #333;
  }
  .header-price {
    color: #ff6700;
  }
  .header-menu:hover .header-submenu {
    display: block;
  }
  .header-search {
    margin-top: 25px;
    position: relative;
  }
  .header-search input {
    width: 245px;
    height: 50px;
    font-size: 16px;
    padding: 0 15px;
    outline: none;
    border: 1px solid #ccc;
  }
  .header-searchicon {
    width: 55px;
    height: 50px;
    background: #fff;
    border: 1px solid #ccc;
    border-left: none;
    cursor: pointer;
    color: #777;
  }
  .header-searchicon .iconfont {
    font-size: 20px;
  }
  .header-suggest {
    position: absolute;
    left: 0;
    top: 50px;
    width: 245px;
    border: 1px solid #ff6700;
    border-top: none;
    z-index: 40;
    background: #fff;
    display: none;
  }
  .header-suggest a {
    display: block;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
  }
  .header-suggest a:hover {
    background: #eee;
    color: inherit;
  }
  
  .header-search input:hover {
    border-color: #aaa;
  }
  .header-search input:hover ~ .header-searchicon {
    border-color: #aaa;
  }
  .header-search input:focus ~ .header-suggest {
    display: block;
  }
  .header-search input:focus {
    border-color: #ff6700;
  }
  .header-search input:focus ~ .header-searchicon {
    border-color: #ff6700;
  }
  .header-searchicon:hover {
    background: #ff6700;
    border-color: #ff6700;
    color: #fff;
  }

小米官网的CSS代码——main

.main {
    background: #f5f5f5;
    padding: 22px 0;
  }
  
  /* banner3 */
  .banner3 {
    display: block;
    background: red;
  }
  .banner3 img {
    width: 100%;
    display: block;
  }
  
  /* 橱窗 */
  .sc {
    margin-top: 10px;
  }
  .sc-top {
    height: 58px;
    line-height: 58px;
  }
  .sc-title {
    font-size: 22px;
    font-weight: normal;
  }
  .sc-more .iconfont {
    background: #aaa;
    width: 20px;
    height: 20px;
    display: inline-block;
    line-height: 20px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    /* vertical-align: -2px; */
  }
  .sc-more:hover .iconfont {
    background: #ff6700;
  }
  
  .sc-item-first {
    width: 234px;
    height: 614px;
    margin-right: 14px;
  }
  .sc-item-first img {
    width: 100%;
    height: 100%;
  }
  .sc-item-list {
    width: 978px;
  }
  .sc-item {
    background: #fff;
    margin-right: 14px;
    margin-bottom: 14px;
    width: 234px;
    height: 300px;
    text-align: center;
  }
  .sc-item img {
    width: 160px;
    height: 160px;
    margin-top: 20px;
  }
  .sc-name {
    margin-top: 20px;
    color: #333;
  }
  .sc-desc {
    font-size: 12px;
    color: #b0b0b0;
    margin-top: 3px;
    margin-bottom: 10px;
  }
  .sc-price {
    color: #ff6700;
  }
  .sc-item:nth-child(4n) {
    margin-right: 0;
  }

小米官网的CSS代码——rm

.rm {
    width: 84px;
    position: fixed;
    right: 0;
    bottom: 70px;
    z-index: 999;
  }
  .rm-item {
    width: 100%;
    height: 92px;
    background: #fff;
    border: 1px solid #f5f5f5;
    border-top: none;
    color: #757575;
    text-align: center;
    display: block;
    padding-top: 14px;
    position: relative;
  }
  .rm-item:first-child,
  .rm-to-top {
    border-top: 1px solid #f5f5f5;
  }
  .rm-to-top {
    margin-top: 18px;
  }
  .rm-item .iconfont {
    display: block;
    font-size: 30px;
  }
  
  /* 弹出层 */
  
  .rm-mention {
    width: 128px;
    padding: 14px;
    position: absolute;
    right: 90px;
    top: 0;
    border: 1px solid #f5f5f5;
    background: #fff;
    display: none;
  }
  .rm-mention img {
    width: 100px;
    height: 100px;
    display: block;
    margin-bottom: 20px;
  }
  .rm-mention p {
    color: #757575;
  }

小米官网的CSS代码——topnav

.topnav {
    background: #333;
    height: 40px;
    color: #b0b0b0;
    font-size: 12px;
  }
  .topnav-menu {
    line-height: 40px;
  }
  .topnav-menu a {
    padding: 0 7px;
    border-right: 1px solid #424242;
  }
  .topnav-menu li:last-child a {
    border-right: none;
  }
  .topnav-menu li:first-child a {
    padding-left: 0;
  }
  .topnav-menu a:hover {
    color: #fff;
  }
  
  .topnav-car {
    background: #424242;
    width: 120px;
    height: 40px;
    margin-left: 13px;
    position: relative;
  }
  .topnav-link {
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    line-height: 40px;
  }
  .topnav-link .iconfont {
    margin-right: 3px;
  }
  .topnav-detail {
    background: #fff;
    width: 320px;
    height: 100px;
    position: absolute;
    right: 0;
    top: 40px;
    border: 1px solid #ccc;
    border-top: none;
    text-align: center;
    line-height: 100px;
    display: none;
    z-index: 50;
  }
  .topnav-car:hover .topnav-detail {
    display: block;
  }
  .topnav-car:hover .topnav-link {
    background: #fff;
    color: #ff6700;
  }

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/d5d660ddfc.html