WEB前端 开始学习 7.4

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

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>小米商城 - Xiaomi 12、Redmi K50、MIX FOLD，小米电视官方网站</title>
    <link rel="icon" href="./img/favicon.ico" type="image/x-icon" />
    <!-- 引入重制样式表 -->
    <link rel="stylesheet" href="./css/reset.css" />
    <!-- 引入公共的样式 -->
    <link rel="stylesheet" href="./css/base.css" />
    <!-- 引入主体样式 -->
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 引入图标字体的样式 -->
    <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css" />
    <!-- 引入轮播插件 -->
    <link rel="stylesheet" href="./js/swiper-master 2/package/swiper-bundle.min.css" />
    <!-- 引入轮播插件js -->
    <script src="./js/swiper-master 2/package/swiper-bundle.min.js"></script>
  </head>
  <body>
    <header>
      <div id="top-bar-warp">
        <div class="top-bar w">
          <ul class="top-bar-left">
            <li><a href="#">小米官网</a></li>
            <li class="line">｜</li>
            <li><a href="#">小米商城</a></li>
            <li class="line">｜</li>
            <li><a href="#">MIUI</a></li>
            <li class="line">｜</li>
            <li><a href="#">LoT</a></li>
            <li class="line">｜</li>
            <li><a href="#">云服务</a></li>
            <li class="line">｜</li>
            <li><a href="#">天星数科</a></li>
            <li class="line">｜</li>
            <li><a href="#">小爱开放平台</a></li>
            <li class="line">｜</li>
            <li><a href="#">企业团购</a></li>
            <li class="line">｜</li>
            <li><a href="#">资质证照</a></li>
            <li class="line">｜</li>
            <li><a href="#">协议规则</a></li>
            <li class="line">｜</li>
            <li>
              <a href="#" class="app-a"
                >下载app
                <div class="app-wrap">
                  <div class="QRcode">
                    <img src="./img/download.png" alt="" />
                    <p>小米商城app</p>
                  </div>
                </div>
              </a>
            </li>
            <li class="line">｜</li>
            <li><a href="#">Select Location</a></li>
          </ul>
          <ol class="top-bar-right">
            <li><a href="#">登录</a></li>
            <li class="line">｜</li>
            <li><a href="#">注册</a></li>
            <li class="line">｜</li>
            <li><a href="#">消息通知</a></li>
            <li class="line">｜</li>
            <li><a href="#">购物车</a></li>
          </ol>
        </div>
      </div>
      <!-- 快速导航区 -->
      <nav id="fast-nav-wrap">
        <ul class="w fast-nav">
          <li class="nav-left">
            <a href="#">
              <img src="./img/logo-mi2.png" alt="" />
            </a>
          </li>
          <li class="nav-center">
            <div class="allshop">
              <a href="#">全部商品分类</a>
            </div>
            <div><a href="#">Xiaomi手机</a></div>
            <div><a href="#">Redmi红米</a></div>
            <div><a href="#">电视</a></div>
            <div><a href="#">笔记本</a></div>
            <div><a href="#">平板</a></div>
            <div><a href="#">家电</a></div>
            <div><a href="#">路由器</a></div>
            <div><a href="#">服务中心</a></div>
            <div><a href="#">社区</a></div>
            <!-- 设置一个弹出层 -->
            <section class="popups"></section>
          </li>
          <li class="nav-right">
            <form action="#">
              <input type="text" />
              <button>
                <i class="fa fa-search" aria-hidden="true"></i>
              </button>
            </form>
          </li>
        </ul>
      </nav>
    </header>
    <!-- 主体的内容 -->
    <main>
      <!-- nav-banner -->
      <div class="w">
        <!-- 左侧导航 -->
        <div class="left-nav-warp">
          <ol class="left-nav">
            <li>
              <a href="#">手机</a>
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </li>
            <li>
              <a href="#">电视</a>
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </li>
            <li>
              <a href="#">笔记本 平板</a>
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </li>
            <li>
              <a href="#">出行 穿戴</a>
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </li>
            <li>
              <a href="#">耳机 音响</a>
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </li>
            <li>
              <a href="#">家电</a>
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </li>
            <li>
              <a href="#">智能 路由器</a>
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </li>
            <li>
              <a href="#">电源 配件</a>
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </li>
            <li>
              <a href="#">健康 儿童</a>
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </li>
            <li>
              <a href="#">生活 箱包</a>
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </li>
          </ol>
        </div>
        <!-- banner -->
        <div class="swiper">
          <!-- 图片 -->
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="#"><img src="./img/banner img/1.webp" alt="" /></a>
            </div>
            <div class="swiper-slide">
              <a href="#"><img src="./img/banner img/2.webp" alt="" /></a>
            </div>
            <div class="swiper-slide">
              <a href="#"><img src="./img/banner img/3.jpg" 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>

      <!-- 广告区 -->
      <ol class="adv w clearfix">
        <li class="six-adv">
          <div>
            <a href="#">
              <img src="./img/sub-nav-img/img1.png" alt="" />
              <p>保障服务</p>
            </a>
          </div>
          <div>
            <a href="#">
              <img src="./img/sub-nav-img/img2.png" alt="" />
              <p>企业团购</p>
            </a>
          </div>
          <div>
            <a href="#">
              <img src="./img/sub-nav-img/img3.png" alt="" />
              <p>F码通道</p>
            </a>
          </div>
          <div>
            <a href="#">
              <img src="./img/sub-nav-img/img4.png" alt="" />
              <p>米粉卡</p>
            </a>
          </div>
          <div>
            <a href="#">
              <img src="./img/sub-nav-img/img5.png" alt="" />
              <p>以旧换新</p>
            </a>
          </div>
          <div>
            <a href="#">
              <img src="./img/sub-nav-img/img6.png" alt="" />
              <p>话费充值</p>
            </a>
          </div>
        </li>
        <li class="img-list">
          <img src="./img/sub-nav-img/img2-1.jpg" alt="" />
          <img src="./img/sub-nav-img/img2-2.jpg" alt="" class="img-center" />
          <img src="./img/sub-nav-img/img2-3.png" alt="" />
        </li>
      </ol>
    </main>
  </body>
