HTML5作业：实现小米官网静态首页

1、引言

你是否有过相关设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

小米官网采用html5，css3技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，回复“小米官网1”免费获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面

小米官网采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选，这个页面使用了html和css，特别适合新手练习的页面，小米网站相对于来说比较简洁，看起来比较简单但是实现所有的样式还是有点难度。熟练搭建静态网页是前端工程师的必备技能,小米首页难度低,适合新手练习，所以大家还是需要多练习页面布局,真的很重要!

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时利用弹性布局(display:flex)+float+position定位布局+轮播图+css3动画效果

3、搭建流程
1.头部header导航
注意:在做导航时遇到问题就是浏览器窗口缩小时导航文字会被挤出去

解决方法:给头部导航栏加一个最小宽度(min-width)完美解决文字溢出问题,这里我选择了加最小宽度,而没用溢出隐藏样式(因为直接加最小宽度更省事)

代码如下（示例）：

 <div class="nav-top"><div class="container"><div class="nav-top-left"><ul><li><a href="#">小米商城</a><span></span></li><li><a href="#">MIUI</a><span></span></li><li><a href="#">IoT</a><span></span></li><li><a href="#">云服务</a><span></span></li><li><a href="#">天星数科</a><span></span></li><li><a href="#">有品</a><span></span></li><li><a href="#">小米开放平台</a><span></span></li><li><a href="#">企业团购</a><span></span></li><li><a href="#">资质证照</a><span></span></li><li><a href="#">协议规则</a><span></span></li><li><a href="#">下载app</a><span></span></li><li><a href="#">智能生活</a><span></span></li><li><a href="#">Select Location</a></li></ul></div><div class="nav-top-right"><ul><li><a href="#">登录</a><span class="line"></span></li><li><a href="#">注册</a><span class="line"></span></li><li><a href="#">消息通知</a></li><li class="shopcart"><img src="./images/tu5_1.png"></img><span>购物车（0）</span><a href="#"></a></li></ul></div></div></div>

2.nav导航栏部分
注意:遇到跟头部导航同样的问题(加了min-width)解决了文字溢出

小米Logo部分用到position定位

文字导航li标签用display弹性盒子,设置属性justify-content: center;实现居中分布

搜索框部分用到:右浮动+position定位

nav导航li标签的鼠标移入移出效果实现用(display:none隐藏)+ 伪类:hover设置(display:block)实现移入移出动画效果

