前端：小米商城排版初步模仿

已于 2022-08-30 16:34:23 修改
阅读量265 收藏 3
点赞数
文章标签： 前端 servlet html
于 2022-08-27 16:55:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73347408/article/details/126559832
版权

商品板块对不齐可以用 vertical-align:middle;需要对齐的板块高度最好保持一致

<!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: rgb(235, 230, 230);

        }

        .bankuai{

            width: 1400px;

            margin: 0px auto;

        }

        .wrap1, .wrap2{

            display: inline-block;

            vertical-align:middle;

        }

        .wrap1{

            width: 260px;

            height: 700px;

            margin: 20px auto;

           

           

        }

        .wrap2{

            width: 1100px;

            height: 700px;

           

           

        }

        .wrap3{

            width: 1400px;

            height: 700px;

        }

        .left1{

            width: 260px;

            height: 700px;

           margin: 10px auto;

        }

       

        .capian{

            width: 260px;

            height: 330px;

           

            background-color: white;

            display: inline-block;

            margin: 10px auto;

        }

        .xiaocapian{

            width: 260px;

            height: 155px;

            background-color: white;

            margin: 10px auto;

           

        }

        .capian, .capian2{

            vertical-align:middle;

        }

        .gengduo{

            width: 260px;

            height: 155px;

            background-color: white;

            margin: 10px auto;

           

        }

        .img1{

            width: 160px;

            height: 160px;

            margin: 0 auto;

           

        }

        .img2{

            width: 80px;

            height: 80px;

            margin: 0 auto;

            text-align: right;

        }

        .hengxiang{

            width: 80px;

            height: 80px;

        }

        .capian2{

            width: 260px;

            height: 330px;

            display: inline-block;

            margin: 10px auto;

        }

        .img2, .hengxiang{

            display: inline-block;

        }

        .mingcheng{

            text-align: center;

        }

        .chuliqi{

            font-size: 12px;

            color: gray;

            text-align: center;

        }

        .jiage{

            font-size: 14px;

            color: rgb(255, 81, 0);

            text-align: center;

        }

        .xiaomingcheng{

            text-align: center;

        }

        .xiaochuliqi{

            font-size: 12px;

            color: gray;

            text-align: center;

        }

        .xiaojiage{

            font-size: 12px;

            color: rgb(255, 81, 0);

            text-align: center;

        }

        .fenlei{

            font-size: 25px;

            color: gray;

        }

        .daohang{

            width: 800px;

            height: 60px;

            margin: 10px auto;

        }

        .dh{

            margin: 10px auto;

        }

        .dh1{

            display: inline-block;

            margin: 10px 10px;

        }

       .sousuo{

        float: right;

       }

       .more{

        margin: 10px auto;

       }

    </style>

</head>

