前端实战之小米

已于 2024-02-04 20:35:28 修改
阅读量292 收藏 3
点赞数 9
文章标签： 前端
于 2024-02-04 18:27:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74242675/article/details/136030573
版权

                "大家好！我最近使用HTML和CSS编写了一个小米页面，非常兴奋地想与大家分享。这个页面是专门为小米粉丝设计的，旨在提供有关小米产品的详细信息和最新动态。通过这个页面，你可以了解到最新的小米手机、智能家居设备以及其他相关产品和服务。

在设计这个页面时，我注重了用户体验和界面美观。使用了简洁明了的布局和易于导航的菜单，使用户能够轻松找到他们感兴趣的内容。此外，我还添加了一些动画效果和交互元素，以增加页面的趣味性和吸引力。

如果你对小米感兴趣，或者想要了解更多关于小米的信息，那么这个页面绝对是你不能错过的资源。你可以在我的博客上查看完整的页面设计和代码实现，并亲自体验一下它的功能和效果。

希望你们喜欢这个小米页面，也希望它能为你们带来便利和乐趣。如果你有任何问题或建议，欢迎在评论区留言与我交流。感谢大家的阅读和支持！"

下面是部分图片

 

HTML：

    <div class="black-nav">
        <div class="wrap">
            <ul class="black-nav-left">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">loT</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>
                    <div class="download">
                        <img src="./images/download.png" alt="">
                        <p>小米商城APP</p>
                    </div>
                    <div class="stri"></div>
                </li>
                <li><a href="#">智能生活</a><span>|</span></li>
                <li><a href="#">SelectLocation</a><span>|</span></li>
            </ul>
            <ul class="black-nav-right">
                <li><a href="#">登录</a><span>|</span></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">消息通知</a><span>|</span></li>
                <li class="cart">
                    <a href="#">
                        <i class="iconfont">&#xe607;</i>
                        <i>购物车（0）</i>
                    </a>
                    <div class="cart-list">
                        购物车中还没有商品，赶紧选购吧
                    </div>
                </li>
            </ul>
        </div>
    </div>

   <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="./images/phone.png" alt="">
                                            </div>
                                            <p class="name">小米10至尊纪念版</p>
                                            <p class="price">5200元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="./images/phone.png" alt="">
                                            </div>
                                            <p class="name">小米10至尊纪念版</p>
                                            <p class="price">5200元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="./images/phone.png" alt="">
                                            </div>
                                            <p class="name">小米10至尊纪念版</p>
                                            <p class="price">5200元</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="./images/phone.png" alt="">
                                            </div>
                                            <p class="name">小米10至尊纪念版</p>
                                            <p class="price">5200元</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">智能硬件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
 <div class="slide">
                <ul>
                    <li>
                        <a href="#">手机 <i class="iconfont">&#xe621;</i></a>
                        <div class="slide-list">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="./images/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./images/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./images/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./images/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./images/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./images/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./images/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./images/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./images/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./images/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="./images/phone.png" alt="">
                                        <span>小米手机至尊版</span>
                                    </a>
                                </li>
                            </ul>
                        </div>

css:

.header img{
    height: 120px;
    /* 图片，以中间开始渲染 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/* 头部样式结束 */

/* 黑色导航样式开始 */
.black-nav{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
    font-size: 12px;
}
.wrap{
    width: 1226px;
    margin: 0 auto;
}
.black-nav-left{
    float: left;
}
.black-nav-right{
    float: right;
}
.black-nav li{
    float: left;
    position: relative;
}
.black-nav a{
    color: #b0b0b0;
}
.black-nav span{
    color: #424242;
    margin: 0 3.6px;
}
.download{
    width: 124px;
    height: 0;
    background: #fff;
    box-shadow: 0 1px 5px #aaa;
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -62px;
    overflow:hidden;
    transition: all 0.3s;
    z-index: 10;
}
.download img{
    width: 90px;
    margin: 18px auto 0;
}

如果大家想练习，又不知道从哪里开始练，我给大家准备好了

1.华为

2.金三云

3.品邮购

4.小米

 如果可以做两三个，就可以学习HTML+css移动端了

本文所需要素材，需要的可以后台留言我发给你们。原创不易,多多支持。

写作不易，请支持支持，你的点赞是我写的动力

最后求点赞，求分享，求抱抱...

m0_74242675
关注
  • 9
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端期末大作业——仿小米商城电商平台(6页) html+css+javascript网页设计实例 企业网站制作
12-08 911
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 --- @[TOC](文章目录🌰) 一、网页介绍📖 1 网页简介：此作品为学生个人主
Web前端仿小米官网实战总结
qq_24308659的博客
11-29 1684
自学前端阶段性总结（仿小米官网-前言） 自学前端至今实在是感慨万千，一个人学习太累，自律能力不太够，学习速度跟不上技术更新速度，所以学习技术是一定不能偷懒的，更不能沉迷游戏，要坚持学习，最好有人带，实在不行就报个班（算是给新手的一个建议吧） 仅做参考，不做学习，我很菜-我看不懂自己写的代码=_= 另外是关于学习的方法建议： 看视频效率低，但是容易理解，看文档、读源码效率高，前期可以看视频帮助理解，后期最好不要老看视频，要实践要自己动手撸多尝试 为了学习vue于是自己动手尝试仿了一个小米官网（PC端），这贴已
8.8 Web前端-小米商城项目实战
执笔绘江山的博客
08-08 2907
hello大家好，人总是会在写项目的时候发现自己的许多不足之处，然后加以改进，并且记住这些东西，所以今天我给大家带来的是我的第二个项目，小米商城首页的书写。但是还有下拉框，在中盒子中每个小方块下面再定位一个横向盒子，里面填充内容，分隔线用伪类去做，具体做法可以参考我之前的文章，如何用伪类书写分隔线，然后给每一个小方块下方都加上这个，然后给一个移入hover效果，当鼠标移入时，给下面的盒子一个高度就可以了。那么我们先从头部开始，慢慢向下书写整个页面。...
8.12 Web前端-小米商城项目实战
执笔绘江山的博客
08-12 1398
底部上方再次用到了矢量图，来保证移入的效果显示，然后中间是用ul列表制作的文字，每个用a标签包裹起来实现链接功能，最后底部就是图片和文字的结合，使用p标签来包裹不同的文字格式来实现各种效果，整体难度不大，就是内容比较繁琐。hello，各位朋友们大家好，今天我来继续把小米商城的部分说完，最后剩余的部分就是主体和尾部了，这两部分内容相对于前面来说难度较小，只有几个点需要注意一下即可。主体部分内容相对简单，只需注意格式排列以及浮动效果的显示即可。...
【Web前端】小米商城项目实战HTML+CSS+JavaScript
不会敲代码的程序员
09-15 5886
1、小米商城源码html 2、小米商城源码 github 3、小米商城源码项目h5 4、仿小米商城html网页源码 3.1、首页（index.html） 3.2、登录（login.html） 3.3、注册（register.html） 3.4、详情（plus5.html） 3.5、订单（order.html） 3.6、购物车（trolley.html）
适合练手的10个前端实战项目(附视频+源码）
热门推荐
码农王也的博客
08-28 4万+
当下前端开发可以说是一个比较火的职业，所以学习的人比较多，不管是培训还是自学都是希望通过前端可以找到一份好的工作，但是很多自学的朋友在自学过程中有些盲目，不仅大大降低了学习的效率，而且也会打击自己的学习热情。 那么当我们学习了前端的一部分知识之后，对前端有了进一步的了解，我们就急需要一些项目去帮我们整理一下自己学习的知识点以及提高一下编程能力，这样更有助于我们的学习和工作实践，最重要的是提高自己的项目经验，对于找工作而言有着大大的帮助。 下面小编整理了几个我们的学员项目，在学习前端的新人可以拿去练练手。
【Web前端HTML+CSS基础——小米官网项目实战】
weixin_64993156的博客
02-26 3314
小米官网是学习前端实战项目锻炼最多的一个项目，基本上就是学习完HTML和CSS之后就可以开始锻炼自己实战的能力，学习如何搭建自己一个完整的页面实战，对之后的学习打下很好的基础，在这个博客的代码中，我只是涉及到相关的HTML和CSS，图片路径可以自己改并且找一些相关的图片，或者下载我主页的资源。
8.11 Web前端-小米商城项目实战
执笔绘江山的博客
08-11 1392
可以看到主要分为上下两个盒子，其中下半部分很好写，四个小盒子用a链接书写内容即可，上班部分是一个难点，首先是占满了整个盒子的轮播图，在这里我用到的是名为swiper的插件，他可以帮我们很方便的解决轮播图的问题，但是另一个问题接踵而至，那就是轮播图占满了整个界面盒子，左侧的商品栏如何显示？除了上面的内容，侧边栏的书写就更容易了，就是一个ul列表下去把每个元素书写在内部，然后就是用position:fixed来定位，这个是可以相对于浏览器窗口定位的方法，调整top值和left值就可以让其固定在想要的位置。...
15套前端经典实战项目大合集，小白练手必备实战项目
lghtdw1314的博客
11-07 2万+
15套前端经典实战项目大合集，悄悄练习，你会惊艳所有人。今日我以内卷为荣，明日内卷以我为荣，不管学习哪门语言都要做出实际的东西来，这个实际的东西就是项目。这里整理了15前端经典实战项目，每套都有完整且详细的视频教程和源码，你可从中选择自己喜欢的项目做参考练手，也可以从中寻找灵感去做自己的项目。
前端实战项目-小米官网
02-26
小米官网是学习前端实战项目锻炼最多的一个项目，基本上就是学习完HTML和CSS之后就可以开始锻炼自己实战的能力，学习如何搭建自己一个完整的页面实战，对之后的学习打下很好的基础，在这个博客的代码中，我只是涉及...
web前端基础实战项目-小米商城
06-21
HTML5是移动端开发最常用的技术，熟悉HTML5新标签和Api以及CSS3的新的Api，可以使你的网页更加的绚丽多彩，并且开发出你意想不到的网页效果。学完此课程，你编写的代码就可以移动设备上完美兼容啦。
小米项目源代码.zip
04-04
小米商场项目 首页，详情页 商品详情页 商品订单页 购物车订单页 登录注册页 技术栈：HTML/CSS/JavaScript、Jquery PHP MySQL GULP sass require.js 附带项目开发流程及说明思维导图
网页前端项目小米商城源码
08-25
简单的小米商城主页面
前端小白入门必修-小米商城开发实战（下）
06-21
HTML5是移动端开发最常用的技术，熟悉HTML5新标签和Api以及CSS3的新的Api，可以使你的网页更加的绚丽多彩，并且开发出你意想不到的网页效果。学完此课程，你编写的代码就可以移动设备上完美兼容啦。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 320
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
最新发布
ggq53219的博客
06-10 499
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
前端性能优化：提升网站加载速度的终极指南
喔的嘛呀的博客
06-07 1060
综上所述，通过以上优化方案和具体措施，我们可以有效地提升网站的加载速度，改善用户体验，提高转化率，从而在激烈的市场竞争中脱颖而出，取得更好的业绩和口碑。作为前端工程师，我们应该不断学习和探索，不断优化和提升网站性能，为用户创造更好的上网体验。
vue3如何定义一个组件
Java程序员专栏
06-09 514
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
小米商城web前端实战项目(附源码)
01-16
小米商城web前端实战项目是一个非常值得学习和探索的项目，通过学习该项目的源码，可以对前端开发有更深入的了解和实践。该项目的主要特点包括响应式布局、页面动画效果、数据请求和处理、组件化开发等。 首先，响应式布局是该项目的一个重要特点，通过媒体查询和flex布局等技术实现了在不同设备上的自适应，使得页面在手机、平板和电脑上都能有良好的展示效果，这对于网页设计来说是非常关键的一点。 其次，页面动画效果也是该项目的一个亮点，在使用CSS3和Javascript的动画效果方面展示了丰富的实践经验，比如实现了页面加载时的渐显效果、轮播图的切换效果等，这些都是非常实用的技巧。 此外，数据请求和处理也是该项目中需要重点关注的部分，通过Ajax技术和其他数据接口，实现了商品信息的获取和展示，加入购物车等功能。 最后，组件化开发是该项目的另一个特点，通过划分各个功能模块，实现了组件的高内聚低耦合，提高了代码的复用性和维护性。 总之，通过学习小米商城web前端实战项目的源码，可以对前端开发有更深入的了解和实践，积累丰富的经验和技巧，为以后的项目开发提供了很好的参考和借鉴。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值