代码如下：

 <div class="nav"><div class="container"><div class="logo"><img src="./images/logo-mi2.png" alt=""></div><ul><li><a href="#" class="item">小米手机</a><div class="content"><div class="content-container"><ul><li><img src="./images/1.webp" alt=""><p>Xiaomi Civi 1S</p><span>2299元起</span><i></i></li><li><img src="./images/2.webp" alt=""><p>Xiaomi 12 Pro</p><span>4699元起</span><i></i></li><li><img src="./images/3.webp" alt=""><p>Xiaomi 12</p><span>3699元起</span><i></i></li><li><img src="./images/4.webp" alt=""><p>Xiaomi 12X</p><span>2699元起</span><i></i></li><li><img src="./images/5.webp" alt=""><p>Xiaomi 11 青春活力板</p><span>1799元起</span><i></i></li><li><img src="./images/6.webp" alt=""><p>Xiaomi Civi</p><span>2299元起</span><i></i></li></ul></div></div></li><li><a href="#" class="item">Redmi红米</a><div class="content"><div class="content-container"><ul><li><img src="./images/redmi1.webp" alt=""><p>Redmi Note 11T Pro+</p><span>2099元起</span><i></i></li><li><img src="./images/redmi2.webp" alt=""><p>Redmi Note 11T Pro</p><span>1799元起</span><i></i></li><li><img src="./images/redmi3.webp" alt=""><p>Redmi Note 11SE</p><span>999元起</span><i></i></li><li><img src="./images/redmi4.webp" alt=""><p>Redmi 10A</p><span>699元起</span><i></i></li><li><img src="./images/redmi5.webp" alt=""><p>Redmi K50 Pro</p><span>2999元起</span><i></i></li><li><img src="./images/redmi6.webp" alt=""><p>Redmi K50</p><span>2399元起</span><i></i></li></ul></div></div></li><li><a href="#" class="item">电视</a><div class="content"><div class="content-container"><ul><li><img src="./images/tv1.webp" alt=""><p>Redmi智能电视X55 2022</p><span>2399元</span><i></i></li><li><img src="./images/tv2.webp" alt=""><p>Redmi智能电视X65 2022</p><span>3099元</span><i></i></li><li><img src="./images/tv3.webp" alt=""><p>小米电视6 65" OLED</p><span>6699元</span><i></i></li><li><img src="./images/tv4.webp" alt=""><p>小米电视 大师77" OLED</p><span>17999元</span><i></i></li><li><img src="./images/tv5.webp" alt=""><p>小米透明电视</p><span>49999元</span><i></i></li><li><img src="./images/tv6.webp" alt=""><p>小米电视 大师 65英寸OLED</p><span>8999元</span><i></i></li></ul></div></div></li><li><a href="#" class="item">笔记本</a><div class="content"><div class="content-container"><ul><li><img src="./images/notebook1.webp" alt=""><p>RedmiBook Pro 14 2022锐龙版</p><span>5299元起</span><i></i></li><li><img src="./images/notebook2.webp" alt=""><p>RedmiBook Pro 15 2022锐龙版</p><span>5499元起</span><i></i></li><li><img src="./images/notebook3.webp" alt=""><p>RedmiBook Pro 14锐龙版</p><span>4699元起</span><i></i></li><li><img src="./images/notebook4.webp" alt=""><p>RedmiBook Pro 14 2022</p><span>5399元起</span><i></i></li><li><img src="./images/notebook5.webp" alt=""><p>小米笔记本 Pro 14 锐龙版</p><span>5499元起</span><i></i></li><li><img src="./images/notebook6.webp" alt=""><p>Redmi G 2121 AMD版</p><span>6499元起</span><i></i></li></ul></div></div></li><li><a href="#" class="item">家电</a><div class="content"><div class="content-container"><ul><li><img src="./images/jd1.webp" alt=""><p>巨省电 | 米家空调 新一级 1.5匹睡眠版</p><span>2199元</span><i></i></li><li><img src="./images/jd2.webp" alt=""><p>巨省电 3匹|变频|新一级能效（鎏金款）</p><span>5299元</span><i></i></li><li><img src="./images/jd3.webp" alt=""><p>米家扫拖机器人1T</p><span>999元</span><i></i></li></ul></div></div></li><li><a href="#" class="item">路由器</a><div class="content"><div class="content-container"><ul><li><img src="./images/route1.webp" alt=""><p>Redmi 电竞路由器 AX5400</p><span>599元</span><i></i></li><li><img src="./images/route2.webp" alt=""><p>小米路由器AX6000</p><span>549元</span><i></i></li><li><img src="./images/route3.webp" alt=""><p>小米路由器AX9000</p><span>1299</span><i></i></li><li><img src="./images/route4.webp" alt=""><p>Redmi路由器AC2100</p><span>199元</span><i></i></li><li><img src="./images/route5.jpg" alt=""><p>小米路由器4A 千兆版本</p><span>129元</span><i></i></li><li><img src="./images/route6.png" alt=""><p>查看全部</p><span>小米路由器</span><i></i></li></ul></div></div></li><li><a href="#" class="item">智能硬件</a></li><li><a href="#" class="item">服务</a></li><li><a href="#" class="item">社区</a></li></ul><div class="search"><input type="text" placeholder="手机"><span class="iconfont icon-sousuo"></span></div></div></div>

3.轮播图+图片导航部分

轮播图是使用的原生js自己写的，相关逻辑比较容易理解