</html>

LiangKJZ
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Django web开发(一) - 前端
每天进步亿点点
11-30 6万+
Django学习 Web框架 Python语言
1讲项目实战banner和nav布局
06-06 1047
#1讲项目实战banner和nav布局   湖南海外旅游    *{margin:0px;padding:0px;}  #Top{width:100%;height:149px;background:url("images/headbg.jpg");}/*背景图片headbg平铺满整个Top盒子*/  #Top .head{width:1000px;he
京东首页之nav导航栏、banner广告部分、footer备案号
Andone_hsx的博客
01-13 4508
项目回顾：上一篇博文主要讲了如何实现京东首页的页面顶部和Logo&搜索框部分； 里面主要知识：利用列表作划分鲜明的文字部分，相对定位和绝对定位去实现弹框效果。今天我们这篇博文主要是简单介绍京东首页的banner广告部分和左侧弹窗效果实现。 下面是今天要实现的效果图： 首先我们将先对nav导航栏部分进行分析： （代码稍后一起给出！）banner广告部分页面布局分析： （具体细节实
web前端开发学习之路
weixin_46228551的博客
07-04 189
前端开发学习之路
2024年Web前端最新CSS学习笔记，web可视化开发
2401_84434237的博客
05-05 762
天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。然而阴差阳错，灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王，这调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。然而面对众人对哪吒的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔，他将何去何从哪吒之魔童降世结果图展示4.4阴影。
vito的Web前端学习 Day10（JavaScript）
vitocool的博客
03-04 744
1 JavaScript简介 1.1 JavaScript组成 1.2 JavaScript特点 1.2.1 解释型语言 1.2.2 动态语言 1.2.3 类似于 C 和 Java 的语法结构 1.2.4 基于原型的面向对象 2 HelloWorld 3 JS编写位置 4 JS基本语法 5 字面量和变量 6 标识符 7 数据类型 7.1 String字符串 7.2 Number数值 7.2.1 typeof 7.2.2Number.MAX_VALUE 7.2..
web前端啥也不是的日常更新 7.4
m0_72174649的博客
07-04 81
今天主要的就是渐变色和放射渐变，内容不算太多，用四个字概括就是：简单易懂。
前端学习- CSS1
weixin_57896572的博客
08-30 813
前端黑马pink老师，CSS基础第一部分学习笔记。
前端学习--React部分
AGW.的博客
05-28 1669
主要介绍React。本文是根据尚硅谷天禹老师的Reac课程，如果有不理解的地方请移步到B站查找并观看相应课程。
Web前端设计与开发技术-课件-第7章制作表单页面完整.pptx
11-14
Web前端设计与开发技术-课件-第7章制作表单页面完整.pptx 本资源是关于Web前端设计与开发技术的课件，第7章专门讲解制作表单页面的技术。表单是网页中收集信息的重要组件，可以用于调查、订购和搜索等多种场景。 ...
linux环境下web服务器搭建完整版
02-22
在Linux环境下搭建Web服务器是一项基础且重要的IT...随着需求的增长，你可以进一步学习负载均衡、缓存机制、安全策略等高级主题，提升Web服务的可用性和安全性。记得定期更新服务器软件，确保系统的安全性和稳定性。
Web前端框架应用：第7章 Vue开发环境-插件.pptx
06-07
学习目标 目录 目录 知识架构 7.1 Vue CLI脚手架工具 知识架构 7.2 插件 知识架构 7.3 CLI服务和配置文件 知识架构 7.4 环境变量和模式 知识架构 7.5 静态资源管理 7.2 插件 在Vue CLI中使用了一套基于插件的架构，...
Web前端框架应用：第7章 Vue开发环境-静态资源管理.pptx
06-07
学习目标 目录 目录 知识架构 7.1 Vue CLI脚手架工具 知识架构 7.2 插件 知识架构 7.3 CLI服务和配置文件 知识架构 7.4 环境变量和模式 知识架构 7.5 静态资源管理 7.5 静态资源管理 Vue CLI 2.x中，webpack默认存放...
Web前端框架应用：第7章 Vue开发环境-环境变量及模式.pptx
06-07
学习目标 目录 目录 知识架构 7.1 Vue CLI脚手架工具 知识架构 7.2 插件 知识架构 7.3 CLI服务和配置文件 知识架构 7.4 环境变量和模式 知识架构 7.5 静态资源管理 7.4 环境变量和模式 环境变量 在一个项目的开发...
prometheus
2201_75912662的博客
08-18 954
无人驾驶车辆运行中要记录的经度，纬度，速度，方向，旁边物体的距离等等。大都为插入操作较多且无更新的需求，插入数据多，每秒钟插入数据可到达千万甚至是上亿条。分析过去时序数据可以做成多纬度报表，揭示其趋势性、规律性、异常性。分析时序数据趋势可以做大数据分析，机器学习，实现预测和预警。按照时间顺序记录系统、设备状态变化的数据被称为时序数据。不依赖分布式存储，单个服务器节点是自主的。数据带有时间属性，且数据量随着时间递增。某一个地区的各车辆的行驶轨迹数据。模型拉去时间序列数据。可以查看到监控的数据。
每日一问：Kafka消息丢失与堆积问题分析（简化版）
upgrador的博客
08-17 578
在本篇博客中，我们将深入探讨 Kafka 中常见的两大问题：消息丢失和消息堆积。首先，我们将简要介绍 Kafka 的基本工作原理，随后分别分析消息丢失和堆积的原因，并提供针对性的解决方案。
数字（智）化采购系统优点_亮点_应用场景
xinyuan_123456的博客
08-19 318
数字化采购系统研发商，系统融合云原生、微服务、大数据、人工智能、物联网等先进技术，构建业务中台、数据中台、AI中台三大核心基座，以采购为切入点，结合供应链管理理念，为招采供应链提供交易、监管、数据、服务、运营为一体的全流程数智化解决方案
Linux之RabbitMQ集群部署
最新发布
m0_54563444的博客
08-21 833
消息中间件也可以称消息队列，是利用高效可靠的消息传递机制进行异步的数据传输并基于数据通信来进行分布式系统的集成。当下主流的消息中间件有等。Kafka是LinkedIn开源的分布式发布-订阅消息系统，目前归属于Apache顶级项目。Kafka主要特点是追求高吞吐量(单机可达到10万级)时效性是毫秒级的，一开始的目的就是用于日志收集和传输。对消息的重复、丢失、错误没有严格要求，适合产生大量数据的互联网服务的数据收集业务。
搜狐WEB前端技术标准与应用规范
"搜狐WEB标准_前端技术应用规范" 本文档详细阐述了搜狐公司在其媒体频道和产品中实施的WEB标准及前端技术应用规范，旨在优化网站结构、表现和交互行为，确保广告、多媒体内容以及浏览器兼容性的统一。文档遵循XHTML...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值