小米商城首页2

已于 2022-09-18 22:41:50 修改
阅读量168 收藏
点赞数 1
分类专栏： css html 文章标签： css 前端 html
于 2022-09-18 17:13:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DAIYA_JIE/article/details/126920091
版权
css 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
html
12 篇文章 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>
    <style>
        body{
            background-color: #f5f5f5;
        }
        * {
            padding: 0px;
            margin: 0px;
            text-align: center;
            margin:0 auto ;
        }

        .a {
            width: 1226px;
            height: 614px;
            margin: 0 auto;
          

        }

        .b:hover {
            box-shadow: 10px 10px 10px -4px rgb(182, 171, 171);
            margin-top: -5px;
        }

        .b {
            width: 234px;
            height: 670px;
            float: left;
            margin-top: 0px;
           

        }

        .c {
            width: 992px;
            height: 700px;
            float: left;
            margin-top: 0px;
        }

        .li:hover {

            box-shadow: 10px 10px 10px -4px rgb(182, 171, 171);
            margin-top: -5px;
        }

        .d:hover {
            box-shadow: 10px 10px 10px -4px rgb(182, 171, 171);
            margin-top: -5px;
        }

        ul>li {
            width: 234px;
            height: 300px;
            margin-left: 14px;
            margin-bottom: 14px;
            margin-top: 0px;
            list-style: none;
            float: left;
           background-color: #ffffff;
            padding: 10px 0;
        }
        .p1 {
            color: #B0B0B0;
            width: 214px;
            height: 18px;
            margin: 0 10px 10px;
            font: 12px "Helvetica Neue"
        }

        .p2 {
            color: #ff6700;
            width: 214px;
            height: 21px;
            margin: 0 10px 14px;
            text-align: center;
        }

        .p3 {
            color: #333;
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
            margin: 0 10px 2px;
            text-align: center;
        }

        img {
            width: 160px;
            height: 160px;
        }
      .hh{
          width: 234px;
          height: 670px;
      }
      .qq{
          width: 992px;height: 350px;
      }
    </style>
</head>

<body>
    <div class="a">
        <div class="b">
            
                <img src="mi1.jpg" class="hh" alt="">
            
        </div>
        <div class="c">
            <ul class="qq">
                <li class="d">
                    <div class="aa">

                        <div>
                            <img src="xiaomi.jpg">
                        </div>
                        <p class="p3">
                            Xiaomi MIX Fold 2
                        </p>
                        <p class="p1">
                            超轻薄折叠机身设计，小米自然微水...
                        </p>
                        <p class="p2">
                            8999起
                        </p>
                    </div>
                </li>
                <li class="d"> <div class="aa">

                    <div>
                        <img src="xiaomi.jpg">
                    </div>
                    <p class="p3">
                        Xiaomi MIX Fold 2
                    </p>
                    <p class="p1">
                        超轻薄折叠机身设计，小米自然微水...
                    </p>
                    <p class="p2">
                        8999起
                    </p>
                </div></li>
                <li class="d"> <div class="aa">

                    <div>
                        <img src="xiaomi.jpg">
                    </div>
                    <p class="p3">
                        Xiaomi MIX Fold 2
                    </p>
                    <p class="p1">
                        超轻薄折叠机身设计，小米自然微水...
                    </p>
                    <p class="p2">
                        8999起
                    </p>
                </div></li>
                <li class="d"> <div class="aa">

                    <div>
                        <img src="xiaomi.jpg">
                    </div>
                    <p class="p3">
                        Xiaomi MIX Fold 2
                    </p>
                    <p class="p1">
                        超轻薄折叠机身设计，小米自然微水...
                    </p>
                    <p class="p2">
                        8999起
                    </p>
                </div></li>
            </ul>
                <ul class="qq">
                <li class="d"> <div class="aa">

                    <div>
                        <img src="xiaomi.jpg">
                    </div>
                    <p class="p3">
                        Xiaomi MIX Fold 2
                    </p>
                    <p class="p1">
                        超轻薄折叠机身设计，小米自然微水...
                    </p>
                    <p class="p2">
                        8999起
                    </p>
                </div></li>
                <li class="d"> <div class="aa">

                    <div>
                        <img src="xiaomi.jpg">
                    </div>
                    <p class="p3">
                        Xiaomi MIX Fold 2
                    </p>
                    <p class="p1">
                        超轻薄折叠机身设计，小米自然微水...
                    </p>
                    <p class="p2">
                        8999起
                    </p>
                </div></li>
                <li class="d"> <div class="aa">

                    <div>
                        <img src="xiaomi.jpg">
                    </div>
                    <p class="p3">
                        Xiaomi MIX Fold 2
                    </p>
                    <p class="p1">
                        超轻薄折叠机身设计，小米自然微水...
                    </p>
                    <p class="p2">
                        8999起
                    </p>
                </div></li>
                <li class="d"> <div class="aa">

                    <div>
                        <img src="xiaomi.jpg">
                    </div>
                    <p class="p3">
                        Xiaomi MIX Fold 2
                    </p>
                    <p class="p1">
                        超轻薄折叠机身设计，小米自然微水...
                    </p>
                    <p class="p2">
                        8999起
                    </p>
                </div></li>
            </ul>
            </ul>
        </div>
    </div>
</body>

