最近加入了一个GAE的项目cpedialog,该项目的前端布局采用YUI Grid CSS,我就顺便看了一下,YUI Grid CSS设计的非常优雅,思路非常清晰,打算使用CSS+DIV做网站布局的兄弟非常值得一看。下面我把我记录的一些要点列出来,便于我以后查阅,同时算是 抛砖引玉吧。项目详情请参...
转载 2009-03-04 16:56:00
124阅读
2评论
YUI不仅为我们提供了一个强大的JS框架,同时还提供了几个CSS的框架,分别是Reset、Base、Font以及Grid。通
原创 2022-03-03 17:12:23
87阅读
YUI 中的 Grids CSS 主要有三个部分值得大家关注和学习:1、布局的思想:使用 “负 margin(Negative Margins)” 技术2、使用 em :当用户改变字体大小时,宽度同时改变。技巧:用 13 像素来平分宽度(保留小数到千分位),而 IE 浏览器用 13.333 。/* 750 centered, and backward compatibility */#doc {w
转载 2008-05-20 09:42:00
62阅读
2评论
display: grid;// 设置行与行之间的间距为16px,列与列之间的间距为16pxgrid-gap:
原创 2022-12-21 10:10:33
101阅读
无标题文档 hd (1/2)bd11 (1/2)bd12 (1/3)bd21 (2/3)bd22 ftYUI Grids CSS介绍 by who?http://bbs.blueidea.com/thread-2...
转载 2012-05-11 18:21:00
163阅读
2评论
Grid被设计来做一些Flexbox不能做的事情,所以不是被设计来取代Flexbox的。 flexbox 一维的 Grid 二维的 总结: Grid Items作用在Grid Container的直接子元素下 下面给出一些示例: 1.html: <style> * { margin: 0; padd
原创 2021-09-01 14:03:14
528阅读
In this lesson, we'll create an asymmetric promotional area where our promos get progressively smaller. We'll use CSS Grid to keep our HTML to 6 seman
转载 2020-08-19 03:08:00
98阅读
2评论
YUI3的CSSYUI2的CSS不同 改变最大的我觉得是Grids部分,YUI2中以模版的方式提供给我们调用,功能中多选项也很多
原创 2022-03-02 18:01:33
141阅读
CSS和JS文件经常需要压缩,比如我们看到的XX.min.js是经过压缩的JS。 压缩文件第一个是可以减小文件大小,第二个是对于JS文件,默认会去掉所有的注释,而且会去掉所有的分号,也会将我们的一些参数替换为一些简单的a,b之类的变量,从界面看起来非常难阅读,起到加密作用。 常见的有好多压缩工具,这
JS
原创 2021-07-15 10:20:43
266阅读
使用YUI Compressor压缩CSS/JS JS/CSS文件大,用户访问站点的时候需要下载JS/CSS的时间长就会感觉慢,有的甚至由于CSS的文件而造成页面初始打开很凌乱。 我们怎么提高用户下载JS/CSS的速度呢? 1、我们无法改变用户的网络状况,只有自己网站使用更快的带宽或者使用更强的服务器,使用户访问我们的时候感觉很快。 2、对JS/CSS文件进行压缩,由于文件较小,用户下
原创 2021-06-16 19:21:09
302阅读
CSS Grid Layout(网格布局)是一种二维布局系统,它可以让你创建更复杂和响应式的网页布局。以下是关于 CSS Grid 布局的基础知识和常见用法。1. 基本概念Grid 布局由容器(grid container)和项目(grid items)组成。容器:定义了一个网格布局的元素,使用 display: grid。项目:直接包含在网格容器中的子元素。2. 容器属性display定义一个
原创 2024-06-17 09:48:22
280阅读
CSS grid 布局 display: grid; grid-template-columns: 20% 60% 20%; grid-template-rows: 20% 20% 20% 20% 20%; grid-gap: 10px 10px;
原创 2022-06-30 11:13:17
137阅读
CSS Grid:重塑网页布局的未来引言:网页布局的革命在互联网发展的早期,网页设计者使用简单的HTML表格和float属性来创建布局。这些方法虽然实现了基本的功能,但却充满了缺陷——难以维护的代码、固定宽度的限制以及响应式设计的挑战。现代网页设计的复杂性和用户对高交互性、响应式设计的需求,催生了更强大的布局工具。CSS Grid(网格布局)正是这场革命中最耀眼的明星,它彻底改变了我们创建复杂、响
原创 4月前
57阅读
CSS Grid 布局1. 什么是 Grid 布局Grid(网格布局)定义了网格的行和列,我们可以将网格元素放置在与这些行和列相关的位置上,做出多种布局。2. 为什么学习 CSS Grid 布局Grid 能够定义行和列来进行二维布局,并且简便、灵活。免去了 Bootstrap 等 CSS 框架的使用。主流浏览器都比较支持。3. 开始3.1 第一个网格定义六个 div 用于布局(相关颜色等 css
转载 2021-05-04 22:35:22
378阅读
2评论
区别:Flex布局:    a. 它是轴线布局,只能指定"项目"针对轴线的位置.    b. 可以看作是一维布局.Grid布局:    a. 则是将容器划分成"行"和"列",产生单元格,再指定"项目所在"的单元格.    b. 可以看作是二维布局.Grid布局和 flex 布局时有实质性的区别的,flex 是一维布局,
原创 2023-10-14 15:58:45
128阅读
今天研究了一下YUI yahoo开源框架,感觉很猛啊。 于是乎我做了一个YUI的ant实现,网上好多关于bat的实现,我就另辟蹊径,出个关于这个的ant实现,嘿嘿独一无二的文章,如果转载的话,其注明作者和网站 copyright:Mr.chen 好了具体操作如下: 官网: yuicompressor-2.4.6.jar 下载地址 http://yuilibrary.com/downloads/#
转载 2014-09-12 14:49:00
146阅读
2评论
使用方法: 下载附件并将下列内容保存到一个bat文件即可,压缩目标是本级文件夹下的所有CSS和JS文件 @echo off pause (dir %1 /aa /b /s | findstr /e /c:"js") > compressor.tmp for /f %%...
转载 2016-07-17 16:51:00
73阅读
简介CSSGrid是一种二维网格式布局方式。我们常规使用table、float、position、inline-block等布局,但它们遗漏了很多功能,例如垂直居中。后来css3中flexbox的出现解决了很多布局问题,但是它也是一维布局,而不是复杂的二维布局,Grid是为了解决二维布局问题而创建的CSS模块。使用Gird的好处1.布局清晰明了,摆脱了模板中使用不同标签下基于浮动,定位的手动计算
前提:安装java开发环境并设置了环境变量。然后需要下载yuicompressor-2.4.=
原创 2023-04-07 10:25:01
120阅读
简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式。如我们所知,CSS 总是用于网页的样式设置,但它并没有起到很好的作用。刚开始的时候我们使用表格(table),然后使用浮动(float)、 定位(position)和内联块(in
原创 2022-07-25 10:14:46
284阅读
  • 1
  • 2
  • 3
  • 4
  • 5