用html+css实现小米官网（详细代码）

2023-10-24 03:35:28

导语

包含完整代码，如有错误欢迎改正。

观察小米官网的布局，首先他有两行导航栏，第一行导航栏相对简单，但是注意下载APP处有一个下拉设计，第二栏在logo和导航栏空白处是有一个下拉列表的，直接覆盖在轮播图上，然后轮播图下简单来看就是四个小盒子其中三个样式相同，然后就是区域展示，样式基本雷同，只需写好一个。图片资源可去小米官网右键下载。

实现效果：

头部

头部的话分为左右两部分，左边注意一下下载APP

HTML部分
小米官网|小米商城|MIUI|loT|云服务|天星数科|有品|小爱开放平台|企业团购|资质证照|协议规则|下载app|SelectLocation购物车 购物车中还没有商品，赶紧选购吧！登录|注册|消息通知
CSS部分
.head{padding: 0;margin: 0;font-size: 12px;width: 100%;
}
.head1{margin: 0;padding: 0;font: 12px;background: #333333;height: 40px;color: #B0B0B0;
}
.top{width: 1226px;margin: 0 auto;padding: 0;
} 
.top-left a:hover{color: #ffffff;
}
.top-left{float: left;height: 40px;font-size: 12px;margin-left: auto;margin-right: auto;
}
.top-left a{text-decoration: none;color: #B0B0B0;line-height: 40px;font-size: 12px;display: inline-block;
}
.head1 span{width: 3.23px;height: 16px;font-size: 12px;color: #424242;margin: 0 3.6px;
}.top-left .links span{top: 40px;margin-left: -20px;position:absolute;display: block;background: #ffffff;box-shadow: 0 1px 5px #aaa;height: 0px; color: #333333;z-index: 33;
}
.links .appcode img{height: 0;display: block;position: relative;
}
.links:hover > span{height: 90px;transition:height 1s;
}.links:hover > span img{height: 90px;transition:height 1s;} 
.top-right{float: right;height: 40px;
}
.top-right a{text-decoration: none;color: #B0B0B0;line-height: 40px;font-size: 0.8px;
}
.car{position: relative;margin-left: 10px;display: block;float: right;height: 40px;line-height: 40px;width: 120px;background-color: #424242}
.car .car-son{text-decoration: none;margin: 35px 0 0 40px ;color:#B0B0B0;font-size: 1px;
}
.car-nav{position: absolute;background: #ffffff;box-shadow: 0 1px 5px #aaa;top: 40px;width: 295px;height: 0px;overflow: hidden;transition: height 1s;right: 0;text-align: center;z-index: 33;line-height: 100px;
}.car:hover > .car-nav{height: 100px;
}

导航栏

分为三部分，logo，菜单栏，搜索框

第二大部分

首先是轮播图，轮播图左边还有菜单栏，滑动门样式（这个我写在了导航栏logo和菜单栏空白处作为它的下拉菜单）然后是下方的四个小盒子

第三大部分

广告处，只需一个图片。注意好它与上边下边的距离

第四大部分

一个大盒子分为上下，下边的盒子又分为左右两部分。样式基本一样

第五部分

网页底部。

HTML代码


小米商城小米官网|小米商城|MIUI|loT|云服务|天星数科|有品|小爱开放平台|企业团购|资质证照|协议规则|下载app|SelectLocation购物车 购物车中还没有商品，赶紧选购吧！登录|注册|消息通知

CSS部分

@font-face {font-family: 'iconfont';  /* Project id 4190027 */src: url('//at.alicdn.com/t/c/font_4190027_w2mmtq1bzx.woff2?t=1690770670890') format('woff2'),url('//at.alicdn.com/t/c/font_4190027_w2mmtq1bzx.woff?t=1690770670890') format('woff'),url('//at.alicdn.com/t/c/font_4190027_w2mmtq1bzx.ttf?t=1690770670890') format('truetype');}
body{padding: 0;margin: 0;min-width: 1226px;
}
li{list-style: none;
}
a{text-decoration: none;
}
.head{padding: 0;margin: 0;font-size: 12px;width: 100%;
}
.head1{margin: 0;padding: 0;font: 12px;background: #333333;height: 40px;color: #B0B0B0;
}
.top{width: 1226px;margin: 0 auto;padding: 0;
} 
.top-left a:hover{color: #ffffff;
}
.top-left{float: left;height: 40px;font-size: 12px;margin-left: auto;margin-right: auto;
}
.top-left a{text-decoration: none;color: #B0B0B0;line-height: 40px;font-size: 12px;display: inline-block;
}
.head1 span{width: 3.23px;height: 16px;font-size: 12px;color: #424242;margin: 0 3.6px;
}.top-left .links span{top: 40px;margin-left: -20px;position:absolute;display: block;background: #ffffff;box-shadow: 0 1px 5px #aaa;height: 0px; color: #333333;z-index: 33;
}
.links .appcode img{height: 0;display: block;position: relative;
}
.links:hover > span{height: 90px;transition:height 1s;
}.links:hover > span img{height: 90px;transition:height 1s;} 
.top-right{float: right;height: 40px;
}
.top-right a{text-decoration: none;color: #B0B0B0;line-height: 40px;font-size: 0.8px;
}
.car{position: relative;margin-left: 10px;display: block;float: right;height: 40px;line-height: 40px;width: 120px;background-color: #424242}
.car .car-son{text-decoration: none;margin: 35px 0 0 40px ;color:#B0B0B0;font-size: 1px;
}
.car-nav{position: absolute;background: #ffffff;box-shadow: 0 1px 5px #aaa;top: 40px;width: 295px;height: 0px;overflow: hidden;transition: height 1s;right: 0;text-align: center;z-index: 33;line-height: 100px;
}.car:hover > .car-nav{height: 100px;
}
.head2{height: 100px;position: relative;
}
.head2 .logo{float: left;width: 62px;height: 56px;margin-top: 22px;
}
.logo-son {width: 56px;height: 56px;display: block;background: url(logo.png) no-repeat;background-size: 56px;
}
.head2-nav{float: left;width: 850px;height: 100px;
}
.head2-nav .nav{width: 1100px;height: 88px;margin: 0;padding: 12px 0 0 30px;list-style-type: none;font-size: 16px;
}
.nav-category .ddd{float: left;width: 127px;height: 88px;padding-right: 15px;
}
.nav .nav-item a{
color: #333333;float: left;height: 24px;text-decoration: none;padding: 26px 10px 38px;
}
.nav-item:hover > a{color: #ff6700;
}
.nav-item .nav-list{display: none;width: 100%;height: 229px;color: #333333;font-size: 12px;text-align: center;left: 0;border-top: 1px solid #e0e0e0;background: #ffffff;box-shadow: 0 3px 4px rgba(0,0,0,.18);position: absolute;top: 100px;z-index: 33;
}
.nav-list .tops{margin: 0 auto;
}
.nav-item .nav-list p{color: #ff6700;margin: 0;height: 20px;
}
.nav-lists .title{padding-top:20px;
}
.nav-item a:hover >div{display: block;
}
.nav-lists{position: relative;margin-left: 10px;margin-right: 10px;top: 30px;display: inline-block;
}
.nav-list .top{margin-left: 165px;
}
.nav-list span{display: inline-block;position: relative;top: -35px;height: 90px;border-left:1px solid #b0b0b0b0;
}
.category-list{position: absolute;background: rgba(64, 63, 63, 0.6);top: 100px;height: 460px;margin-left: -92px;width: 234px;z-index: 32;
}
.category-list .category-nav{display:block;width: 234px;height: 420px;padding: 0;margin: 20px 0;
}
.category-list .ccc{display: block;color: #ffffff;text-decoration: none;height: 42px;padding-left: 30px;line-height: 42px;font-size: 14px;float: left;width: 204px;
}
.category-navs{width: 234px;height: 42px;
}
.category-nav a:hover{background: #ff6700;
}
.nav-left{display: none;position: absolute;height: 458px;top: 0px;left: 234px;z-index: 33; border: 1px solid #e0e0e0;box-shadow: 0 8px 16px rgba(0,0,0,.18);border-left: 0;background: #fff;
}
.ccc .list1{width: 248px;
}
.ccc .list2{width: 496px;
}
.ccc .list3{width: 744px;
}
.ccc .list4{width: 992px;
}
.category-navs a:hover > div{display: block;
}
.left-list{width: 248px;float: left;height: 456px;padding:2px 0;margin: 0;color: black;background: #fff;
}
.left-list2{width: 248px;float: left;height: 456px;padding: 2px 0;margin: 0;color: black;background: #fff;z-index: 33;
}
.left-list3{width: 248px;left: 512px;top: -460px;float: left;height: 456px;padding: 2px 0;margin: 0;color: black;background: #fff;
}
.left-list4{width: 248px;left: 765px;top: -460px;float: left;height: 456px;padding: 2px 0;margin: 0;color: black;background: #fff;
}
.left-lists{position: relative;float: left;width: 225px;height: 40px;padding: 18px 20px;
}.left-lists img{float: left;line-height: 76px;padding: 0 12px 0px 0px;
}
.left-lists .title{width: 172px;line-height: 40px;float: left;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}
.left-lists:hover .title{color: #ff6700;
}
.search{position: relative;width:296px;float: right;margin-top: 25px;
}
.search-f{position: relative;display: inline-block;height: 50px;width: 296px;
}
.search input{width: 244px;height: 50px;font-size: 24px;line-height: 24px;background: #fff;color: #616161;padding: 0;border: 1px solid #e0e0e0;outline: none;font-size: 13px;padding: 0 10px;
}
.search .search-btn{position: absolute;right:0;top: 0;z-index: 3;width: 50px;height: 50px;font-size: 24px;line-height: 24px;background: #fff;color: #616161;padding: 0;border-left: 1px solid #ff6700;
}
.iconfont .icon-sousuo{position: absolute;top: 17px;left: 257px;z-index: 32;
}
.icon-sousuo{font-size: 140%;color: #616161;
}
.search-f a:hover > input{background: #ff6700;
}
.text-list{display: none;position: absolute;width: 244px;background: #fff;border: #ff6700 1px solid;border-top:none ;z-index: 32;
}
.search-f label:hover > input{border: #ff6700 1px solid;
}
.search-f label:hover > div{display: block;
}
.sss{padding: 0;margin: 0;
}
.sss .fff{position: relative;color: black;display: block;height: 25px;width: 244px;padding:4px 0;
}
.sss .fff span{margin-left: 10px;color: #757575;font-size: 15px;
}
li:hover .fff{background: #e0e0e0;
}
.slidec{width: 1226px;height: 460px;overflow: hidden;
}
.slidec .slidew{display: flex;width: 7356px;height: 460px;animation: run 20s linear infinite;
}
@keyframes run{0%,10%{transform: translateX(0);}20%,30%{transform: translateX(-1226px);}40%,50%{transform: translateX(-2452px);}60%,70%{transform: translateX(-3678px);}80%,90%{transform: translateX(-4904px);}100%{transform: translateX(-6130px);}}
.box{margin-top: 14px;background: #fff;height: 196px;
}
.box1{float: left;min-width: 234px;height: 170px;}
.box1 .box1-son{margin: 0;padding: 3px;width: 242px;height: 170px;margin: 0;
}
.box1-son .box1-ss{position: relative;background:#5f5750;float: left;height: 82px;color: #fff;font-size: 12px;text-align: center;border: 1px solid #333;
}
.box1-sss{display: block;padding: 18px 0 0;width: 75px;font-size: 12px;opacity: .7;
}
.box1-ss a:hover{opacity: 1;
}
.box2{position: relative;left: 14px;height: 170px;float: left;width:978px;background: #fff;
}
.box2-son{padding: 0;height: 170px;margin: 0;
}
.box2-ss{float: left;width: 316px;background: #e0e0e0;height: 170px;margin-left: 14px;transition: box-shadow .2s linear;
}.box2-ss a{height: 170px;width: 316px;
}
.box2-son .first{margin: 0;
}
.box2-son li:hover{background: 120%;box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.ddd{font-size: 25px;color: #fff;
}
.seventy{background: #f5f5f5;padding-top: 4px;padding-bottom: 12px;
}
.adver{height: 120px;margin: 22px 0;overflow: hidden;background: #f5f5f5;
}
.span1-head{position: relative;height: 58px;}
.span1-head h2{font-size: 22px;font-weight: 200;line-height: 58px;margin: 0;
}
.more{display: block;position: absolute;right: 0px;top: 0px;line-height: 58px;
}
.more .more-l{position: relative;float: left;font-size: 16px;width: 92px;height: 58px;transition: color .5s linear;
}
.jiantou{right: 0px;top: 0px;/* padding: 4px; */position:absolute;margin: 0 0 0 8px;color: #B0B0B0;font-size: 20px;transition: color .5s linear;
}
.more a:hover{color: #ff6700;
}
.more a:hover > div{color: #ff6700;
}
.span1-f{width: 1226px;height: 628px;
}
.span1-left{float: left;width: 234px;height: 614px;padding: 0;margin: 0;
}
.span1-right{float: left;width: 978px;height: 614px;margin-left: 14px;
}
.span-a{display: block;text-align: center;text-decoration: none;color: black;font-size: 14px;transition: all .2s linear
}
.iii{height: 614px;
}
.span1-item .items{padding: 22px 0;    
}
.span1-f .span-a:hover{box-shadow: 0 15px 30px rgba(0,0,0,.1);transform: translate3d(0,-2px,0)
}
.span1-ul{height: 614px;margin: 0 0 -14px -14px;padding: 0;
}
.span1-item{float: left;height: 300px;width: 234px;padding: 0;background: #fff;margin-left: 14px;margin-bottom: 14px;list-style: none;
}
.span-title{margin: 31.34px 0 0;text-overflow: ellipsis;font-weight: 350;font-size: 14px;
}
.span1-item .advan{color: #b0b0b0;font-size: 12px;margin: 0;padding: 0 10px 10px;}
.price{color: #ff6700;
}
.del{color: #B0B0B0;
}
.more2{height: 42px;float: right;
}
.choice1{line-height: 42px;margin: 0 0 0 30px;float: left;font-size: 16px;color: #ff6700;border-bottom: 2px solid #ff6700;list-style: none;
}
.choice2{line-height: 42px;margin: 0 0 0 30px;float: left;font-size: 16px;color: #424242;list-style: none;
}.block{height: 143px;text-align: left;
}
.title1{width: 94px;height: 63px;float: left;margin:10px 0px 5px 30px;word-wrap: break-word;font-weight: 300;text-align: left;
}
.price-1{margin: -20px 110px 5px -20px;display: block;
}
.title2{margin: 35px 10px 0px 30px;
}
.icon-youjiantou{margin: 30px 0 21px 0;font-size: 50px;color: #ff6700;
}
.item-left{margin-left: -14px;
}
.left-1{height: 300px;margin-bottom: 14px;
}
.pic-box{margin: 22px 0;height: 120px;overflow: hidden;
}
.foot{height: 472.17px;text-align: center
}
.slt{padding: 27px 0;border-bottom: 1px solid #e0e0e0;font-size: 16px;
}
.cfoot{display: inline-block;height: 25px;width: 19%;color:#616161;font-size: 16px;transition: color .2s linear;
}
.qqq{display: inline-block;font-size: 19px;
}
.gun{color: #e0e0e0;
}
.cfoot:hover{color: #ff6700;
}
.link-title{width: 160px;margin: -1px 0 26px;line-height: 1.25;color: #424242;
}
.alink{height: 392.5px;padding: 40px 0;
}
.links-h{width: 160px; float: left;text-align: left;
}
.links-h dd{width: 160px;margin:10px 0 0;height: 18px;line-height: 18px;  
}
.links-h a{color: #757575;
}
.links-h a:hover{color: #ff6700;
}
.link-right{float: right;width: 251.67px;
}
.link-right h2{text-align: center;color: #ff6700;font-size: 20px;font-weight: 350;margin:0 0 5px;
}
.link-right p{margin:  0 0 5px;color: #616161;
}
.foot dd{font-size: 10px;padding: 0;
}
.alink span{position: absolute;display: inline-block;height: 80px;border: 1px solid #e0e0e0;left: 1190px;
}
.bot{margin: 0 auto;width: 119.33px;height: 29.33px;border: 1px solid #ff6700;line-height: 29.33px;color: #ff6700;transition: all .2s linear ;
}
.alink a:hover > div{background: #ff6700;color: #fff;
}
.last{padding: 30px 0;/* height: 265.33px; */font-size: 12px;background: #fafafa;
}
.logo2{width: 56px;height: 56px;float: left;background: url(logo.png) no-repeat;background-size: 100%;margin-right: 20px;
}
.last p{margin: 0;
}
.last .link{color: #616161;
}
.last a:hover{color: #ff6700;
}
.feet{margin-left: 75px;color: #b0b0b0;
}
.last .fot{color: #b0b0b0;
}
.pic4{padding: 10px 0;margin-left: 75px;
}
.xm{margin: 30px auto 0;width: 100%;height: 19px;background: url(last.png) no-repeat center;
}
.right{position: fixed;right: 0;bottom: 70px;width: 82px;/* height: px; */background: #ff6700;z-index: 99;
}
.rights{width: 82px;height: 90px;background: #fff;border: 1px solid #f5f5f5;text-align: center;color: #757575;}
.ppp{display: block;width: 80px;font-size: 30px;color: #757575;margin-top: 30px;margin-bottom: 10px;transition: color .2s linear;margin-left: auto;margin-right: auto;
}
.right-a{display: block;width: 82px;height: 90px;
}
.right-1{position: relative;
}
.right-list{position: absolute;background: #fff;width: 120px;top: 0px;left:-120px;  display: none; 
}
.right-a p{color: #757575;
}
.right-a span{color: #757575;transition: color .2s linear;font-size: 10px;
}
.right-a:hover span{color: #ff6700;
}
.right-a:hover .ppp{color: #ff6700;
}
.right1-a:hover .right-list{display: block;
}
.right-list img{display: block;width: 100px;height: 100px;margin: 6px auto;
}

iconfont部分

@font-face {font-family: "iconfont"; /* Project id 4190027 */src: url('//at.alicdn.com/t/c/font_4190027_9c4fo2zlggb.woff2?t=1691195419474') format('woff2'),url('//at.alicdn.com/t/c/font_4190027_9c4fo2zlggb.woff?t=1691195419474') format('woff'),url('//at.alicdn.com/t/c/font_4190027_9c4fo2zlggb.ttf?t=1691195419474') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-jiantouyou:before {content: "\e62d";
}.icon-youjiantou:before {content: "\e627";
}.icon-jinrujiantouxiao:before {content: "\e8b9";
}.icon-gouwuche:before {content: "\e63f";
}.icon-gerenzhongxin:before {content: "\e614";
}.icon-shouji:before {content: "\e631";
}.icon-huiyuanqia:before {content: "\e886";
}.icon-xianshangchongzhi:before {content: "\e64c";
}.icon-kejiqiye:before {content: "\e73f";
}.icon-caigoucaigouhuanhuodan:before {content: "\e61c";
}.icon-ziyuan1568:before {content: "\e616";
}.icon-service:before {content: "\e67e";
}.icon-time:before {content: "\e601";
}.icon-liwu:before {content: "\e600";
}.icon-15tianbaohuan:before {content: "\e66d";
}.icon-7:before {content: "\e67d";
}.icon-weizhi:before {content: "\e8ff";
}.icon-xiuliweihu:before {content: "\e615";
}.icon-sousuo:before {content: "\eafe";
}


本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！

相关文章

Duilib中list控件支持ctrl和shif多行选中的实现

[ICML2015]Batch Normalization:Accelerating Deep Network Training by Reducing Internal Covariate Shif

win10系统 微软输入法 于eclipse ctrl+shif+f冲突间接处理办法

Codeforces Round #259 (Div. 2) B. Little Pony and Sort by Shif

读LDD3，内存映射与DMA--PAGE_SHIF…

VMware虚拟机安装XP【要先分区，再设置BOOT 启动CD，shif+上移】

更换iBus五笔的左与右Shif

sublime ctrl+shif+f 没用解决办法

idea 对 ctrl + z 的撤销 是 ctrl + shif + z

计算机最早的设计师应用于,计算机应用基础选择题doc.doc

win10自带截图神器：Win+Shift+S

Python基础之文件目录操作

python简述目录_Python基础之文件目录操作(示例代码)

tp5 如何做数据采集

任务2-7(服务器字体+阿里巴巴矢量库)

html标签（1)：h1~h6,p,br,pre,hr

TI 电量计介绍与芯片选型指南

几款TI电源芯片简介

TI DSP芯片C2000系列读取FLASH数据

德州仪器(Ti)平台嵌入式开发基础

TI三相电机智能栅极驱动芯片特点分类

省选模拟（12.08） T3 圈圈圈圈圈圈圈圈

Hadoop生态圈技术栈（上）

大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之6.Impala交互式查询

小猿圈之Linux下Mysql 操作命令

大数据Hadoop生态圈常用面试题

大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之4.Hive DDL、DQL和数据操作

备战Noip2018模拟赛11（B组）T3 Monogatari 物语

【智能优化算法-圆圈搜索算法】基于圆圈搜索算法Circle Search Algorithm求解单目标优化问题附matlab代码

NYOJ 78 圈水池

递归问题 跑道 汽车 绕圈问题 Python实现

Hadoop生态圈（三）：MapReduce

立即
投稿

微信公众账号

微信扫一扫加关注

 返回
顶部