按照小米官网做一个静态网页练习

最新推荐文章于 2022-07-30 18:35:40 发布
最新推荐文章于 2022-07-30 18:35:40 发布
阅读量451 收藏
点赞数
文章标签： webview css elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyonyg/article/details/121848642
版权
这是一个关于小米官网的HTML代码片段，展示了网站的头部导航栏，包括小米商城、MIUI、loT等链接，以及购物车、消息通知、登录注册等功能。页面还包含了商品分类的导航，如手机、电脑、家电等，并提供了相关服务和通道的入口，如保障服务、企业团购等。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>小米官网</title>
</head>
<body>
    <div class="header">
        <div class="inner">
            <div class="naver">
                <a href="#">小米商城</a>
                <span class="kongge">|</span>
                <a href="#">MIUI</a>
                <span class="kongge">|</span>
                <a href="#">loT</a>
                <span class="kongge">|</span>
                <a href="#">云服务</a>
                <span class="kongge">|</span>
                <a href="#">天星数科</a>
                <span class="kongge">|</span>
                <a href="#">有品</a>
                <span class="kongge">|</span>
                <a href="#">小爱开放平台</a>
                <span class="kongge">|</span>
                <a href="#">企业团购</a>
                <span class="kongge">|</span>
                <a href="#">资质证照</a>
                <span class="kongge">|</span>
                <a href="#">协议规则</a>
                <span class="kongge">|</span>
                <a href="#">下载app</a>
                <span class="kongge">|</span>
                <a href="#">智能生活</a>
                <span class="kongge">|</span>
                <a href="#">Select Location</a>
            </div>
            <div class="gwc">
                <a href="#"><p>购物车(0)</p></a>
            </div>
            <div class="mont">
                <a href="#">消息通知</a>
            </div>
            <div class="link">
                <a href="#">登录</a>
                <span class="kongge">|</span>
                <a href="#">注册</a>
                <span class="kongge">|</span>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="headed">
            <div class="logoer">
                <a href="https://www.mi.com/index.html"><img src="images/logo.png" alt=""></a>
            </div>
            <div class="nothing">
            </div>
            <div class="linked">
                <a href="#">Xiaomi手机</a>
                <a href="#">Redmi手机</a>
                <a href="#">电视</a>
                <a href="#">笔记本</a>
                <a href="#">平板</a>
                <a href="#">家电</a>
                <a href="#">路由器</a>
                <a href="#">服务</a>
                <a href="#">社区</a>
            </div>
            <div class="search">
                <div class="boxbig">
                    <div class="boxsmall"><input class="search_text" type="text"></div>
                    <div class="boxsmaller"><input class="search_sear" type="button"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content_left">
            <ul class="list_nav">
                <li class="list_text">
                    <a href="#">手机
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">电脑
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">笔记本&nbsp;平板
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">家电
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">出行&nbsp;穿戴
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">智能&nbsp;路由器
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">电源&nbsp;配件
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">健康&nbsp;儿童
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">耳机&nbsp;音响
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">生活&nbsp;箱包
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="second">
        <div class="channel">
            <ul>
                <li class="channel_il">
                    <a href="#"><img src="images/img11.png" alt="">保障服务</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/img12.png" alt="">企业团购</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/img13.png" alt="">F码通道</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/img14.png" alt="">米粉卡</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/img15.png" alt="">以旧换新</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/img16.png" alt="">话费充值</a>
                </li>
            </ul>
        </div>
        <div class="figure">
            <a href="#"><img src="images/img2.jpg" alt=""></a>
        </div>
        <div class="figure">
            <a href="#"><img src="images/img3.jpg" alt=""></a>
        </div>
        <div class="figure">
            <a href="#"><img src="images/img4.jpg" alt=""></a>
        </div>
    </div>
    <div class="footer">
        <div class="pic_big">
            <a href="#"><img src="images/img5.jpg" alt=""></a>
        </div>
    </div>
</body>
</html>

