Day37 小米商城网页htmlcss实践

最新推荐文章于 2022-11-14 09:39:48 发布
最新推荐文章于 2022-11-14 09:39:48 发布
阅读量390 收藏 3
点赞数 1
文章标签： html servlet 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_70432149/article/details/126843336
版权

html：

<!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>小米商城</title>
    <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon" />
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/font_2960521_rqz39d8moo.css"
    />
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/topnav.css" />
    <link rel="stylesheet" href="../css/header.css" />
    <link rel="stylesheet" href="../css/banner.css" />
    <link rel="stylesheet" href="../css/main.css" />
    <link rel="stylesheet" href="../css/foot.css" />
    <link rel="stylesheet" href="../css/rm.css" />
  </head>
  <body>
    <!-- 顶部导航-->
    <div class="topnav">
      <div class="container clearfix">
        <!-- 头部左侧 -->
        <ul class="fl topnav-menu">
          <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="">下载app</a></li>
          <li><a href="">智能生活</a></li>
          <li><a href="">Select Location</a></li>
        </ul>
        <!-- 头部右侧 -->
        <div class="fr">
          <ul class="topnav-menu fl">
            <li><a href="">登录</a></li>
            <li><a href="">注册</a></li>
            <li><a href="">消息通知</a></li>
          </ul>
          <!-- 购物车 -->
          <div class="car fl">
            <a href="">
              <i class="iconfont i-car fl"></i>
              <p class="fl">购物车(10)</p>
            </a>
            <div class="topnav-detail">购物车中还没有商品，赶紧选购吧！</div>
          </div>
          <!-- 购物车详情 -->
        </div>
      </div>
    </div>
    <!-- 页面头部 -->
    <div class="header">
      <div class="container clearfix">
        <a href="" class="hearder-logo fl">
          <h1>小米商城</h1>
        </a>
        <div class="header-menu fl">
          <a href="">小米手机</a>
          <a href="">红米手机</a>
          <a href="">电视</a>
          <a href="">笔记本</a>
          <a href="">平板</a>
          <a href="">家电</a>
          <a href="">路由器</a>
          <a href="">服务</a>
          <a href="">社区</a>
          <!-- 给a元素也加左浮动原因： 
           行级元素宽高不能设置，并且解决并排有空格的问题-->
          <!-- 二级菜单 -->
          <div class="header-submenu">
            <div class="container clearfix">
              <a href="" class="fl">
                <div class="header-cover">
                  <img src="../img/product.webp" alt="" />
                </div>
                <div class="header-name">RedMi Note 11 5G</div>
                <div class="header-price">1999元起</div>
              </a>
              <a href="" class="fl">
                <div class="header-cover">
                  <img src="../img/product.webp" alt="" />
                </div>
                <div class="header-name">RedMi Note 11 5G</div>
                <div class="header-price">1999元起</div>
              </a>
              <a href="" class="fl">
                <div class="header-cover">
                  <img src="../img/product.webp" alt="" />
                </div>
                <div class="header-name">RedMi Note 11 5G</div>
                <div class="header-price">1999元起</div>
              </a>
              <a href="" class="fl">
                <div class="header-cover">
                  <img src="../img/product.webp" alt="" />
                </div>
                <div class="header-name">RedMi Note 11 5G</div>
                <div class="header-price">1999元起</div>
              </a>
              <a href="" class="fl">
                <div class="header-cover">
                  <img src="../img/product.webp" alt="" />
                </div>
                <div class="header-name">RedMi Note 11 5G</div>
                <div class="header-price">1999元起</div>
              </a>
              <a href="" class="fl">
                <div class="header-cover">
                  <img src="../img/product.webp" alt="" />
                </div>
                <div class="header-name">RedMi Note 11 5G</div>
                <div class="header-price">1999元起</div>
              </a>
            </div>
          </div>
        </div>
        <!-- 搜索区域 -->
        <form class="header-search fr">
          <input class="fl" type="text" placeholder="手机" />
          <button class="header-searchicon fl">
            <i class="iconfont i-fangdajing"></i>
          </button>
          <div class="header-suggest">
            <a href="">全部商品</a>
            <a href="">平板</a>
            <a href="">加湿器</a>
            <a href="">笔记本</a>
            <a href="">好吃滴</a>
          </div>
        </form>
      </div>
    </div>
    <!-- 主页面横幅区域 -->
    <div class="banner container">
      <a href="" class="cover"> <img src="../img/banner.jpeg" alt="" /></a>
      <div class="banner-left">
        <i class="iconfont i-left"></i>
      </div>
      <div class="banner-right">
        <i class="iconfont i-right"></i>
      </div>
      <div class="banner-bots">
        <span class="active"></span>
        <span></span>
        <span></span>
      </div>
      <!-- 主页面菜单栏 -->
      <ul class="banner-menu container">
        <li>
          <div class="banner-menu-item clearfix">
            <span class="fl">手机</span>
            <i class="iconfont i-right fr"></i>
          </div>
          <div class="banner-sub-menu">
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
            <a href="" class="fl">
              <img src="../img/mobile.webp" alt="" class="fl" />
              <span class="fl">Note 11 Pro 系列</span>
            </a>
          </div>
        </li>
        <li>
          <div class="banner-menu-item clearfix">
            <span class="fl">电视</span>
            <i class="iconfont i-right fr"></i>
          </div>
          <div class="banner-sub-menu">
            <a href="" class="fl">
              <img src="../img/tv.webp" alt="" class="fl" />
              <span class="fl">Redmi 智能电视X65 2022款</span>
            </a>
            <a href="" class="fl">
              <img src="../img/tv.webp" alt="" class="fl" />
              <span class="fl">Redmi 智能电视X65 2022款</span>
            </a>
            <a href="" class="fl">
              <img src="../img/tv.webp" alt="" class="fl" />
              <span class="fl">Redmi 智能电视X65 2022款</span>
            </a>
            <a href="" class="fl">
              <img src="../img/tv.webp" alt="" class="fl" />
              <span class="fl">Redmi 智能电视X65 2022款</span>
            </a>
            <a href="" class="fl">
              <img src="../img/tv.webp" alt="" class="fl" />
              <span class="fl">Redmi 智能电视X65 2022款</span>
            </a>
            <a href="" class="fl">
              <img src="../img/tv.webp" alt="" class="fl" />
              <span class="fl">Redmi 智能电视X65 2022款</span>
            </a>
            <a href="" class="fl">
              <img src="../img/tv.webp" alt="" class="fl" />
              <span class="fl">Redmi 智能电视X65 2022款</span>
            </a>
            <a href="" class="fl">
              <img src="../img/tv.webp" alt="" c