相关代码：

        <div class="banner"><ul class="img-list"><li><a href="#"><img src="./images/lbt.png" alt=""></a></li><li><a href="#"><img src="./images/lbt1.jpg" alt=""></a></li><li><a href="#"><img src="./images/lbt2.jpg" alt=""></a></li><li><a href="#"><img src="./images/lbt3.jpg" alt=""></a></li></ul><div class="arrow"><span class="left"> < </span><span class="right"> > </span></div><!-- 小圆圈 --><ul class="round"><li class="active"></li><li></li><li></li><li></li></ul><!-- 侧边导航栏 --><div class="side-nav"><div class="side-nav-left"><ul><li><a href="#">手机 电话卡</a><div class="side-nav-right"><ul><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li><li><a href="#"><img src="./images/sj1.png" alt=""><span>Note 11T Pro+</span></a></li></ul></div></li><li><a href="#">电视 盒子</a><div class="side-nav-right"><ul><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li><li><a href="#"><img src="./images/tv1.webp" alt=""><span>Redmi智能电视X55</span></a></li></ul></div></li><li><a href="#">笔记本 显示器</a><div class="side-nav-right"></div></li><li><a href="#">家电 插线板</a><div class="side-nav-right"></div></li><li><a href="#">出行 穿戴</a><div class="side-nav-right"></div></li><li><a href="#">智能 路由器</a><div class="side-nav-right"></div></li><li><a href="#">电源 配件</a><div class="side-nav-right"></div></li><li><a href="#">健康 儿童</a><div class="side-nav-right"></div></li><li><a href="#">耳机 音箱</a><div class="side-nav-right"></div></li><li><a href="#">生活 箱包</a><div class="side-nav-right"></div></li></ul></div></div></div><!-- 热门新产品 --><div class="new-product"><div class="kind"><ul><li><a href="#"><img src="./images/mini1.png" alt=""><p>小米秒杀</p></a></li><li><a href="#"><img src="./images/mini2.png" alt=""><p>企业团购</p></a></li><li><a href="#"><img src="./images/mini3.png" alt=""><p>F码通道</p></a></a></li><li><a href="#"><img src="./images/mini4.png" alt=""><p>米粉卡</p></a></li><li><a href="#"><img src="./images/mini5.png" alt=""><p>以旧换新</p></a></a></li><li><a href="#"><img src="./images/mini6.png" alt=""><p>话费充值</p></a></li></ul></div><ul><li><a href="#"><img src="./images/dh1.jpg" alt=""></a></li><li><a href="#"><img src="./images/dh2.jpg" alt=""></a></li><li><a href="#"><img src="./images/dh3.jpg" alt=""></a></li></ul></div>

4.大主体部分

比较简单只需要把盒子布局好再把内容慢慢填充进去再添加一些小样式即可

用到display弹性盒子(学会用弹性盒子真的非常好用,我用的还是不熟练)

相关代码：