BVUVBvB
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小米官网HTML网页制作项目
04-29
关于小米官网的一个项目,如果说有初学者的话,项目不会做可以参考一下.
【静态网页】小米官网实现-12页
最新发布
m0_44965777的博客
03-17 2277
总共包括12个页面：登录页面 login.html注册页面 zhuce.html小米官网 xiaomi.html小米商城 index.html所有产品-手机 mishop1.html所有产品-手机 mishop2.html手机产品1 miproduct1.html手机产品2 miproduct.html加入购物车 cart.html购物车 mycar
HTML5作业：实现小米官网静态首页
coding加油站
07-30 5368
小米官网，模仿小米，小米界面作业，小米商城，模仿小米商城
css练习-小米官网首页静态页面制作
Gogo2328的博客
02-28 681
多有不足，继续学习
小米官网的静态页面
03-14
对于前端页面课程设计练习，包括对HTML和CSS的使用
小米官网首页（静态页面）
05-19
在构建“小米官网首页（静态页面）”的过程中，你需要掌握一系列HTML和CSS基础知识，这是前端开发的基石。以下是一些关键知识点的详细说明： 1. **HTML基础**：HTML（HyperText Markup Language）是用于创建网页的...
大学生静态网页设计期末作业仿照小米商城的官网源码（95分以上）
06-18
仿照小米商城的官网编写的主页、登录、注册和购物车功能，只是一些静态网页和一些简单的功能,没有涉及到与后台数据的交互，适合新手来练习web的技术项目大学生静态网页设计期末作业仿照小米商城的官网源码。...
仿小米商城网页源码全新完美版.zip
06-01
该资源是一个针对初学者设计的前端项目，名为“仿小米商城网页源码全新完美版”。这个项目的主要目的是提供一个实际的、完整的网页源码，帮助初学者了解和实践HTML和CSS在网页设计中的应用。通过分析和研究这个源码...
小米官网临摹版html+css
11-25
【小米官网临摹版html+css】项目是一个前端学习与实践的示例，旨在帮助初学者掌握HTML5、CSS3以及少量JavaScript的基础应用。在这个项目中，开发者通过模仿小米官网的首页布局和样式，来提升自己的网页设计技能。...
静态小米官网页面.zip
12-05
html+css前端纯静态小米官网首页，不包含javascript，有二级列表，没有页面跳转，布局清晰，效果良好
仿小米商城html网页源码
03-31
仿小米商城html网页源码，包括主页和详情页、购物页面，等等。内容非常丰富，适宜做学习商城网站前端页面参考，源码很棒，建议下载。
一千行代码实现高仿小米网站(草稿)
08-21
大一程序员一千行代码实现高仿小米网站（草稿），实现了绝大部分的效果
小米网站首页网页源码
11-26
小米商城网络源代码参考，
仿小米商城wed练习HTML+css
05-15
里面有完整的小米商城wed代码，是学wed时的练习，没有登陆注册，其他轮播，下拉列表都有，基本和小米2020的没有不同，需要的可以下载直接用
小米官网的静态页面33
03-14
对于前端页面课程设计练习，包括对HTML和CSS的使用
仿小米手机官网-html页面实现
02-18
仿小米手机商城的全套页面。包含首页,订单页,列表页,商品详情页,个人中心,购物车,等等几十个页面。 有轮播的实现，demo 基于html css 实现小米官网部分内容搭建。基本功能都实现了
小米网页静态实现.rar
06-26
模仿小米网站制作的一个静态网页，采用了html+css+js的方法，内涵详细源码。有些地方使用了bootstrap框架，整体页面设计不错，包含了所有源代码文件以及图片。
仿小米官网html源码.zip
09-23
学了前端一周后，自己制作的仿小米官网，适合初学者，不追求效率的做法，会有一些小bug,但总体模仿了小米官网的特效等，使用jquery，函数都是非常容易理解的，非常适合刚学的朋友哟。
小米商城首页静态页面（CSS&HTML）
06-10
本资源面向的对象主要为前端初学者，已经学完CSS和HTML的同学可以参考使用
创建一个静态博客网页，需要怎么做
03-01
创建一个静态博客网页，可以按照以下步骤进行： 1. 选择合适的静态网页生成器：可以选择像Jekyll、Hexo、Hugo等静态网页生成器，也可以选择直接使用静态网页模板，如GitHub Pages提供的模板。 2. 选择合适的主题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值