Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Grids
Search
w3cplus
January 11, 2013
Technology
6
400
CSS Grids
CSS Grids
w3cplus
January 11, 2013
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
160
CSS Future
w3cplus
2
550
Web Animation
w3cplus
5
430
CSS3带来的变化
w3cplus
0
1.3k
Web重构之道
w3cplus
1
2.6k
Sass带来的变革
w3cplus
2
470
Responsive小试牛刀
w3cplus
3
500
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
330
http协议与缓存简述
w3cplus
5
490
Other Decks in Technology
See All in Technology
GraphQLに入門してみた
chiroruxx
2
110
社内共通ルールを値オブジェクトにして社内ライブラリとして運用してみた話
leveragestech
2
1.1k
Challenges - Open Farming Hackdays 2024
loleg
0
530
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
沒想過的前端錯誤處理可能比你有做的還多
line_developers_tw
PRO
0
2k
統計的学習理論読み Chapter 1
kmatsui
3
740
2023 Japan AWS Jr.Championsに選出されての振り返りとこれから
hiropy877
1
130
.NETの非同期戦略とUnityとの相互運用
neuecc
2
2.4k
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
1
150
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
440
Azureコストは水道代/The_47th_Tokyo_Jazug
aeonpeople
3
350
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.4k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.3k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
Scaling GitHub
holman
456
140k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
111
35k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
How to Ace a Technical Interview
jacobian
272
22k
Music & Morning Musume
bryan
39
5.5k
Transcript
Blog: http://www.w3cplus.com QQ: 81059347 QQ交流群: 1041263 新浪微薄: http://weibo.com/w3cplus E-mail:
[email protected]
CSS Grids
“在巴比伦创世神话中,上帝像用粘土烧制砖头那样创造出人类。也正是人类, 将砖块砌成墙。于是最初的网格——砖墙,便 很容易与人类的身体产生关联” 一段短暂的历史 ——艺术史学家Hannah B Higgins
斐波纳契螺旋数列 0,1,1,2,3,5,8,13,21,34,55,89,144... 数学公式 http://www.w3cplus.com/css/the-golden-ratio-in-web-design
黄金比例数学公式 http://www.w3cplus.com/css/the-golden-ratio-in-web-design
交流方式的变化 Alex Wright 宣传性 交互性 Glut: Mastering Information Through the
Ages
网格设计原则 网格以解决问题为首要任务,美观在其次 网格是用户体验的组成部分 网格越简单,就越有效
网格设计步骤 进行调查,明确要求 画线框图 设计准备 正式设计 编写代码 基本草图 建立单元、栏、基线以及 进行计算 页面草图
调查并明确限制条件 设计师 观众是谁? 背景是什么? 设计方案什么时候起作用? 设计方案如何起作用? 为什么这种方案是必要的? 过早设 计缺点 设计出不当的单元和栏
解决了部分问题,又导致新问题 没有预见到开始不明显的问题 证明极不合格需重建网格 设计的网格制作出来证明不可用 限制 条件 技术限制 决定设计的表达方式 商业限制 决定了设计目的 内容和排版 决定了设计的内容
画草图
网格术语 单元格 栏 缝(间距) 区域 容器
网格术语 单元格 网格的基本构成,一个单元就是页面上最 小的纵向分割区域
网格术语 缝(间距) 单元格与单元格之间的间距
网格术语 栏 成组的单元格合在一起
网格术语 区域 相似栏的组合,形成页面的各部分
网格术语 容器
网格中数字 12 12是理想的一个数字,他是3和四的倍数
网格中数字 12 页面分成12格,分成三栏,每栏四个网格3个间距 3 X 4 3 X 4 3
X 4
网格中数字 12 页面分成12格,分成2栏,每栏6个网格5个间距 2 X 6 2 X 6
网格中数字 12 页面分成12格,分成4栏,每栏3个网格2个间距 4 X 3 4 X 3 4
X 3 4 X 3
网格中数字 12 页面分成12格,分成4栏,每栏3个网格2个间距 4 X 3 4 X 3 4
X 3 4 X 3
网格中数字 12 页面分成12格,分成6栏,每栏2个网格1个间距 6 X 2 6 X 2 6
X 2 6 X 2 6 X 2 6 X 2
网格计算 内容宽度 (场景宽度) ((总单元格数-1)X间距) 总单元格数 = 单元格宽度
12网格960计算 内容宽度 (场景宽度) ((总单元格数-1)X间距) 总单元格数 = 单元格宽度 940 ((12-1)X20) 12
= 60
16网格960计算 内容宽度 (场景宽度) ((总单元格数-1)X间距) 总单元格数 = 单元格宽度 950 ((16-1)X10) 16
= 50
其他网格计算 内容宽度 (场景宽度) ((总单元格数-1)X间距) 总单元格数 = 单元格宽度 http://grids.heroku.com/
编写代码 bootstrap为例 总容器:container 关键类名 行格:row 单元格:span* span1 span2 span3 span4
span5 span6 span7 span8 span9 span10 span11 span12
编写代码 bootstrap为例 单元格宽度 940 ((12-1)X20) 12 = 60 http://www.w3cplus.com/css/bootstrap-twitter
编写代码 bootstrap为例 栏宽度 .span12 : 940px (12个单元格11个间距) .span11: 860px (11个单元格10个间距)
.span10 : 780px (10个单元格9个间距) .span9: 700px .span8: 620px; .span7 : 540px; .span6 : 460px; .span5 : 380px; .span4 : 300px; .span3: 220px; .span2: 140px; .span1: 60px;
编写代码 bootstrap为例
编写代码 bootstrap为例
编写代码 bootstrap为例 https://github.com/twitter/bootstrap/b lob/master/docs/assets/css/bootstra p.css
编写代码 bootstrap为例 https://github.com/twitter/bootstrap/blob/master/less/variables.less
编写代码 bootstrap为例 https://github.com/twitter/bootstrap/blob/master/less/mixins.less https://github.com/twitter/bootstrap/blob/master/less/grid.less
编写代码 960gs http://960.gs/ http://www.w3cplus.com/css/css-layout-with-960-grids
网格系统 http://www.w3cplus.com/source/30-css-grid-system.html
Responsive网格系统 http://www.w3cplus.com/source/8-useful-responsive-css-frameworks.html
网格系统资源 CSS布局——960gs http://www.w3cplus.com/css/css-layout-with-960-grids CSS——Bootstrap From Twitter http://www.w3cplus.com/css/bootstrap-twitter 30+ CSS Grid
System http://www.w3cplus.com/source/30-css-grid-system.html 8个实用的响应式设计框架 http://www.w3cplus.com/source/8-useful-responsive-css- frameworks.html 16个优秀的Responsive CSS框架 http://www.w3cplus.com/source/16-responsive-css- frameworks-worth-considering.html
网格制作工具 http://www.w3cplus.com/source/front-end-developer-excellent-tool.html
问与答
Blog: http://www.w3cplus.com QQ: 81059347 QQ交流群: 1041263 新浪微薄: http://weibo.com/w3cplus E-mail:
[email protected]
谢谢!