YUI Grids布局原理
(对外版)
布局
- 布局是网页的骨架，网页开发的第一步
- 结构
模块 
最终页面 
不同的布局思路
(照片出自http://flickr.com/photos/ckalinw/)
(照片出自http://flickr.com/photos/my_soul_insurance2004/)
YUI Grids的好处
- 解决重复劳动
- 稳定
- 黑盒系统
- 自由安排内容的下载顺序
- ~4K，支持>1000种页面布局
- 适应所有IAB广告标准
开始
<body>
<div>
<div id="hd"> </div>
<div id="bd"> </div>
<div id="ft"> </div>
</div>
</body>
一个页面的最原始结构
引用YUI Grids CSS文件
<link rel="stylesheet" type="text/css" href="http://cn.yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
第一步：决定页面的宽度(1)
<body>
<div id="doc">
<div id="hd"> </div>
<div id="bd"> </div>
<div id="ft"> </div>
</div>
</body>
- #doc - 750px居中 (适合800x600)
- #doc2 - 950px居中 (适合1024x768)
- #doc3 - 100%液态 (适合everybody)
- #doc4 - 974px居中 (适合1024x768)
- #doc-custom - 自定义宽度
第一步：决定页面的宽度(2)
<body>
<div id="doc-custom">
<div id="hd"> </div>
<div id="bd"> </div>
<div id="ft"> </div>
</div>
</body>
<style> div#doc-custom{width:960px;} </style>
第二步：划分基本的内容块(2)
<div id="bd">
<!--start: 财经要闻 {> ... <!--} end: 财经要闻>
<!--start: 证券要闻 {> ... <!--} end: 证券要闻>
<!--start: 理财消费 {> ... <!--} end: 理财消费>
<!--start: 能人观点 {> ... <!--} end: 能人观点>
<!--start: 最新股票 {> ... <!--} end: 最新股票>
<!--start: 收益排行榜 {> ... <!--} end: 收益排行榜>
</div>
第二步：划分基本的内容块(3)
<div id="bd">
<div class="yui-b">
<!--start: 财经要闻 {> ... <!--} end: 财经要闻>
<!--start: 证券要闻 {> ... <!--} end: 证券要闻>
<!--start: 理财消费 {> ... <!--} end: 理财消费>
</div>
<div class="yui-b">
<!--start: 能人观点 {> ... <!--} end: 能人观点>
<!--start: 最新股票 {> ... <!--} end: 最新股票>
<!--start: 收益排行榜 {> ... <!--} end: 收益排行榜>
</div>
</div>
第二步：划分基本的内容块(4)
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<!--start: 财经要闻 {> ... <!--} end: 财经要闻>
<!--start: 证券要闻 {> ... <!--} end: 证券要闻>
<!--start: 理财消费 {> ... <!--} end: 理财消费>
</div>
</div>
<div class="yui-b">
<!--start: 能人观点 {> ... <!--} end: 能人观点>
<!--start: 最新股票 {> ... <!--} end: 最新股票>
<!--start: 收益排行榜 {> ... <!--} end: 收益排行榜>
</div>
</div>
第三步：选择模板
<body>
<div id="doc" class="yui-t1">
<div id="hd"> </div>
<div id="bd">
......
</div>
<div id="ft"> </div>
</div>
</body>
.yui-t1 - 2栏, 窄栏在左侧, 160px
.yui-t2 - 2栏, 窄栏在左侧, 180px
.yui-t3 - 2栏, 窄栏在左侧, 300px
.yui-t4 - 2栏, 窄栏在右侧, 180px
.yui-t5 - 2栏, 窄栏在右侧, 240px
.yui-t6 - 2栏, 窄栏在右侧, 300px
内嵌布局
- 格子Unit (.yui-u)
- 网格Grid (.yui-g, .yui-gb, .yui-gc, .yui-gd, .yui-ge, .yui-gf)
- 首格子 (.first)
网格类型
- 两列
.yui-g 1/2 - 1/2 (均匀分布)
.yui-gc 2/3 - 1/3
.yui-gd 1/3 - 2/3
.yui-ge 3/4 - 1/4
.yui-gf 1/4 - 3/4
- 三列
.yui-gb 1/3 - 1/3 - 1/3 (均匀分布)
使用Grids
- ~2分钟
- Grids的灵活性: 演示
Homework
要求：用YUI Grids手写完成上面Mockup的布局效果。
好好学习，天天向上!
Made with Eric A Meyer's S5
第2步 
第4步 
效果
Oct 28, 2022 11:04:49 PM
I'm sure usually to blogging and i genuinely appreciate your content regularly. Necessary . has truly peaks my interest. Most definitely i'll bookmark your internet site and gaze after checking achievable details. AdSense Approval
Feb 08, 2023 09:58:13 PM
Regards for all your efforts that you have put in this. Very interesting info. SaaS Lawyer
Jan 09, 2024 02:15:16 AM
Board Model Papers 2024 provide all states of 6th to 10th text books 2024 Candidates who are Searching for 6th to 10th and 11th to 12th text books and syllabus, sample questions, exam pattern, and Co-Curricular Subject textbooks can refer to this entire article. boardmodelpaper.com and question papers for following the website and Arts, Science, Commerce Stream Subject Wise Solved Question Bank for Hindi & English Medium Students with Exam Pattern & Blueprint and subject Wise with 11th & 12th Question Bank 2024 for General & Vocational Course. Here, we have gathered all subjects of Board textbooks for all Class along with the direct download links.
Jan 28, 2024 06:35:51 PM
I’m impressed, I have to admit. Genuinely rarely should i encounter a blog that’s both educative and entertaining, and without a doubt, you’ve got hit the nail for the head. Your thought is outstanding; the problem is a thing that there are not enough everyone is speaking intelligently about. My business is happy i found this in my hunt for some thing regarding this. 고카지노보증