<div class="body"><!-- 秒杀 --><div class="seckill"><h6>小米秒杀</h6><div class="seckill-content"><ul><li><a href="#"><p>14:00 场</p><p>距离结束还有</p><div class="time"><span class="hours">05</span>:<span class="min">10</span>:<span class="sec">33</span></div></a></li><li><a href="#"><img src="./images/mouse.jpg" alt=""></a><p class="title">小米时尚鼠标 黑色</p><p>金属材质外观</p><p class="price">79元<span class="del">99元</span></p></li><li><a href="#"><img src="./images/clock.jpg" alt=""></a><p class="title">小爱智能触屏时钟音箱 黑色</p><p>AI智能黑科技</p><p class="price">369元<span class="del">399元</span></p></li><li><a href="#"><img src="./images/xa2max.jpg" alt=""></a><p class="title">左点小艾2Max智能艾灸盒</p><p>海泉推荐；国朝养生</p><p class="price">249元<span class="del">369元</span></p></li><li><a href="#"><img src="./images/brush.png" alt=""></a><p class="title">素诺智能可视洁牙仪 超声波</p><p>500万高清像素，医用洗牙家用化</p><p class="price">249元<span class="del">299元</span></p></li></ul></div><div class="change-page"></div></div>  <!-- 商品 --><ul class="goods-list"><li><div class="pic"><a href="#"><img src="./images/tgt1.jpg" alt=""></a></div><div class="title"><span>手机</span><span>查看更多</span><i> > </i></div><div class="goods-content"><div class="left"><a href="#"><img src="./images/phone_left.jpg" alt=""></a></div><ul class="right"><li><a href="#"><img src="./images/sj7.png" alt=""></a><p class="title">Note10 10 Pro</p><p>天玑1100年度旗舰芯，VC液冷散热</p><p class="price">1599元起<span class="del">1699元</span></p></li><li><a href="#"><img src="./images/sj8.jpg" alt=""></a><p class="title">Note10 5G</p><p>5G小金刚，旗舰长续航</p><p class="price">1099元起</p></li><li><a href="#"><img src="./images/sj1.png" alt=""></a><p class="title">小米MIX FOLD</p><p>折叠大屏 | 自研芯片</p><p class="price">9999元起</p></li><li><a href="#"><img src="./images/sj2.png" alt=""></a><p class="title">小米11 Ultra</p><p>1/1.12"GN2 | 2K四微曲屏</p><p class="price">5999元起</p></li><li><a href="#"><img src="./images/sj3.jpg" alt=""></a><p class="title">小米11 Pro</p><p>1/1.12"GN2 | 骁龙888</p><p class="price">4499元起<span class="del">4999元</span></p></li><li><a href="#"><img src="./images/sj4.png" alt=""></a><p class="title">小米11 青春版</p><p>小米11青春版 轻薄</p><p class="price">2299元起</p></li><li><a href="#"><img src="./images/sj5.png" alt=""></a><p class="title">K40 游戏增强版</p><p>轻薄电竞设计</p><p class="price">1999元起</p></li><li><a href="#"><img src="./images/sj6.png" alt=""></a><p class="title">黑鲨4 Pro</p><p>黑鲨4 Pro</p><p class="price">3999元起</p></li></ul></div></li><li><div class="pic"><a href="#"><img src="./images/tgt2.jpg" alt=""></a></div><div class="title"><span>家电</span><div id="second"><a href="#">电视影音</a><div class="goods-content"><ul class="no-left-right"><li style="padding-top: 0;"><a href="#" style="height: 100%;"><img src="./images/jdgg1.jpg" alt="" style="width: 100%;height: 100%;"></a></li><li><a href="#"><img src="./images/jd1.jpg" alt=""></a><p class="title">Note10 10 Pro</p><p>天玑1100年度旗舰芯，VC液冷散热</p><p class="price">1599元起<span class="del">1699元</span></p></li><li><a href="#"><img src="./images/jd2.jpg" alt=""></a><p class="title">Note10 10 Pro</p><p>天玑1100年度旗舰芯，VC液冷散热</p><p class="price">1599元起<span class="del">1699元</span></p></li><li><a href="#"><img src="./images/jd3.jpg" alt=""></a><p class="title">Note10 5G</p><p>5G小金刚，旗舰长续航</p><p class="price">1099元起</p></li><li><a href="#"><img src="./images/jd4.jpg" alt=""></a><p class="title">小米MIX FOLD</p><p>折叠大屏 | 自研芯片</p><p class="price">9999元起</p></li><li style="padding-top: 0;"><a href="#"><img src="./images/jdgg2.jpg" alt="" style="width: 100%;height: 100%;"></a></li><li><a href="#"><img src="./images/jd5.jpg" alt=""></a><p class="title">小米11 Pro</p><p>1/1.12"GN2 | 骁龙888</p><p class="price">4499元起<span class="del">4999元</span></p></li><li><a href="#"><img src="./images/jd6.jpg" alt=""></a><p class="title">小米11 青春版</p><p>小米11青春版 轻薄</p><p class="price">2299元起</p></li><li><a href="#"><img src="./images/jd7.jpg" alt=""></a><p class="title">K40 游戏增强版</p><p>轻薄电竞设计</p><p class="price">1999元起</p></li><li class="last" style="padding-top:0;"><a class="half" href="#" style="margin-bottom: 14px"><div class="left">米家空气净化器Pro<br/><span style="color:#ff6700">1099元</span></div><img src="./images/jd5.jpg" alt=""></a><a class="more" href="#"><div class="left">浏览更多<br/><span style="color:rgb(185, 183, 180);font-size: 12px;">热门</span></div><img src="./images/youjiantou.png" alt="" style="width:50px;height:50px;margin-top:39px;margin-right: 26px;"></a></li></ul></div></div><div id="first"><a href="#" class="active">热门</a><div class="goods-content" style="height:614px;"><ul class="no-left-right"><li style="padding-top: 0;"><a href="#" style="height: 100%;"><img src="./images/jdgg1.jpg" alt="" style="width: 100%;height: 100%;"></a></li><li><a href="#"><img src="./images/sj7.png" alt=""></a><p class="title">Note10 10 Pro</p><p>天玑1100年度旗舰芯，VC液冷散热</p><p class="price">1599元起<span class="del">1699元</span></p></li><li><a href="#"><img src="./images/sj7.png" alt=""></a><p class="title">Note10 10 Pro</p><p>天玑1100年度旗舰芯，VC液冷散热</p><p class="price">1599元起<span class="del">1699元</span></p></li><li><a href="#"><img src="./images/sj8.jpg" alt=""></a><p class="title">Note10 5G</p><p>5G小金刚，旗舰长续航</p><p class="price">1099元起</p></li><li><a href="#"><img src="./images/sj1.png" alt=""></a><p class="title">小米MIX FOLD</p><p>折叠大屏 | 自研芯片</p><p class="price">9999元起</p></li><li style="padding-top: 0;"><a href="#"><img src="./images/jdgg2.jpg" alt="" style="width: 100%;height: 100%;"></a></li><li><a href="#"><img src="./images/sj3.jpg" alt=""></a><p class="title">小米11 Pro</p><p>1/1.12"GN2 | 骁龙888</p><p class="price">4499元起<span class="del">4999元</span></p></li><li><a href="#"><img src="./images/sj4.png" alt=""></a><p class="title">小米11 青春版</p><p>小米11青春版 轻薄</p><p class="price">2299元起</p></li><li><a href="#"><img src="./images/sj5.png" alt=""></a><p class="title">K40 游戏增强版</p><p>轻薄电竞设计</p><p class="price">1999元起</p></li><li><a href="#"><img src="./images/sj8.jpg" alt=""></a><p class="title">Note10 5G</p><p>5G小金刚，旗舰长续航</p><p class="price">1099元起</p></li></ul></div></div></div></li></ul></div>