</html>
戴丫丫
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2022最新仿小米商城首页html+css+js
09-22
2022最新仿小米商城首页html+css+js banner可切换，产品可滑动
HTML5中margin属性应用
大数据-攻城狮
12-09 6545
Document div{ width: 100px; height: 100px; background-color: red; /* 外边距 */ margin-top: 30px; margin-left: 100px; margin-right: 100px;
双飞翼布局（css）
Y0admin的博客
10-27 1998
1. DOM结构 <div class="head"></div> <div class="container column"> <div class="center"></div> </div> <div class="left column"></div> <div class="right column"></div>
CSS实现圣杯布局（双飞翼布局）的四种方式
一个普通人的博客
08-29 1128
总结了原生JS实现圣杯（双飞翼）布局的四种方式
css---双飞翼和圣杯布局
追梦的女孩博客
05-27 528
双飞翼、圣杯布局 概念:都是侧边两栏宽度固定，中间栏宽度自适应。 用处:解决中间部分被挡住的问题。 圣杯布局: 双飞翼布局:双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。 圣杯布局:在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative。 双飞翼实现代码 <!DOCTYPE html> <html> <head&
JavaScript 基础 | Day03 循环-for、数组、综合案例（根据数据生成柱形图）
qq_53306713的博客
11-11 719
循环-for、数组、综合案例（根据数据生成柱形图）
仿小米商城html网页源码
03-31
仿小米商城html网页源码，包括主页和详情页、购物页面，等等。内容非常丰富，适宜做学习商城网站前端页面参考，源码很棒，建议下载。
小米商城首页静态页面（CSS&HTML）
06-10
本资源面向的对象主要为前端初学者，已经学完CSS和HTML的同学可以参考使用
myshop_小米商城_
10-02
javaweb项目之商城项目，比较基础，没用框架
小米商城（HTML+CSS）网页设计期末作业
01-04
内容概要：这份资源写的是静态小米商城，点开资源前大家可以去小米商城官网查看设计效果，通过带着读者手写简化版小米商城网页，逐步巩固学习到的HTML和css基础知识，例如：背景属性的使用background、iconfont字体...
两个相邻的div边框合并
SL7664的博客
04-06 1726
【代码】两个相邻的div边框合并。
【CSS如何实现双飞翼布局】
最新发布
前端-CV全粘工程师
10-02 450
它的主要特点是左右两列是浮动的，中间一列使用margin负值来达到“自适应”的效果。中间的.content设置一个margin-left和margin-right，确保其在左右两侧预留200px的空间，以容纳左右两列的内容。通过上面的代码，我们得到的效果是一个完整的双飞翼布局。左右两列的宽度固定，中间的列根据页面的宽度自适应，并且不需要使用嵌套的div来实现。.left、.right设置为float:left，使其能够在文档流中脱离，并设置为固定宽度，分别为200px。
css双飞翼布局方式
oops
05-21 306
css双飞翼布局指的是左右两侧盒子固定，中间的盒子自适应大小 这里有四种方式可以实现 一、利用浏览器加载顺序 将中间需要自适应的盒子放在最后，让浏览器左后加载，先让左右两个固定宽度的盒子浮动上去，中间自适应的盒子就可以上去了。 <style> * { margin: 0; padding: 0; } .left-box { float: left; width: 300px; height: 900px;
CSS之实现双飞翼布局和圣杯布局的三种方式
qq_45907365的博客
04-27 149
以上就是今天要讲的内容。
HTML+CSS+JavaScript：渲染柱形统计图
lbcbjtlhmjq的博客
07-15 2923
用户输入四个季度的数据，根据数据生成柱形统计图，浏览器预览效果如下。
双飞翼 html 布局,css实现双飞翼布局的四种方法（附代码）
weixin_30394975的博客
06-11 1030
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。圣杯布局、双飞翼布局效果图从效果图来看圣杯布局、双飞翼布局效果是一样一样的。圣杯布局、双飞翼布局就是左右两侧宽度固定，中间内容宽度自适应，即100%圣杯布局*{margin: 0;padding: 0;box-sizing: border-box;}.clearfi...
原生JS-根据数据生成柱形图
一种简单易食的杂烩????
03-29 2393
需求： 用户输入四个季度的数据，可以生成柱形图。 效果图 分析 需要输入4次，所以可以把4个数据放到一个数组里面 利用循环，弹出4次框，同时存到数组里面 使用 var div1 = document.getElementById('one'); 得到第一个div的id名 one。 3. 使用 div1.style.height = `${Data[0]}px` 给类名为 one 的div添加高度。 4. div1.innerHTML = Data[0] + '<br>' +
java实现各种数据统计图（柱形图，饼图，折线图）
as6669213的专栏
12-24 5247
最近在做数据挖掘的课程设计，需要将数据分析的结果很直观的展现给用户，这就要用到数据统计图，要实现这个功能就需要几个第三方包了： 1.       jfreechart-1.0.13.jar 2.       jcommon-1.0.16.jar 3.       gnujaxp.jar   先来看一下，最终效果图：   主要是jfreechart-1.0.13.jar，但这三个包
Vue.js之侦听器案例——验证用户名
weixin_44827643的博客
07-14 275
上文介绍了Vue.js中侦听器如何使用，本文主要利用侦听器完成验证用户名的案例。效果如图所示： 核心思路：监听input表单值的变化，当失去焦点时，向后端发送请求并获取数据（这里通过定时函数进行模拟）。 代码如下：...
模仿小米商城首页html
06-10
不过，您可以尝试以下步骤来模仿小米商城首页的HTML页面： 1. 打开小米商城首页，右键点击页面，选择“查看页面源代码”，即可查看页面的HTML代码。 2. 仔细观察页面的结构、布局、样式等，尝试理解其中的HTML标签...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值