HTML5+CSS3实现小米官网（完整版）
2024-06-18 01:12:07
前言
小米官网其实是一个结构非常简单的网页，相比与小米商城，难度降低了很多很多。我也写过一次小米商城，可以移步到我的主页。本篇文章简单分析一下小米官网的静态结构，文章末尾附源代码和素材。
一、效果展示
先展示一下页面的效果吧！
二、 代码分析
1. 头部导航栏
头部导航栏可以用 fixed 定位，让导航栏一直固定再最上面，不随着页面移动而移动。
<div class="head1"><img src="../imgs/logo.png" alt=""style="width: 34px;height: 34px;display: inline-block;position: absolute;top: 16px;left: 37px;"><div class="head1_1" style="margin: 0 auto;"><ul style="list-style-type: none;"><li class="head1_1_li" style="margin-left: 80px;"><a href="#" id="dingbu">小米官网</a></li><li class="head1_1_li"><a href="../../小米主页面/html/work.html">小米商城</a></li><li class="head1_1_li"><a href="#">小米影像</a></li><li class="head1_1_li"><a style="width:18px ;" href="#">MIUI</a></li><li class="head1_1_li"><a style="width:36px" href="#" style="margin-left: 0px;">loT</a></li><li class="head1_1_li"><a href="#" style="margin-left: 0px;">云服务</a></li><li class="head1_1_li"><a href="#" style="margin-left: 0px;">天星数科</a></li><li class="head1_1_li"><a href="#">有品</a></li><li class="head1_1_li"><a href="#" style="margin-left: 0px;">小爱开放平台</a></li><li class="head1_1_li"><a href="#">企业团购</a></li><li class="head1_1_li"><a href="#">Location</a></li><li class="head1_1_li" style="width: 90px;"></li><li class="head1_1_li" style="width: 60px;"><a href="#">登录</a></li><li class="head1_1_li" style="width: 10px;"><span class="head1_1_s" style="color: #ffffff;">|</span></li><li class="head1_1_li"><a href="#">注册</a></li></ul></div></div>
2. 中间部分图片
中间部分图片是静态的，很简单，直接用 img标签 插入图片就行，不需要实现过多功能。
<div class="con1"><img src="../imgs/a1.jpg" alt="" style="width: 1518px;height: 666px;"></div><div class="con2"><img src="../imgs/a2.webp" alt="" style="width: 1518px;height: 666px;"></div><div class="con3"><img src="../imgs/a3.jpg" alt="" style="width: 1518px;height: 666px;"></div><div class="con4"><img src="../imgs/a4.webp" alt="" style="width: 1518px;height: 666px;"></div>
3.轮播图部分
中间部分地方用到了轮播图，我用的是 动画 效果实现的，即 先建立一个大盒子，然后将图片都放入这个大盒子，然后改变图片的坐标，让图片逐个显示出来。
<div class="con5"><a href="#" target="_blank"><img src="../imgs/lun1.webp" /></a><a href="#" target="_blank"><img src="../imgs/lun2.webp" /></a><a href="#" target="_blank"><img src="../imgs/lun3.webp" /></a><a href="#" target="_blank"><img src="../imgs/lun4.webp" /></a><a href="#" target="_blank"><img src="../imgs/lun5.webp" /></a></div>.con5 {width: 7600px;height: 666px;animation: text 15s infinite backwards;/*消除图片间隔*/margin-bottom: 10px;}.con5 img {width: 1518px;height: 666px;float: left;}@keyframes text {/*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/0%,15% {margin-left: 0px;}20%,35% {margin-left: -1518px;}40%,55% {margin-left: -3036px;}60%,750% {margin-left: -4554px;}80%,100% {margin-left: -6072px;}}
4. 页面尾部
页面尾部用 ul 列表或者table表格实现就行，或者也可以使用布局来更方便的实现。
<div class="er1_div2"><table class="er1_tab" cellspacing="9px" ;><tr><td>选购指南 </td><td>服务中心 </td><td>线下门店 </td><td>关于小米 </td><td>关注我们 </td></tr><tr><td> </td></tr><tr><td class="er1_td"><a class="er1_td_a">手机</a></td><td class="er1_td"><a class="er1_td_a">申请售后</a> </td><td class="er1_td"><a class="er1_td_a">小米之家</a> </td><td class="er1_td"><a class="er1_td_a">了解小米</a> </td><td class="er1_td"><a class="er1_td_a">新浪微博</a> </td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">电视</a></td><td class="er1_td"><a class="er1_td_a" href="#">售后政策</a></td><td class="er1_td"><a class="er1_td_a" href="#">服务网点</a></td><td class="er1_td"><a class="er1_td_a" href="#">加入小米</a></td><td class="er1_td"><a class="er1_td_a" href="#">官方微信</a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">笔记本</a></td><td class="er1_td"><a class="er1_td_a" href="#">维修服务价格</a></td><td class="er1_td"><a class="er1_td_a" href="#">授权体验店/专区</a></td><td class="er1_td"><a class="er1_td_a" href="#">投资者关系</a></td><td class="er1_td"><a class="er1_td_a" href="#">联系我们</a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">平板</a></td><td class="er1_td"><a class="er1_td_a" href="#">订单查询</a></td><td class="er1_td"><a href="#"></a></td><td class="er1_td"><a class="er1_td_a" href="#">企业社会责任</a></td><td class="er1_td"><a class="er1_td_a" href="#">公益基金会</a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">穿戴</a></td><td class="er1_td"><a class="er1_td_a" href="#">以旧换新</a></td><td class="er1_td"><a href="#"></a></td><td class="er1_td"><a class="er1_td_a" href="#">廉洁举报</a></td><td class="er1_td"><a class="er1_td_a" href="#"></a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">耳机</a></td><td class="er1_td"><a class="er1_td_a" href="#">保障服务</a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">家电</a></td><td class="er1_td"><a class="er1_td_a" href="#">防伪查询</a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">路由器</a></td><td class="er1_td"><a class="er1_td_a" href="#">F码通道</a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">音箱</a></td></tr><tr><td class="er1_td"><a class="er1_td_a" href="#">配件</a></td></tr></table><div class="er1_div3"><p class="er1_div3_p1">400-100-5678</p><p class="er1_div3_p2">8:00-18:00(仅收市话费)</p><a href="#" class="er1_div3_a">人工客服</a></div></div>
三、结语
该网页只用到了html+css。希望这篇文章能够帮助到大家，如果有任何问题都可以在评论区或者私信向我提出。
四、源代码+图片素材
链接：https://pan.baidu.com/s/1uRW6P0_StmU9bPxsM8Gupg?pwd=ojbk
提取码：ojbk
HTML5+CSS3实现小米官网（完整版）相关推荐
- Html5+Css实战前端小米官网左侧导航（思路+详解+素材）
实战后的效果 大家好,我是小叶同学,如今都大二了,跟着学校老师只学到皮毛,不如自己自学,说起来也惭愧,今天实战Html+CSS小米官网左侧导航开发,后面也会一点点对小米官网全部开发,欢迎前来坐坐沙发 ...
- HTML+CSS小米官网首页 (1页侧拉菜单)
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
- 小米官网（部分内容）
今天是小米官网部分内容的制作 <link rel="stylesheet" href="css/小米官网1.css"><link rel=&q ...
- 小米官网静态网页练习记录
本次练习是在完成京东网页的独自完成,来达到提升熟练度的目的. 完成效果图 总结 (1)logo:在logo处不只是放图片,还外加文字通过检索权重 .header-b .logo::before{ co ...
- 仿照小米官网项目具体操作与细节
本项目已上传github 有需要的可以下载 点这里前往下载 小米官网项目具体操作 1.gulp的搭建 一 , 打开node控制台 命令行输入 cd 加文件夹路径 进入当前文件夹 命令行输入 cnpm ...
- jQuery的小米官网-----侧边导航栏
目录 前言 1.原生js和jQuery优势对比 1.1.原生JavaScript优点 1.2.jQuery优点 2.侧边栏代码展示 2.1. 原生js代码 2.2.jQuery代码 总结 前言 时隔多 ...
- 用html+css实现小米官网的模拟
小米官网制作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
- 小米官网是不是用php开发的,小米官网抢手机排队功能，后台语言是什么
我猜这种后台编程语言处理并发量的能力一定很强! 回复内容: 我猜这种后台编程语言处理并发量的能力一定很强! 主要支撑的是Go. 详细参考:http://www.csdn.net/article/201 ...
- Web项目实战分享——小米官网
Web项目实战分享--小米官网 大约每个学习过前端的学习者来说,都接触过web项目的实战,业内最真实的的,应该是自己独立编写一个网页项目,当然如果你是大佬的话,这只是小菜一碟,而如果你是小白或正在学习 ...
最新文章
- 开学综合症有救了！17篇最新AI论文不容错过（附链接）
- javascript的promise
- SQL2K数据库开发二十六之存储过程操作创建存储过程(一)
- tp_link路由器 重新设置
- linux bash gt,linux之bash的基础特性(一)--gt;命令历史(history命令),命令补全,路径补全...
- postgresql 自定义表变量_Oracle GoldenGate新支持开源关系型数据库PostgreSQL
- 巅峰抢购助手pc_豌豆荚、91助手宣布暂停部分服务！第三方应用商店为何式微？...
- 3分钟Tips：正定矩阵与对称矩阵的关系
- 查找算法------顺序查找
- SRS：软件需求规格说明书
- 好看的php表格样式,HTML5制作表格样式
- 基于《女士品茶》分享统计学中假设检验的那些知识和应用
- pythoninput算出bmi_python菜鸡——BMI计算
- 《高效的秘密》第五，六章读后感
- 银行卡识别-自动识别银行卡号
- 解决-笔记本安装CentOS 7 后无法连接Wi-Fi
- 系统重装 VISTA下如何删除EISA分区
- 小语种翻译配音的软件推荐
- 南开大学计算机考研历年分数线,南开大学计算机科学与技术考研历年分数线报录比及导师信息...
- Windows10 WIFI蓝牙图标消失，网卡驱动出现感叹号等无法上网的情况解决方案
热门文章
- 计算机板报课作文500字,板报_500字日记作文_初中作文_大文斗范文网
- Mysql 插入中文错误：Incorrect string value: '\xE7\xA8\x8B\xE5\xBA\x8F...' for column 'course' at row 1
- php 如何初始化变量的值,php中变量初始化和赋值方法
- 都说要打造个人IP，那到底什么才是个人IP？
- 开发过程遇到的问题及解决办法集锦
- PyTorch学习之归一化层（BatchNorm、LayerNorm、InstanceNorm、GroupNorm）
- 斯坦福首席人工智能科学家:如何教计算机看懂一张图？
- python画出优美的等高线图
- 2500 做一个正气的杭电人
- 解决会声会影x9关闭后UEIP.dll找不到指定模块的方法