HTML+CSS实现小米官网首页(一)

简介: HTML+CSS实现小米官网首页

一、HTML+CSS实现小米官网首页

仿写小米官网的页面,熬了两个晚上终于把这个页面做好了,原创不易,欢迎大家点赞和评论,

二、主要内容:

三、学习目标:

四、项目准备:

仿写小米官网

  • 下载图片
  • 下载iconfont
  • 初始化css文件

五、页面结构如下:

六、效果图如下:

七、部分源代码如下(如需要全部的源代码评论区留言,原创不易,记得点赞和收藏哦)。

HTML部分源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index_style.css">
    <script type="text/javascript" src="index.js"></script>
    <title>小米商城-首页</title>
</head>
<body>
    <!-- 头部部分开始 -->
    <div class="header">
        <!-- 头部大的背景部分 -->
        <div class="header_top"></div>
        <!-- 头部中间部分的列表 -->
        <div class="header_middle">
            <div class="w">
                <ul>
                    <li><a href="#">小米商城</a></li>
                    <li><a href="#">MIUI</a></li>
                    <li><a href="#">IOT</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>
                    <li><a href="#">协议规则</a></li>
                    <li><a href="#">下载APP</a></li>
                    <li><a href="#">智能生活</a></li>
                    <li><a href="#">Select Location</a></li>
                    <li class="right"><a href="register.html">登录</a></li>
                    <li><a href="login.html">注册</a></li>
                    <li><a href="message.html">消息通知</a></li>
                    <li class="shopping"><a href="shopping.html">购物车(0)</a></li>
                </ul>
            </div>
        </div>
        <!-- 头部logo部分 -->
        <div class="top_logo w">
            <a href="#" class="logo"></a>
            <ul class="list">
                <li><a href="#">小米手机</a></li>
                <li><a href="#">Redmi红米</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>
                <li><a href="#">社区</a></li>
            </ul>
            <a href="#" class="search_btn"></a>
            <div class="search">
                <input type="search" value="出行" class="search-text">
            </div>
        </div>
        <!-- 头部app部分 -->
        <div class="top_app w">  
            <!-- 轮播图效果 start -->
            <div id="box_autoplay">
                <div class="box_autoplay_list">
                    <ul>
                        <li><img src="images/app_banner.webp.jpg" style="width: 1226px; height: 460px;" /></li>
                        <li><img src="images/app_banner.webp2.jpg" style="width: 1226px; height: 460px;" /></li>
                        <li><img src="images/app_banner.webp3.webp.jpg" style="width: 1226px; height: 470px;"/></li>
                        <li><img src="images/app_banner.webp4.webp.jpg" style="width: 1226px; height: 470px;" /></li>
                    </ul>
                </div>
            </div>
            <!-- 轮播图效果 end -->
            <div class="app_list">
                <ul>
                    <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>
                    <li><a href="#">健康 儿童</a></li>
                    <li><a href="#">耳机 音箱</a></li>
                    <li><a href="#">生活 箱包</a></li>
                </ul>
            </div>
        </div>
        <div class="app_bottom w">
            <div class="first">
                <ul>
                    <li><a href="#"><img src="images/app_btn1.png" alt="">小米秒杀</a></li>
                    <li><a href="#"><img src="images/app_btn2.png" alt="">企业团购</a></li>
                    <li class="first3"><a href="#"><img src="images/app_btn3.png" alt="">F码通道</a></li>
                    <li class="first4"><a href="#"><img src="images/app_btn4.png" alt="">米粉卡</a></li>
                    <li class="first5"><a href="#"><img src="images/app_btn5.png" alt="">以旧换新</a></li>
                    <li class="first6"><a href="#"><img src="images/app_btn6.png" alt="">话费充值</a></li>
                </ul><a href="#"></a>
            </div>
            <ul>
                <li><a href="#"><img src="images/app_bottom1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/app_bottom2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/app_bottom3.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>
    <!-- 头部部分结束 -->


HTML+CSS实现小米官网首页(二)https://developer.aliyun.com/article/1382511

相关文章
|
6天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
25 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
29天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
117 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
27天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
52 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
26天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
63 34
|
28天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
32 2
|
30天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
77 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24
|
4月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
3月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
116 7