最低0.47元/天 解锁文章
Crimson418
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小米商城前端页面显示html设计
06-11
小米商城页面设计，对小白友好的设计示例，有需要的可以看看
HTML5期末大作业：商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
02-24 3846
HTML5期末大作业：商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业
仿小米商城html网页源码
03-31
仿小米商城html网页源码，包括主页和详情页、购物页面，等等。内容非常丰富，适宜做学习商城网站前端页面参考，源码很棒，建议下载。
Html——小米商城网页实战（二）
weixin_42511413的博客
10-22 3172
接上篇博文内容，完成小米商城首页的简单h5实战。 首先总结一下整个首页中htm+css可能涉及的知识点：首先使用最多的就是定位（position），我们要懂得相对定位和绝对定位的区别（近期会针对该元素总结一篇博文），其次另一个需要注意的就是元素的隐藏与悬停显示，需要通过visibility来设置。除此之外，可能还会涉及元素的选择器:nth-child()属性。做出的效果图如下（可能宽高上与原网页有细微差别）： 本文先展示相关的css设置，最后展示html代码。 一、导航栏（nav-bar） nav-bar.
HTML实训之小米商城首页
柚咖小窝
08-03 2905
html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="index.css" /> <link rel="st...
HTML678day_htmlCSS_前端基础_
10-01
黑马前端课程第一阶段就业班学习资料，第6天-第8天内容
day05_html_js_css_
09-29
实现动画效果，并且可以运用到生活中的许多案例
day1_html网页_connect_
10-01
qt程序以及常用控件 connect函数的语法
高级软件人才培训专家-day01-HTML-CSS
最新发布
03-10
高级软件人才培训专家-day01-HTML-CSS
day10-HTML5&CSS3提高.pdf
10-11
day10-HTML5&CSS3提高.pdf
小米官网HTML5
12-04
仅供初学者巩固基础，交流和学习。跟案例为模仿小米官网用于传授HTML5基础课程学习。
前端web结课作业 小米商城 纯HTML+CSS
06-20
本人原创，可能会有一些小bug但是我没发现有bug 所有文件代码以及所需照片和效果图都在压缩包内
用HTML+CSS完成的小米商城界面
11-23
用HTML+CSS完成的小米商城界面，用DIV+CSS搭好框架，JS写好输入框事件。内附有字体和图片
小米商城首页静态页面（CSS&HTML）
06-10
本资源面向的对象主要为前端初学者，已经学完CSS和HTML的同学可以参考使用
【html+css】小米商城学习笔记（22/10/3-22/10/4）
weixin_56105633的博客
10-04 466
小米商城学习笔记（22/10/3-22/10/4） 1.学习网页 2.css基础知识 3.代码相关 1.画三角形 2.鼠标悬停有二维码 3.图标微移 4.去input的样式 5.鼠标悬停hover和鼠标点击focus 6.悬停显示下拉窗口 7.写竖线(分割线) 8.图片保持大小 9.实现图片的切换（类似轮播图，但是效果不是很好)p=7&spm_id_from=pageDriver&vd_source=e3117f7b1f427d925021788f8bf0b81b
小米官网学习笔记
weixin_42781960的博客
02-20 298
这个练习是纯CSS，HTML仿写的小米官网（部分） 这个练习中主要就是对定位，浮动的一些练习 这个练习中学习到的一些经验 clearfix对于高度塌陷的修复只能用于因为浮动引起的塌陷，不能修改因为定位引起的塌陷，由绝对定位引起的高度塌陷必须要给父元素指定高度 左边的菜单栏看起来是和banner是在同一个div中，但是这里的这个菜单栏是和全部商品分类有关系的，当鼠标停留在全部商品分类的时候，这个菜单栏才会显示，所以这里需要把分类菜单栏写在这个全部商品分类的li标签下，然后通过绝对定位来改变位置 导航
CSS+HTML - 搭建小米商城首页 - 总结
热门推荐
LIN的博客
10-10 1万+
目录 第三方字体样式 字段间分割线的样式实现 搭建网站前的reset操作 鼠标悬浮出现浮框 - 购物车部分例子 - 重点步骤总结 块与块之间的分割线 块颜色的根据位置不同而不同 悬浮上移+阴影 第三方字体样式 fontawesome - 字体库 iconfont - 字体库 在浏览器中按f12打开【开发人员工具】，找到【console(控制台)】 输入以下代码，再...
web课程设计——仿小米商城(10个页面)HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作代码...
qq_365392777
11-14 1042
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐???????????????????????? ❤ ​​【作者主页——????获取更多优质源码】​​ ❤ 【web前端期末大作...
HTML与CSS之小米商城静态界面（未用JS版本）
m0_50481455的博客
04-16 1050
这是小米商城的无JS版本（纯静态页面）——如下： <!DOCTYP1E html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/xiaomi.css"> <style type="text/css"></style&gt
html和css静态网页制作
06-03
HTML是网页内容的结构化语言，CSS是网页样式的描述语言，二者结合可以实现静态网页制作。以下是制作静态网页的基本步骤： 1. 使用文本编辑器（如Notepad++）创建一个HTML文件，命名为index.html。 2. 在HTML文件中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值