<body>

    <div class="daohang">

        <ul class="dh" type="none">

            <li class="dh1">Xiaomi手机</li>

            <li class="dh1">Redmi手机</li>

            <li class="dh1">电视</li>

            <li class="dh1">笔记本</li>

            <li class="dh1">平板</li>

            <li class="dh1">家电</li>

            <li class="dh1">路由器</li>

            <li class="dh1">服务中心</li>

            <li class="dh1">社区</li>

        </ul>

   

        <span class="sousuo">

            <input type="text">

            <input type="submit" value="搜索"></span>

    </div>

    <div class="bankuai">

        <div class="fenlei">手机</div>

        <div class="wrap1">

            <div class="left1">

                <img src="shoujitupian/shoujileft1.webp" alt="" width="260px" height="680px">

            </div>

        </div>

   

        <div class="wrap2">

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">手机名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">手机名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">手机名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">手机名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">手机名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">手机名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">手机名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">手机名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

        </div>

    </div>

    <div class="bankuai">

        <div class="fenlei">平板|笔记本</div>

        <div class="wrap1">

            <div class="left1">

                <img src="shoujitupian/shoujileft1.webp" alt="" width="260px" height="680px">

            </div>

        </div>

   

        <div class="wrap2">

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">平板名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">平板名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">手机名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">手机名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">手机名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">手机名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">手机名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

                <div class="capian">

                    <div class="img1">

                        <img src="shoujitupian/1.webp" alt="" width="160px" height="160px">

                    </div>

                    <p class="mingcheng">手机名称</p>

                    <p class="chuliqi">处理器名称</p>

                    <p class="jiage">价格</p>

                </div>

        </div>

    </div>

    <div class="bankuai">

        <div class="fenlei">家电</div>

        <div class="wrap3">

            <div class="capian">

                <div class="img1">

                    <img src="jiadian/1.webp" alt="" width="160px" height="160px">

                </div>

                <p class="mingcheng">家电名称</p>

                <p class="chuliqi">家电功能</p>

                <p class="jiage">价格</p>

            </div>

            <div class="capian">

                <div class="img1">

                    <img src="jiadian/1.webp" alt="" width="160px" height="160px">

                </div>

                <p class="mingcheng">家电名称</p>

                <p class="chuliqi">家电功能</p>

                <p class="jiage">价格</p>

            </div>

            <div class="capian">

                <div class="img1">

                    <img src="jiadian/1.webp" alt="" width="160px" height="160px">

                </div>

                <p class="mingcheng">家电名称</p>

                <p class="chuliqi">家电功能</p>

                <p class="jiage">价格</p>

            </div>

            <div class="capian">

                <div class="img1">

                    <img src="jiadian/1.webp" alt="" width="160px" height="160px">

                </div>

                <p class="mingcheng">家电名称</p>

                <p class="chuliqi">家电功能</p>

                <p class="jiage">价格</p>

            </div>

            <div class="capian">

                <div class="img1">

                    <img src="jiadian/1.webp" alt="" width="160px" height="160px">

                </div>

                <p class="mingcheng">家电名称</p>

                <p class="chuliqi">家电功能</p>

                <p class="jiage">价格</p>

            </div>

            <div class="capian">

                <div class="img1">

                    <img src="jiadian/1.webp" alt="" width="160px" height="160px">

                </div>

                <p class="mingcheng">家电名称</p>

                <p class="chuliqi">家电功能</p>

                <p class="jiage">价格</p>

            </div>

            <div class="capian">

                <div class="img1">

                    <img src="jiadian/1.webp" alt="" width="160px" height="160px">

                </div>

                <p class="mingcheng">家电名称</p>

                <p class="chuliqi">家电功能</p>

                <p class="jiage">价格</p>

            </div>

            <div class="capian">

                <div class="img1">

                    <img src="jiadian/1.webp" alt="" width="160px" height="160px">

                </div>

                <p class="mingcheng">家电名称</p>

                <p class="chuliqi">家电功能</p>

                <p class="jiage">价格</p>

            </div>

            <div class="capian">

                <div class="img1">

                    <img src="jiadian/1.webp" alt="" width="160px" height="160px">

                </div>

                <p class="mingcheng">家电名称</p>

                <p class="chuliqi">家电功能</p>

                <p class="jiage">价格</p>

            </div>

            <div class="capian2">

                <div class="xiaocapian">

                    <div class="hengxiang">

                        <p class="xiaomingcheng">家电名称</p>

                        <p class="xiaochuliqi">家电功能</p>

                        <p class="xiaojiage">价格</p>

                    </div>

                    <div class="img2">

                        <img src="jiadian/2.webp" alt="" width="80px" height="80px">

                    </div>

                </div>

                <div class="gengduo">

                    <span class="more">更多</span>

                </div>

            </div>

           

        </div>

    </div>

</body>

</html>

