WEB前端 开始学习 7.6

最新推荐文章于 2024-08-14 16:42:19 发布
最新推荐文章于 2024-08-14 16:42:19 发布
阅读量99 收藏
点赞数
文章标签： 大数据 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiangKJZ/article/details/125647609
版权

1.今天老师让我们介绍自己做的小米官网，和同学们比起来，我写的就有点不够看了，不过我的位置排在靠后位置，所以有很长的时间进行进行修改。最后的效果虽然不如好同学的，但也算是中规中矩

2.介绍的时候，思路不够清晰，讲的可能不尽如人意，也就中规中矩吧。程序思想还不够入脑，所以很乱，讲完自己都不知道说了什么。

3.最后的结果还是有些许不足，后面还要调整。

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="./小米.css">
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" type="text/css" media="screen"
        href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">

    <link rel="stylesheet" href="./js/swiper-master 2/package/swiper-bundle.min.css" />

    <script src="./js/swiper-master 2/package/swiper-bundle.min.js"></script>

</head>

<body>
    <header>
        <div id="h">
            <div class="h">
                <ul>
                    <li>
                        <a href="#">小米官网</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">小米商城</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">MIUI</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">ioT</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">云服务</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">天星数科</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">有品</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">小爱开放平台</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">企业团购</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">资质证照</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">协议规则</a><span class="s1">|</span>
                    </li>
                    <li style="width:70px">
                        <a href="#">下载app</a><span class="s1">|</span>
                        <div class="p">
                            <div class="R">
                                <img src="./download.png" alt="" />
                                <p>小米商城app</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="#">Select Location</a>
                    </li>
                </ul>
            </div>
            <div class="h2">
                <div><a href="#">
                        <i class="icon ion-ios-cart" style="margin-right:5px ;"></i>购物车<span>(0)</span></a>
                </div>
                <div class="p1">购物车中还没有商品，赶紧选购吧！</div>
            </div>
            <!-- 右边到头 -->
            <div class="h1">
                <ul>
                    <li>
                        <a href="#">登录</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">注册</a><span class="s1">|</span>
                    </li>
                    <li>
                        <a href="#">消息通知</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <section>
        <div class="mm">
            <a class="m" href="#"></a>
            <a href="#">
                <div class="t1"></div>
            </a>
            <div class="t">
                <input type="text">
                <button><i class="icon ion-search"></i></button>
            </div>
            <ul>
                <li style="width: 100px;"><a class="color" href="#">Xiaomi手机</a>
                    <div class="xiala2">
                        <ul>
                            <li class="Xiaomi12SUltra">
                                <a href="#">
                                    <div>Xiaomi 12S Ultra</div>
                                    <div style="color: orange;">5999元起</div>
                                </a>
                            </li>
                            <li class="Xiaomi12Spro">
                                <a href="#">
                                    <div>Xiaomi 12S pro</div>
                                    <div style="color: orange;">4999元起</div>
                                </a>
                            </li>
                            <li class="Xiaomi12S">
                                <a href="#">
                                    <div>Xiaomi 12S</div>
                                    <div style="color: orange;">3999元起</div>
                                </a>
                            </li>
                            <li class="Xiaomi12Spro-tianji">
                                <a href="#">
                                    <div>Xiaomi 12S pro天玑版</div>
                                    <div style="color: orange;">3999元起</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li style="width: 100px;"><a class="color" href="#">Redmi红米</a>
                    <div class="xiala3"></div>

                </li>
                <li style="width: 40px;"><a class="color" href="#">电视</a>
                    <div class="xiala4"></div>

                </li>
                <li style="width: 60px;"><a class="color" href="#">笔记本</a>
                    <div class="xiala5"></div>

                </li>
                <li style="width: 40px;"><a class="color" href="#">平板</a>
                    <div class="xiala6"></div>

                </li>
                <li style="width: 40px;"><a class="color" href="#">家电</a>
                    <div class="xiala7"></div>

                </li>
                <li style="width: 60px;"><a class="color" href="#">路由器</a>
                    <div class="xiala8"></div>

                </li>
                <li style="width: 80px;"><a class="color" href="#">服务中心</a>
                    <div class="xiala9"></div>

                </li>
                <li style="width: 40px;"><a class="color" href="#">社区</a>
                    <div class="xiala10"></div>

                </li>
            </ul>
        </div>
    </section>

    <main>
        <div class="g">
            <div class="gg">
                <ul>
                    <li><a href="#">手机<span>&gt;</span></a>
                        <div class="g1"></div>
                    </li>
                    <li><a href="#">电视<span>&gt;</span></a>
                        <div class="g2"></div>
                    </li>
                    <li><a href="#">笔记本</a>
                        <a href="#">平板<span>&gt;</span></a>
                        <div class="g3"></div>
                    </li>
                    <li><a href="#">出行</a>
                        <a href="#">穿戴<span>&gt;</span></a>
                        <div class="g4"></div>
                    </li>
                    <li><a href="#">耳机</a>
                        <a href="#">音箱<span>&gt;</span></a>
                        <div class="g5"></div>
                    </li>
                    <li><a href="#">家电<span>&gt;</span></a>
                        <div class="g6"></div>
                    </li>
                    <li><a href="#">智能</a>
                        <a href="#">路由器<span>&gt;</span></a>
                        <div class="g7"></div>
                    </li>
                    <li><a href="#">电源</a>
                        <a href="#">配件<span>&gt;</span></a>
                        <div class="g8"></div>
                    </li>
                    <li><a href="#">健康</a>
                        <a href="#">儿童<span>&gt;</span></a>
                        <div class="g9"></div>
                    </li>
                    <li><a href="#">生活</a>
                        <a href="#">箱包<span>&gt;</span></a>
                        <div class="g10"></div>
                    </li>
                </ul>
            </div>

            <div class="swiper">

                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#"><img src="./小米影像.png" alt="" /></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./小米手环.png" alt="" /></a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./xiaomi.png" alt="" /></a>
                    </div>
                </div>

                <div class="swiper-pagination"></div>


                <div class="swiper-button-prev prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
        <script>
            var mySwiper = new Swiper(".swiper", {
                autoplay: true,
                loop: true,

                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },

                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        </script>
        </div>
    </main>


    <footer>
        <div class="ff">
            <ul>
                <li>
                    <a href="#">
                        <i class="icon ion-clock"></i>
                        <p>保障服务</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="icon ion-ios-people"></i>
                        <p>企业团购</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="icon ion-ios-world"></i>
                        <p>F码通道</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="icon ion-clipboard"></i>
                        <p>米粉卡</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="icon ion-card"></i>
                        <p>以旧换新</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="icon ion-android-cart"></i>
                        <p>话费充值</p>
                    </a>
                </li>
            </ul>
            <a href="#">
                <div class="f">
                </div>
            </a>
            <a href="#">
                <div class="f1">
                </div>
            </a>
            <a href="#">
                <div class="f2">
                </div>
            </a>
        </div>
    </footer>

    <ul class="b">
        <li><a href="#"><i class="icon ion-ipad"></i>
                <p>手机APP</p>
            </a>

        </li>
        <li><a href="#"><i class="icon ion-ios-personadd-outline"></i>
                <P>个人中心</P>
            </a>
        </li>
        <li><a href="#"><i class="icon ion-wrench"></i>
                <p>售后服务</p>
            </a>
        </li>
        <li><a href="#"><i class="icon ion-headphone"></i>
                <p>人工客服</p>
            </a>
        </li>
        <li><a href="#"><i class="icon ion-ios-cart-outline"></i>
                <p>购物车</p>
            </a>
        </li>
    </ul>
    <div class="a">
    </div>
</body>

</html>

LiangKJZ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端“萌新”的更新 7.6
m0_72174649的博客
07-06 155
接上面一篇文章，本篇文章是上一篇的后续内容。
WEB前端 开始学习 7.5
LiangKJZ的博客
07-05 158
今天老师让我们介绍自己做的小米官网，和同学们比起来，我写的就有点不够看了，不过我的位置排在靠后位置，所以有很长的时间进行进行修改。最后的效果虽然不如好同学的，但也算是中规中矩...
小米官网项目制作——javascript知识分享上
DS153的博客
12-15 3062
前言 经过一些长时间的学习，我经过自己的努力，成功的进行了小米官网的主页和登录注册的页面的制作。这个过程更多的是对自己知识的总结和练习，实践出真理，只有做了才知道需要怎么去写代码的逻辑才可以写出我们需要的效果。今天我就给大家分享一下，小米官网主页的javascript的代码上需要书写注意的地方。 一、整体架构 首先，我们需要去看看小米官网的内容都有什么，我们可以直接前往官网查看它的内容：小米官网 我们可以看到有这么一些地方是我们值得注意的： 1.下滑的二维码 2.购物...
web前端学习笔记6
hanq2016的博客
05-06 810
web前端学习笔记，持续更新，非常完整，position定位
Web前端第七课
weixin_42132959的博客
03-10 273
一、行高:line-height css中，所有的行都有行高。盒模型的padding,绝对不是直接作用在文字上的，而是作用在“行”上的。 文字，是在自己的行里面居中的。比如，现在文字字号14px,行高为24px。那么文字上面有5px,下面会有5px。如果不能平分，下面的会比上面的多一个像素。 为了严格保证字在行里面居中，我们的工程师有一个约定：行高、字号，一般都是偶数。这样，它们的差 就是偶数，就...
HM全新大前端160G鼎新力作 V7.6 4000集课程 大前端全业务链+软件+课件+视频+职业规划
09-14
根据给定文件的信息，我们可以...通过以上概述可以看出，《HM全新大前端160G鼎新力作 V7.6 4000集课程》覆盖了从基础知识到高级技能的全面内容，旨在为学习者提供一条清晰的学习路径，并助力其在前端开发领域取得成功。
前端知识Token知识点笔记.pdf
05-31
7.6 Token的应用场景 Token不仅用于身份验证，还可以用于权限管理、API调用认证等场景。 7.7 Token的层级 Token的使用可能涉及多个层级，如应用层Token、API层Token等，用于不同范围的身份验证和授权。 本笔记是...
淘宝客系统juanpi7.6开源
01-12
4. **技术架构**：juanpi7.6系统可能基于常见的Web开发框架，如Spring Boot、Django或Node.js，使用MySQL或PostgreSQL作为数据库，前端可能采用React或Vue.js等现代JavaScript库。了解这些技术对于深入理解并改进...
centos7.6/7.7+zabbix4.4.7+grafana6.4.4安装指导最新版
04-24
在开始安装之前，需要关闭防火墙和 SELinux，以免干扰安装过程。 安装 Zabbix 1. 首先添加 Zabbix 仓库： ``` [root@localhost ~]# rpm -Uvh ...
志汇餐饮外卖小程序 7.6小程序前端+后端 开源版源码下载
05-03
【志汇餐饮外卖小程序 7.6】是一个开源的、专为餐饮行业设计的小程序解决方案，它涵盖了小程序前端和后端的完整代码，允许开发者进行自定义开发和二次定制，以满足不同餐饮商家的需求。这款小程序旨在提升餐厅的在线...
Spark MLlib 特征工程(上)
最新发布
08-14 1140
特征选择的动机，在于提取与预测标的关联度更高的特征，从而精简模型尺寸、提升模型泛化能力。特征选择可以从两方面入手，业务出发的专家经验和基于数据的统计分析。归一化的目的，在于去掉不同特征之间量纲的影响，避免量纲不一致而导致的梯度下降震荡、模型收敛效率低下等问题。归一化的具体做法，是把不同特征都缩放到同一个值域。在这方面，Spark MLlib 提供了多种归一化方法供开发者选择。
从零开始构建霸王餐返利APP的技术路线与挑战
微赚开发者技术分享博客
08-12 1444
构建霸王餐返利APP是一个复杂的过程，涉及到技术选型、系统设计、功能实现和用户体验等多个方面。通过精心设计的技术路线和对挑战的克服，可以打造出一个成功的产品。本文著作权归聚娃科技微赚淘客系统开发者团队，转载请注明出处！
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 714
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
SparkSQL
m0_73745224的博客
08-13 897
sparkSQL操作各种数据
[免费]适用于 Windows 10 的十大数据恢复软件
qq_23996309的博客
08-12 1132
Windows 10 是 Microsoft 开发的跨平台和设备应用程序操作系统。它启动速度更快，具有熟悉且扩展的“开始”菜单，甚至可以在多台设备上以新的方式工作。因此，Windows 10 非常受欢迎，我们用它来保存照片、音乐、文档和更多文件。但有时，由于意外删除、格式化、清空回收站、磁盘显示为 RAW、病毒攻击等原因，数据会丢失。此时，适用于 Windows 10 的数据恢复软件是您的最佳选择。
Kafka 的 ISR 机制
weixin_43281498的博客
08-11 383
在 0.9.x 之前的版本，Kafka 有一个核心的参数 :replica.lag.max.messages 表示如果 Follower 落后 Leader 的消息数量超过了这个参数值，就认为 Follower 就会从 ISR 列表里移除。由于 ISR 中的副本与之前的领导副本保持同步，新的领导副本能够继续提供服务，而不会丢失数据。当追随者副本追上了领导副本的日志进度（即达到了与领导副本相同的日志偏移量），领导副本会将其重新加入ISR。具体的 ISR 列表维护机制在不同的 Kafka 版本中有所变化。
Elasticsearch 创建索引库指南
一起coding，一起嗨。
08-11 352
Elasticsearch 创建索引库指南
【论文阅读笔记】ZooKeeper: Wait-free coordination for Internet-scale systems
pursuit的博客
08-11 437
这篇论文介绍了ZooKeeper，一个用于协调分布式应用进程的服务。ZooKeeper旨在提供一个简单且高性能的内核，用于构建更复杂的客户端协调原语。它整合了组消息传递、共享寄存器和分布式锁服务的元素，形成了一个复制的、集中式的服务。Zookeeper提供了一个接口，具有共享寄存器的无等待特性和类似分布式文件系统缓存失效的事件驱动机制，以提供简单而强大的协调服务。ZooKeeper还保证了每个客户端请求的FIFO执行和所有更改ZooKeeper状态的请求的线性化。分布式系统中的基本协调机制配置。
docker安装elasticsearch
博客
08-10 965
学过docker的小伙伴们，都知道用docker-compose也可以将es和kinbana容器互联，这里不用是因为，可能后续小伙伴们只需要用到es不需要kibana，所以这样便于改造。在互联网项目中，在网络传输的速度很快，所以很多语言是不允许在网络上传递的，如关于宗教、政治等敏感话题，同时一些语气助词也可以忽略，那么我们在搜索时也应该忽略当前词汇。出现了很多新的词语，在原有的词汇列表中并不词在。上面的这个GET指的是GET请求，_search指的是搜索功能，下面的就是DSL语句，表示查询所有的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值