小米商城导航栏-grid布局

最新推荐文章于 2023-07-15 00:20:55 发布
最新推荐文章于 2023-07-15 00:20:55 发布
阅读量262 收藏 4
点赞数
分类专栏： 弹性盒子学习 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66757598/article/details/124806342
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城导航栏</title>
    <style>
        body{
            /*背景颜色渐变*/
            background-image: linear-gradient(to right,skyblue,#fff);
            margin: 0;
            
        }
        a{
            text-decoration: none;
        }
        .menu{
            width: 230px;
            height: 420px;
            padding: 20px 0;
            background-color: rgba(0,0,0,0.5);
            margin: 50px 0 0 50px;
            position: relative;
        }
        .menu .item{
            height: 42px;
            /*border: 1px solid red;*/
            color: #fff;
            font-size: 14px;
            line-height: 42px;  /*文字居中*/
            padding-left: 30px;
            background: url("images/grid/right-jiantou.png") no-repeat 200px 10px;
            cursor: pointer;

        }
        .menu .item:hover{
            background-color: #ff6700;
            background-image: url("images/grid/right-jiantou2.png");
        }
        .menu .item .nav{
            min-width: 250px;
            height: 460px;
            background-color: #fff;
            border: 1px solid #666;
            position: absolute;
            left: 230px;
            top:0px;
            box-sizing: border-box;  /*此项设置后，内容盒子长度将会 称为设置的长度，包含border的宽度*/
            display: grid;
            grid-template-rows: repeat(6, 1fr);/*6行，平均分距离*/
            /*grid-template-columns: 250px;*/  /*每列宽度为250px*/
            grid-auto-flow: column;  /*内容排列方式，默认按行，改为按列排列，排满换列*/
            grid-auto-columns: 250px;  /*影视网格宽度都为250px*/
            padding: 20px ;
            display: none;
        }
        .item .nav a{
            /*border: 1px solid red;*/
            color: #000;
            display: flex;
            align-items: center; /*防止盒子内容高度随父元素一样，设置后图片高度将会是图片设置高度*/
        }
        .item .nav a:hover{
            color: #ff6700;
        }
        .item .nav a img{
            margin-right: 10px;
        }
        .item:hover .nav{
            display: grid;  /*鼠标放上显示内容区*/
        }
    </style>
</head>
<body>
  <div class="menu">
      <div class="item">手机
        <div class="nav">
            <a href=""><img src="images/grid/grid-mi-01.webp" width="40" alt="">黑鲨5 pro</a>
            <a href=""><img src="images/grid/grid-mi-02.webp" width="40" alt="">黑鲨5 pro</a>
            <a href=""><img src="images/grid/grid-mi-03.webp" width="40" alt="">黑鲨5 pro</a>
            <a href=""><img src="images/grid/grid-mi-04.webp" width="40" alt="">黑鲨5 pro</a>
            <a href=""><img src="images/grid/grid-mi-05.webp" width="40" alt="">黑鲨5 pro</a>
            <a href=""><img src="images/grid/grid-mi-06.webp" width="40" alt="">黑鲨5 pro</a>
            <a href=""><img src="images/grid/grid-mi-07.webp" width="40" alt="">黑鲨5 pro</a>
            <a href=""><img src="images/grid/grid-mi-08.webp" width="40" alt="">黑鲨5 pro</a>
            <a href=""><img src="images/grid/grid-mi-09.webp" width="40" alt="">黑鲨5 pro</a>
            <a href=""><img src="images/grid/grid-mi-10.webp" width="40" alt="">黑鲨5 pro</a>
            <a href=""><img src="images/grid/grid-mi-11.webp" width="40" alt="">黑鲨5 pro</a>
            <a href=""><img src="images/grid/grid-mi-12.webp" width="40" alt="">黑鲨5 pro</a>
        </div>
      </div>
      <div class="item">电脑
          <div class="nav">
              <a href=""><img src="images/grid/grid-mi-01.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-02.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-03.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-04.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-05.webp" width="40" alt="">黑鲨5 pro</a>

          </div>
      </div>
      <div class="item">笔记本 平板
          <div class="nav">
              <a href=""><img src="images/grid/grid-mi-01.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-02.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-03.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-04.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-05.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-06.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-07.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-08.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-09.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-10.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-11.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-12.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-07.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-08.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-09.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-10.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-11.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-12.webp" width="40" alt="">黑鲨5 pro</a>

          </div>
      </div>
      <div class="item">家电
          <div class="nav">
              <a href=""><img src="images/grid/grid-mi-01.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-02.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-03.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-04.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-05.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-06.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-07.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-08.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-09.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-10.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-11.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-12.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-09.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-10.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-11.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-12.webp" width="40" alt="">黑鲨5 pro</a>

          </div>
      </div>
      <div class="item">出行
          <div class="nav">
              <a href=""><img src="images/grid/grid-mi-01.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-02.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-03.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-04.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-05.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-06.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-07.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-08.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-09.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-10.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-11.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-12.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-10.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-11.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-12.webp" width="40" alt="">黑鲨5 pro</a>

          </div>
      </div>
      <div class="item">电脑配件
          <div class="nav">
              <a href=""><img src="images/grid/grid-mi-01.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-02.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-03.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-04.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-05.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-06.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-07.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-08.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-09.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-10.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-11.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-12.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-05.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-06.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-07.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-08.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-09.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-10.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-11.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-12.webp" width="40" alt="">黑鲨5 pro</a>

          </div>
      </div>
      <div class="item">健康 儿童
          <div class="nav">
              <a href=""><img src="images/grid/grid-mi-01.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-02.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-03.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-04.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-05.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-06.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-07.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-08.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-09.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-10.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-11.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-12.webp" width="40" alt="">黑鲨5 pro</a>
          </div>
      </div>
      <div class="item">耳机 音响
          <div class="nav">
              <a href=""><img src="images/grid/grid-mi-01.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-02.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-03.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-04.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-05.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-06.webp" width="40" alt="">黑鲨5 pro</a>
          </div>
      </div>
      <div class="item">生活
          <div class="nav">
              <a href=""><img src="images/grid/grid-mi-01.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-02.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-03.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-04.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-05.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-06.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-07.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-08.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-09.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-10.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-11.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-12.webp" width="40" alt="">黑鲨5 pro</a>

          </div<a href=""><img src="images/grid/grid-mi-11.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-12.webp" width="40" alt="">黑鲨5 pro</a>

          </div>
      </div>
      <div class="item">背包
          <div class="nav">
              <a href=""><img src="images/grid/grid-mi-01.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-02.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-03.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-04.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-05.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-06.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-07.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-08.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-09.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-10.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-11.webp" width="40" alt="">黑鲨5 pro</a>
              <a href=""><img src="images/grid/grid-mi-12.webp" width="40" alt="">黑鲨5 pro</a>
          </div>
      </div>
  </div>
</body>
</html>

 

尖十利刃
关注
专栏目录
小米官网导航栏代码实现
01-30
小米官网 导航栏 HTML页面
小米商城导航栏
qq_53912756的博客
05-26 998
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" conte.
小米商城1-导航栏
weixin_30912051的博客
02-14 294
1. 转载于:https://www.cnblogs.com/studybrother/p/10375420.html
案例-小米商城导航栏
qq_43632490的博客
05-17 353
<!DOCTYPE html> <html lang="zh-CN"> <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&gt
小米商城顶部导航栏
m0_60696519的博客
09-22 674
<header> <!-- 导航栏top部分 开始--> <div class="topbar"> <div class="topbar-nav"> <div class="top_nav-left"> <a rel="nofollow" href="">小米商城</a> <span class="sep">|</span> ...
小米商城前端页面显示html设计
06-11
在小米商城页面，顶部导航栏通常包含多个链接，方便用户快速访问不同产品类别或服务。 5. **图像展示**：在商品展示中，标签用于插入图像。通过src属性指定图像源，alt属性提供替代文字，以便在图像无法加载时提供...
仿小米商城html网页源码
03-31
同时，使用Flexbox或Grid布局能更好地实现页面元素的排列和对齐，使得网页在不同设备上都有良好的显示效果。 再次，JavaScript（JS）是网页动态功能的关键，它可以处理用户交互、数据操作和页面更新。在这个源码中...
THML+CSS静态页面实战项目-小米商城
05-20
对于小米商城的头部导航栏，我们可以使用`position: fixed`实现固定在顶部的效果；商品列表部分可能需要使用`display: flex`或`display: grid`来实现灵活的多列布局；而页脚则可以采用`position: absolute`或`...
html网页设计作业-静态的css+html仿小米商城
12-29
例如，`<header>`用于头部信息，`<nav>`表示导航栏，`<section>`和`<article>`可以用来组织商品展示区，`<form>`则用于构建搜索功能，而`<footer>`则包含底部信息。 接下来，CSS（Cascading Style Sheets）用于控制...
用HTML写一个小米商城
07-08
例如，`<header>`元素用于创建页面顶部的导航栏，`<section>`或`<div>`可以组织不同的内容区域，`<article>`用于商品描述，`<img>`插入产品图片，`<a>`创建链接到其他页面或商品，`<form>`用于用户填写订单信息等。...
商城类APP的商品分类页面实现，使用RecyclerView结合GridLayout减少嵌套
06-26
商城类APP的商品分类页面实现，使用RecyclerView结合GridLayout减少嵌套
Quick QML-通过GridLayout设计的简易网站导航界面
04-21
资源文章介绍地址:https://www.cnblogs.com/lifexy/p/14686618.html 通过GridLayout来做一个简易的网站导航界面,并支持自适应界面.当我们点击其中的某个按钮,就会打开浏览器跳到对应的网站上.
小米商城-(导航栏,登录)页面
java
03-13 822
小米商城的导航栏还有自制的登录页面
小米商城侧导航栏的实现（导航栏的制作）
weixin_65607135的博客
09-01 4131
我的想法是将下拉框写在列表里面，然后给下拉框绝对定位，给ul相对定位，因为我没有给li设置相对定位，那么下拉框的参照物就是相对定位了的ul，把下拉框的位置定好，然后实现鼠标移入下拉框出现，鼠标移出下拉框消失的问题。侧导航栏在我们写的时候很常用，很多网站上面都有侧边导航栏的应用，那么如何制作侧边导航栏呢？我们实现的思路是先制作一个列表，设置列表的样式，然后在列表里面完成我们需要的内容。下面看一看我制作的小米商城的侧导航栏。所涉及到的知识点有定位和格式化文档。css代码段如上所示。...
小米商城实战0327——d1导航栏
Amor_1998的博客
03-27 604
知识点 padding（填充，上下左右的内边距） margin（外边距） 行内元素margin和padding上下不生效，但左右生效 margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。 hover选择器用于选择鼠标指针浮动在上面的元素 .header a:hover{ //鼠标悬停变白 color: #fff; } ...
小米商城侧边栏【显示向右箭头】
哈哈
09-16 1509
*距离上个盒子的上边有10px*//*距离上个盒子的底部有10px*//* 单行文字垂直居中 *//*背景图片x轴的距离*//*背景图片是否平铺*//*背景图片位置*//*背景图片大小*/
＜html＞小米官网导航栏制作
最新发布
askerkiller的博客
07-15 537
"宫格导航"组件:<grid> —— 快应用组件库H-UI
H-UI官方博客
04-17 659
"宫格导航"组件:<grid> —— 快应用组件库H-UI <import name="grid" src="../Common/ui/h-ui/navigation/c_grid"></import> <template> <div class="container"> <grid data="{{dat...
小米网站学习-导航栏
coderwwh的博客
01-30 882
小米网站模仿学习-导航栏 ————————————— 此笔记是跟着蝉壳学院学习的 ————————————— 说是第二天，其实是好几天了，大概两周。 我本想把每个知识总结一下的，但是emmmmm… 以下是下午3个小时学习的内容，学得慢，而且还有好多不懂的，要回去复习一下。 在实践中找到自己的问题。 .css和.html不在一个文件夹 要引用上一级文件夹： 第一级/第二级/**.css 导航栏顶...
前端基础教程：仿小米商城主页设计与源码解析
在小米商城网站主页的设计中，需要使用HTML来创建网站的布局框架，包括头部（header）、导航栏（nav）、主要内容区（section/aside）、底部（footer）等各个部分。 2. CSS（Cascading Style Sheets）：CSS用于设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值