m0_73347408
关注
小米商城布局练习
weixin_47683287的博客
10-23 2325
小米商城布局练习 小米商城还是很适合刚学HTML css的同学们，主要是一些简单的布局和样式的设置。 HTML部分代码 <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![en
前端学习.
qq_53323012的博客
11-15 960
基础班学习路线 html5基础，css3基础，h5c3提高，练习项目。 网页简介 1.html html指的是超文本标记语言，它是用来描述网页的一种语言。 html不是一种编辑语言，而是一种标记语言。 标记语言是一套标记标签。 所谓超文本，有层含义： 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超越链接文本） 2.网页 1.网站是指因特网上根据一定的规则，使用html等制作的用于展示特定内容相关的网页集合。 2.网页是网
前端入门篇（三十三）商品列表布局
安之ccy的博客
02-07 1715
一行放置3个小框，负margin值的作用 html文件： <div class="seckill-goods"> <ul class="clearfix"> <li></li> <li></li> <li></li> </ul> </div> css文件： .seckill-goods ul{ margin-righ
css基础练习--浮动布局小demo--小米商城布局-新闻导航--源码
faith_girl的博客
11-16 345
1.简单 <!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&
HTML+CSS 浮动布局练习：小米商城产品布局
睡觉对我来说很重要的博客
08-04 1905
小米商城产品布局 题目描述：使用CSS浮动布局完成如下效果。 思路：将整体看成一个大盒子，每个产品图片介绍看成一个小盒子，依次放进大盒子中，产品按照一定的间距隔开。可以使用无序列表来实现，将其设置成浮动布局就拥有行内块的特征了。需要值得注意的是：列表拥有默认的内外边距，需要将内外边距设置成0，li前面默认有项目符号，需去除。还需要注意权重问题。 实验代码： <!DOCTYPE html> <html lang="en"> <head> <meta char
怎么创建数据表的实体类和业务类_微服务项目第13天：商品分类业务的实现
weixin_39734048的博客
11-23 237
今天是刘小爱自学Java的第143天。感谢你的观看，谢谢你。学习计划安排如下：商品分类业务的初步实现。数据模型的分析：数据表字段的设计，Java中对应的实体类，前端页面vue组件。业务模型的分析：请求路径是什么？根据什么去数据库查询？具体实现代码的编写。其中还有一个跨域问题未来得及解决，怎么感觉积累的问题越来越多了，这样下去可不行啊。一、商品分类业务我们的项目是刘小爱商城，其核心自然是商品了，所以...
大四web前端网页制作课作业——HTML+CSS+JavaScript仿小米手机商城网站(37页)
网页设计与制作
11-25 289
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
仿小米商城模板
03-10
模板的布局和色彩搭配都力求模仿小米商城的原生风格，以提高用户对品牌的认知度和信任感。对于刚接触ECSHOP的新手来说，这是一个很好的起点，因为它主要利用了ECSHOP的默认功能，使得安装和配置过程相对简单。 在...
小米官网的静态页面33
03-14
【小米官网的静态页面33】是一个前端开发的实践项目，旨在通过模仿小米官网的界面设计，提升HTML和CSS的应用技能。在这个项目中，你将深入理解如何构建一个响应式的、用户友好的网页，同时也将学习到一些网页设计的...
【前端开发基础】CSS基础知识以及CSS3
qq_43293778的博客
06-03 6823
三、CSS层叠样式表 一 目标 能够说出什么是CSS 能够使用CSS基础选择器 能够设置字体样式 能够设置文本样式 能够说出CSS的三种引入方式 能够使用Chrome调试工具调试样式 1、CSS简介 CSS的主要使用场景就是美化网页的，布局页面的 1.1 HTML的局限性 说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义，比如< h1>表名这是一个大标题，< p>表明这是一个段落，< img>表明这儿有一个图片，< a>表示此处有链接。 1.2
一个生物专业学生的内心独白：我为什么能去互联网大厂？能解剖兔子，手焊PCB，调试FPGA，还能手撕LRU！
业余码农Amazing10的博客
06-12 2166
这回，考虑到近期关注了许多新朋友，并且大多都是学生党，可能对我还不是特别熟悉。因此我决定重新把我从非科班如何通过自学（狗屎运）进入大厂的经历分享出来，希望能够给予一些将要面临秋招，或者将要准备进入互联网行业的同学一丢丢的帮助。 早期关注我的读者可能都约莫着记得，我是在华科读的本硕，专业是生物医学工程。虽说专业的的确确是带了生物二字，但是我老实交代，实际上并不是纯粹的生物技术方向上的专业。简单科普一下： 生物医学工程是属于交叉程度非常高，主要面向生物医学领域的工程学科。我们在学校的主要课程包含硬件设计、软件
css-浮动总结
weixin_40922551的博客
10-12 760
1. 浮动(float) 目标 记忆 能够说出 CSS 的布局的三种机制 理解 能够说出普通流在布局中的特点 能够说出我们为什么用浮动 能够说出我们为什么要清除浮动 应用 能够利用浮动完成导航栏案例 能够清除浮动 能够使用PS切图工具 1.1 CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。 CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：di
8.8 Web前端-小米商城项目实战
执笔绘江山的博客
08-08 3150
hello大家好，人总是会在写项目的时候发现自己的许多不足之处，然后加以改进，并且记住这些东西，所以今天我给大家带来的是我的第二个项目，小米商城首页的书写。但是还有下拉框，在中盒子中每个小方块下面再定位一个横向盒子，里面填充内容，分隔线用伪类去做，具体做法可以参考我之前的文章，如何用伪类书写分隔线，然后给每一个小方块下方都加上这个，然后给一个移入hover效果，当鼠标移入时，给下面的盒子一个高度就可以了。那么我们先从头部开始，慢慢向下书写整个页面。...
在Android开发中WebView的详细使用方法
LLZjiayou的博客
10-25 1216
WebView是一个非常强大的工具，用于在应用内加载网页内容。通过使用和其他配置，可以实现丰富的网页交互功能，同时确保应用的安全性和稳定性。如果有特定功能需求，可以在 Android 官方文档中查阅的详细说明。
vue3中toRef和toRefs的用法以及使用场景
涂涂
10-25 504
toRef。
【333基于Java Web的考编论坛网站的设计与实现
paopaokaka_luck的博客
10-25 1096
刚开始学习Java语言的时候，是不知道还有Tomcat这些东西的，各种语法各种输出在控制台进行输出结果，当Java网站开发的时候就不可避免的学习到了Tomcat服务器。Tomcat准确的来讲不算是服务器，可以说是vue引擎或者一个容器，这些都是学术上或者原理上都比较贴切的，但是实际工作中Tomcat就是作为一个web服务器来用的，因为可以实现网站的发布和运行。
vue如何让下拉框可以输入---查询下拉框内容
qq_42666729的博客
10-28 439
使用filterable。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
最新发布
everfoot的博客
10-29 598
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值