仿照淘宝错位布局

最新推荐文章于 2024-11-12 11:19:19 发布
最新推荐文章于 2024-11-12 11:19:19 发布
阅读量481 收藏 11
点赞数 6
文章标签： 前端 小程序 vue.js javascript 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61043829/article/details/137254943
版权

例图：

代码实现：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

  @media screen and (max-width: 800px) {

  .masonry {

    column-count: 2;

  }

  }

  @media screen and (max-width: 500px) {

  .masonry {

    column-count: 1;

  }

  }

.masonry {

  -moz-column-count:2; /* Firefox */

  -webkit-column-count:2; /* Safari 和 Chrome */

  column-count:2;

  -moz-column-gap: 2em;

  -webkit-column-gap: 2em;

  column-gap: 2em;

  width: 90%;

  margin:2em auto;

  column-fill:balance;

}

.item {

  padding: 1em;

  margin-bottom: 2em;

  -moz-page-break-inside: avoid;

  -webkit-column-break-inside: avoid;

  break-inside: avoid;

  background: #f60;

}

</style>

</head>

<body>

<div class="masonry">

            <div class="item">

                <div> 1

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                </div>

            </div>

            <div class="item">

                <div> 2

                </div>

            </div>

            <div class="item">

                <div> 3

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                </div>

            </div>

            <div class="item">

                <div> 4

                </div>

            </div>

            <div class="item">

                <div> 5

                </div>

            </div>

            <div class="item">

                <div class="item_content content-lar"> 6

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                </div>

            </div>

            <div class="item">

                <div class="item_content content-sma"> 7

                  lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                  lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                  lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                  lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                  lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                  lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                  lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                  lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                </div>

            </div>

            <div class="item">

                <div class="item_content content-lar"> 8

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                    lkjasdfjafja昆仑剑法撒旦撒发卡机<br>

                </div>

            </div>

            <div class="item">

                <div class="item_content content-lar"> 9

                </div>

            </div>

            <div class="item">

                <div class="item_content content-sma"> 10

                </div>

            </div>

            <div class="item">

                <div class="item_content content-mid"> 11

                </div>

            </div>

            <div class="item">

                <div class="item_content content-mid"> 12

                </div>

            </div>

            <div class="item">

                <div class="item_content content-mid"> 13

                </div>

            </div>

            <div class="item">

                <div class="item_content content-mid"> 14

                </div>

            </div>

            <!-- more items -->

        </div>

</body>

</html>

 

