前端应用栅格布局完成六种筛子样式的代码详解

最新推荐文章于 2024-08-16 17:14:08 发布
最新推荐文章于 2024-08-16 17:14:08 发布
阅读量296 收藏
点赞数
文章标签： 前端开发 CSS布局 flexbox 筛子样式 代码实例
原文链接：https://blog.51cto.com/u_15111999/4086145
版权

今天分享下”前端应用栅格布局完成六种筛子样式的代码详解“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。

先上效果图下面附上代码

在这里插入图片描述

​​​​

​​<​​​​html​​​​>​​

​​<​​​​head​​​​>​​

​​<​​​​meta​​​ ​​charset​​​​=​​​​"UTF-8"​​​​>​​

​​<​​​​title​​​​></​​​​title​​​​>​​

​​<​​​​style​​​ ​​type​​​​=​​​​"text/css"​​​​>​​

​​.big {​​

​​width: 100px;​​

​​height: 100px;​​

​​background: skyblue;​​

​​display: flex;​​

​​margin-top: 20px;​​

​​} ​​

​​.small {​​

​​width: 10px;​​

​​height: 10px;​​

​​background: purple;​​

​​border-radius: 5px;​​

​​}​​

​​.one {​​

​​display: flex;​​

​​justify-content: center;​​

​​/交叉轴/​​

​​align-items: center;​​

​​}​​

​​.two {​​

​​display: flex;​​

​​justify-content: space-around;​​

​​align-items: center;​​

​​}​​

​​.two2 {​​

​​display: flex;​​

​​flex-direction: column;​​

​​justify-content: space-around;​​

​​align-items: center;​​

​​}​​

​​.three {​​

​​display: flex;​​

​​flex-direction: column;​​

​​justify-content: space-between;​​

​​align-items: center;​​

​​}​​

​​.four {​​

​​display: flex;​​

​​justify-content: space-around;​​

​​}​​

​​.four1 {​​

​​display: flex;​​

​​justify-content: space-around;​​

​​align-items: center;​​

​​}​​

​​.four2 {​​

​​display: flex;​​

​​flex-direction: column;​​

​​justify-content: space-around;​​

​​align-items: center;​​

​​}​​

​​.five {​​

​​display: flex;​​

​​justify-content: space-around;​​

​​}​​

​​.five1 {​​

​​display: flex;​​

​​flex-direction: column;​​

​​justify-content: space-around;​​

​​align-items: center;​​

​​}​​

​​.five2 {​​

​​display: flex;​​

​​flex-direction: row;​​

​​align-self: center;​​

​​}​​

​​.six {​​

​​display: flex;​​

​​justify-content: space-around;​​

​​}​​

​​.six1 {​​

​​display: flex;​​

​​flex-direction: column;​​

​​justify-content: space-around;​​

​​align-items: center;​​

​​}​​

​​</​​​​style​​​​>​​

​​</​​​​head​​​​>​​

​​<​​​​body​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"big one"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​</​​​​div=http://www.qlyl1688.com/products/ycxsys6152.html​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"big two"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"big two2"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"big three"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​ ​​style​​​​=​​​​"align-self: flex-start;"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​ ​​style​​​​=​​​​"align-self: center;"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​ ​​style​​​​=​​​​"align-self: flex-end;"​​​​></​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"big three"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​ ​​style​​​​=​​​​"align-self: flex-end;"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​ ​​style​​​​=​​​​"align-self: center;"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​ ​​style​​​​=​​​​"align-self: flex-start;"​​​​></​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"big four"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"four2"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"four2"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"big five"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"five1"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"five2"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"five1"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"big six"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"six1"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"six1"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"big six"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"six1"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​> ​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"six1"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​> ​​

​​</​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"six1"​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​>​​

​​<​​​​div​​​ ​​class​​​​=​​​​"small"​​​​></​​​​div​​​​> ​​

​​</​​​​div​​​​>​​

​​</​​​​div​​​​>​​

​​</​​​​body​​​​>​​

​​</​​​​html​​​​>​​

今天的文章就分享到这啦，内容转自脚本之家，下篇文章再见！