获取完整代码，请关注文后二维码（coding加油站）回复“小米官网1”免费获取。

HTML5作业：实现小米官网静态首页相关推荐

实战小米官网静态页面1：导航栏部分
小米官网静态页面: 导航栏部分: 这里用id选择器,猫脸动画:class选择器(复习!) F12 导航栏分了左右两个部分: 下图18行少了个v,记得补上,是navCenter 设置好网页的边距图片原 ...
HTML5+CSS3实现小米官网（完整版）
前言小米官网其实是一个结构非常简单的网页,相比与小米商城,难度降低了很多很多.我也写过一次小米商城,可以移步到我的主页.本篇文章简单分析一下小米官网的静态结构,文章末尾附源代码和素材. 一.效果展示 ...
小米官网静态网页练习记录
本次练习是在完成京东网页的独自完成,来达到提升熟练度的目的. 完成效果图总结 (1)logo:在logo处不只是放图片,还外加文字通过检索权重 .header-b .logo::before{ co ...
小米官网静态网页项目实战3
小米商城APP二维码下拉以及过渡效果结构 <!DOCTYPE html> <html lang="en"> <head><meta ch ...
【Web】HTML+CSS（No.55）实现小米官网首页静态效果
模仿实现小米官网首页静态布局需要素材点击图片联系我或私信.评论效果图 HTML代码 <!DOCTYPE html> <html lang="en"> & ...
HTML+CSS小米官网首页 (1页侧拉菜单)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
HTML期末大作业~玄幻情缘游戏官网静态html模板
HTML期末大作业~玄幻情缘游戏官网静态html模板临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问 ...
html+css 简单的静态网页小米官网
html+css简单静态小米官网把之前做的改进了一下,其他的都是一样的布局效果图: 新增了一些字体文件不多说上代码 HTML代码: ```html <!DOCTYPE html> & ...
用html和css仿作小米官网（静态）
目录一:准备工作二:头部导航栏部分三:中间照片部分四:尾部文字部分准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...
Html5+Css实战前端小米官网左侧导航（思路+详解+素材）
实战后的效果大家好,我是小叶同学,如今都大二了,跟着学校老师只学到皮毛,不如自己自学,说起来也惭愧,今天实战Html+CSS小米官网左侧导航开发,后面也会一点点对小米官网全部开发,欢迎前来坐坐沙发 ...

HTML5作业：实现小米官网静态首页

HTML5作业：实现小米官网静态首页相关推荐

最新文章

热门文章