猫七姑娘~~
关注
CSS3仿淘宝两列错位展示商品
zacry的专栏
10-12 2440
研究了一阵子了，发现个好东西，给大家分享下！ 直接上个例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> @media screen and (max-width: 800px) { .masonry { ...
用CSS实现上下颠倒的图案 [动画演示] [#4持续更新中.....]
weixin_54679694的博客
01-17 1212
CSSBattle 是一个使用 HTML 和 CSS 实现目标图案，并进行实时预览和对比的网站。具有很强的趣味性和游戏性。 我仅仅选择实现 ~100%图案的还原，不关注减少代码数。但是只要做的多，基本可以达到全球前 100 名。 很多减少代码数的 trick，在日常工作实践中，都是不值得提倡的。 题目图案 使用 HTML/CSS 实现以下图案。 主要使用的CSS属性是: flex transform translateY 解决方案动画演示 解决方案步骤 1. 使用 flex， 把三个正方形
div+css布局实例淘宝分析(二)
weixin_33847182的博客
09-06 219
在前面我们分析了淘宝网页的顶部代码,这次我们来分析淘宝网页的导航条,对于刚入门学DIV,CSS布局的朋友来说,不知道从那里下手,我以为从分析优秀 网站的源代码来学习div,css布局是一个不错的方法,这篇div+ css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为 一个教程的例子,达到学习DIV+CS...
前端常见布局实例
coffee_nice的博客
10-29 127
前端常见布局，汇总
Android 仿淘宝首页界面
热门推荐
未来很长，但我会努力的走下去。
08-16 1万+
Android 仿淘宝首页界面
Android仿照淘宝，京东，当当购物平台
01-21 8573
1.开发工具 AndroidStudio3.0.1 jdk1.8 Android4.1以上 语言：JAVA 2.页面部分效果图如下: 3.Sqlite数据库存储 4.首页，登录，注册等部分页面 /** * 获取界面上的UI控件 */ private void init() { tv_bac...
仿照google主页面布局html代码,超酷仿GOOGLE首页导航菜单效果
weixin_32306885的博客
06-04 1243
超酷仿GOOGLE首页导航菜单效果window.google={kEI:"HBnlR8bgAorksALn3dTbBw",kEXPI:"17259,17735,18065",kHL:"zh-CN"};function sf(){document.f.q.focus()}window.clk=function(b,c,d,e,f,g){if(document.images){var a=encode...
uniapp仿照微信朋友圈图片布局
﹎静如止水﹎的博客
10-12 2869
仿照微信朋友圈不同尺寸图片布局， 1.上图：不同尺寸的图，以下4张为例 2.上代码 <view class="qz_imgs qz_imgs1 clearfix"v-if="item.pics.length==1" v-for="(bean,index) in item.pics" :key="index"> <image :src="osshttp+bean" mode="heightFix"/> </view> 3.上样式 ...
Android仿淘宝历史搜索效果
Abner_Crazy的博客
09-18 1486
一、效果图 二、原理分析 以后有时间给大家分析 三、代码链接 https://download.csdn.net/download/Abner_Crazy/12859207
仿照淘宝和聚美优品产品布局
04-04
源码android-vertical-slide-view，仿照淘宝和聚美优品，在商品详情页，向上拖动时，可以加载下一页。使用ViewDragHelper，滑动比较流畅。 scrollView滑动到底部的时候，再行向上拖动时，添加了一些阻力。
仿照淘宝页面前端基础技术集源码
04-23
在仿照淘宝页面的过程中，会使用HTML来构建页面的整体框架，如导航栏、商品列表、购物车等区域。 其次，CSS（Cascading Style Sheets，层叠样式表）则负责页面的样式设计和布局。通过CSS，可以控制淘宝页面的字体、...
taobao.zip_taobao_仿照淘宝
09-24
【标题】"taobao.zip_taobao_仿照淘宝"是一个基于ASP.NET开发的项目，旨在模仿淘宝网的手机端功能。这个项目对于那些对电商网站开发感兴趣的开发者来说，是一个宝贵的资源，因为它提供了全面的功能实现和详尽的注释...
仿照淘宝京东侧滑单选多选菜单
03-06
在仿照淘宝京东的侧滑菜单时，可以考虑采用列表形式展示各个选项，每个条目包含文字描述和对应的单选或多选控件。为了保持一致性，可以使用统一的间距、字体和颜色方案。 4. **事件处理**： 使用`OnClickListener`...
仿照淘宝购物车前端页面设计
05-21
本项目“仿照淘宝购物车前端页面设计”旨在训练开发者如何创建一个类似淘宝购物车的功能性页面，提供用户友好的体验。下面将详细讨论这个项目中涉及的关键知识点。 1. HTML 结构设计： - 商品列表：使用`<ul>`或`...
蓝凌OA-EKP hrStaffWebService 任意文件读取漏洞
iSee857的博客
11-12 400
它集成了流程管理、知识管理、会议管理、公文管理、合同管理、费用管控等多个模块，旨在帮助企业解决基础OA应用、系统集成、开发平台和创新业务定制等长期扩展需求，推动企业实现管理在线化、知识赋能化、运营数字化和人机智能化‌。漏洞，未经身份验证攻击者可通过该漏洞读取系统重要文件（如数据库配置文件、系统配置文件）、数据库配置文件等等，导致网站处于极度不安全状态。在处理客户端输入的参数时，进行严格的验证和过滤，防止未授权的文件访问。返回数据经过base64编码 解码后可得读取数据。
前端 Flex 布局语法详解
ning的博客
11-10 1087
Flex是Flexible Box的缩写，意为“弹性布局”。它允许容器内的项目（子元素）自动调整大小，以适应不同屏幕尺寸和布局需求。如果需要行内Flex布局，可以使用Flex布局提供了一种强大而灵活的方式来创建响应式布局。通过理解并应用上述属性，你可以轻松地创建出复杂且适应不同屏幕尺寸的布局。随着现代浏览器对Flex布局的广泛支持，它已经成为前端开发中不可或缺的一部分。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章CSDN - Flex布局详解菜鸟教程 - Flex 布局语法教程。
Vue中的常用指令
最新发布
m0_62388400的博客
11-12 907
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
@RestController 源码解读：解决 Web 开发中 REST 服务的疑难杂症
狼堡灰太狼的博客
11-11 705
这里可以理解成，注解MyInterface2的value属性重写了注解MyInterface1的value属性，但重新的属性的返回类型必须相同。可以看出对于value这个属性来说，@Configuration注解中的值会重写@Component的value属性值，这有点像类之间的继承，子类可以重父类的方法。达到 @MyInterface1(value2="number1") 和 @MyInterface1(value1="number1") 的效果相同。JDK 17 引入 records 新特性。
【Java Web】JSP实现数据传递和保存（上）九大内置对象 request
m0_66584716的博客
11-07 954
JSP（JavaServer Pages）提供了九个内置对象，这些对象在JSP页面中可以直接使用，无需显式声明。这些内置对象提供了对请求、响应、会话等常用功能的访问，使得开发者可以更方便地处理Web应用程序中的各种任务。
淘宝前端仿照技术：HTML/CSS/JavaScript基础集
资源摘要信息:"本资源集旨在展示如何仿照淘宝页面的前端技术，从而构建一个具有类似功能与外观的网页。通过这套技术集，你可以了解到如何使用HTML、CSS和JavaScript这三种前端开发的核心技术来创建一个电商网站的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值