云南仟龙Mark
关注
前端网格布局
m0_51621504的博客
03-06 602
概念 将一个盒子划分成多个单元格，指定内容放在指定的单元格中，实现一种比较整齐的布局方式。 容器属性： display: grid/inline-grid; grid可以将元素转为块元素，inline-grid可以将元素转为行内元素。 <style> span{ width: 100px; height: 100px; border:3px solid #000; } .sp2{ disp...
HTML使用栅格布局实现六种筛子的样式
南 墙
06-02 5378
先上效果图下面附上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .big { width: 100px; height: 100px; background: skyblue; display: flex; mar
前端css3实现筛子（正方体）旋转
weixin_45869530的博客
07-28 312
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ ma.
前端页面布局之【Grid布局】详解
最新发布
cnzzs的博客
08-16 1548
目录????前言????浏览器支持????Gird简介和基本概念????属性介绍???? 父元素上的属性???? 设置grid布局????设置网格的列数与行数????通过网格单元的名字来布局 grid-template-areas????设置网格轨道的大小????justify-items????align-items????justify-content????align-content????grid...
前端 CSS 经典：grid 栅格布局
weixin_64684095的博客
03-27 1741
【代码】前端 CSS 经典：grid 栅格布局。
前端开发_HTML5_布局-栅格布局
u013185175的博客
12-21 4957
栅格布局 1.引入 我们之前学习了多个布局的方式，下面我们一起来学习一种比较重要的布局方式：栅格布局。栅格布局是一种较为特殊的弹性布局，栅格(grid)是一种自适应布局，能根据不同终端自动伸缩容器的宽高。flex根据轴线(axis)布局，看起来像是一维布局；而grid针对网格线(grid line)布局，看起来更像是二维布局。 在我们熟知的常用前端框架中都可以发现栅格布局的系统实现，如常用的bootstrap等，我们可以把栅格布局看成是类似Excel表格一样，把整个页面按照不同比例的格子划...
Web前端开发之CSS学习笔记10—栅格布局（网格布局）
qq_45709187的博客
05-30 5083
目录【网格布局grid】1.网格布局的构成 2.父容器grid container3.生成网格容器 display:grid/inline-grid4.构建网格 grid-template-columns/grid-template-rows（1）grid-template-columns（2）grid-template-rows5.定位空间 grid-template-areas和grid-area4.设置间隙grid-gap5.网格对齐方式（1）justify-content ：区域内容的水平对齐（2）
HTML使用栅格布局实现六种筛子样式的代码详解
01-19
先上效果图下面附上代码 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> <style type=text/css> .big { width: 100px; height...
HTML栅格布局：六种筛子样式实现详解与代码示例
本篇文章详细介绍了如何使用HTML和CSS栅格布局来创建六种不同筛子样式的元素。首先，我们来看一下这些样式的效果预览，通过HTML结构和CSS代码的组合，实现了灵活的布局设计。 在HTML部分，我们定义了两个基本的div...
js摇筛子点数合计代码
07-24
在JavaScript（简称JS）编程中，模拟摇筛子游戏是一种常见的练习，可以帮助初学者更好地理解事件处理、随机数生成以及DOM操作等基本概念。在这个场景中，"js摇筛子点数合计代码"是一个简单的应用，它实现了用户通过...
android摇筛子源代码
03-06
本文将详细解析一个基于Android的摇筛子源代码，帮助初学者了解如何在Android环境中实现此类应用。这个项目适用于已经安装了JDK 7.0和SDK 17的开发者环境。 首先，我们需要理解Android应用的基本架构。Android应用...
筛子游戏程序及代码
12-22
筛子游戏程序和代码筛子游戏 筛子游戏程序和代码筛子游戏 筛子游戏程序和代码筛子游（可运行）
项目骰子前端
02-28
Technigo React Starter应用程序 该应用程序是使用create-react-app ，然后进行了一些清理，因此我们有一个仅包含入门所需元素的项目。 在src文件夹中添加组件，然后在src/app.js使用它们以开始使用。 用法 在GitHub上，单击“使用此模板”按钮以在您的帐户上创建新的存储库 将新存储库克隆到您的计算机 使用npm安装所需的依赖项： npm install 启动项目： npm start 另外，如果您不想在自己的帐户上使用新的git repo； 从GitHub下载并提取 在终端中打开目录： cd /path/to/react-starter 使用npm安装所需的依赖项： npm install 启动项目： npm start
骰子代码 小游戏
11-08
骰子代码 小游戏
前端之css grid网格布局
weixin_46372074的博客
07-13 519
Grid 布局​ 与 ​Flex 布局​有一定的相似性，都可以指定容器内部多个项目的位置。 二、添加网格结构（行和列） 每个数值代表列的宽度, 数值的个数就是列数 2. 在父容器中设置行 每个数值代表行高, 数值的个数就是行数 3. 使用 CSS 网格单位设置列和行的大小 类似于ps绝对定位单位, em相对(父元素)定位单位,rem相对(根元素)定位单位 CSS 网格单位的相对定位单位是fr (fraction 片段) 按比例占领剩余尺寸 auto 根据内容占据尺寸 % 按百分比占领剩余尺寸...
【CSS】栅格(Grid)布局
前端学习博客
05-10 675
【CSS】栅格(Grid)布局 文章目录【CSS】栅格(Grid)布局声明栅格划分行列一个🌰简写形式的🌰行列间距栅格命名元素定位一个🌰根据偏移量(span)定位栅格对齐justify-content 和 align-content (栅格在容器内的排列)justify-items 和 align-items (所有元素在栅格内的排列)元素单独对齐 声明栅格 display: grid; display: inline-grid; 划分行列 使用 grid-template-columns 划分列数
【前端响应式】栅格基础原理及实现
qq_34838046的博客
09-13 415
功能1：基础响应式栅格 float + 百分比宽度 功能2：列偏移 margin 功能3：多种设备不同样式 媒体查询media 功能4：列排序 float设置为right 例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=
CSS布局栅格化使用指南及实用代码分享
小畅的博客
05-14 1493
栅格布局（Grid Layout）是一种基于网格系统的布局方式，将页面划分为多个网格单元，通过对网格单元的组合和排列，实现各种复杂的页面布局。栅格布局具有良好的灵活性和可扩展性，可以帮助我们快速地实现响应式设计。列是栅格布局的基本单元，用于存放实际的内容。通过掌握栅格布局，我们可以轻松地实现各种复杂的页面布局和响应式设计。容器是栅格布局的基础，用于包裹所有的栅格元素。要实现响应式设计，我们需要根据不同的屏幕尺寸，调整列的宽度。栅格布局是一种非常实用的布局方式，可以帮助我们轻松地实现响应式设计。
如何使用CSS栅格布局创建一个简单页面布局
YITA90的专栏
10-08 6889
如何创建一个简单的布局与CSS网格布局如果你从未涉猎过印刷设计，你可能就不知道网格布局的思想起源。网格是用来定位一个页面上的设计元素的精确测量工具。这种想法经常被用来在网页上进行内容组织和统一，提升用户的视觉体验。网页设计刚起步的时候，设计和布局都是是相当简单的， 包含头部，侧边栏，内容区域和页脚。现在，随着网络的演变，网页的布局也变得更加复杂，我们也有了更多的网页设计师来摆平他们。我们经常需要大量
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值