飞龙前端殿堂0：页面布局基础.txt
feilong.org 修订于2021-01-22 12:18:36 348 次浏览version:fl20151116gz
一、什么是大布局？
一个页面内容一般很多，但可以对它进行分区细化，拆分后，再组装，化繁为易。
页面最粗略的分区，包括 页头 大包围 页脚 ，
大包围 内 是 主内容 侧边栏 。
大布局5个基本构成 = ( 页头 + 大包围 > (主内容+侧边栏) + 页脚 )
head wrap main seco foot
其中：
大包围 wrap 是网页的重点划分：把 主内容main 和 侧边 seco 包裹着。
页头/页脚是整站/某子站/某频道/某栏目通用的部分。
以上元素都在 body 标签内，属于网页可见部分
网页不可见部分在 head标签内
因此一个通用的网页布局,也许是这样的：
...
...
...
...
...
...
...
或用汉语拼音：头 脖 身主次 尾， 不推荐。
...
...
...
...
...
其它大布局
大世界：把其它所有布局区包裹起来， room /all
天花板：把head包裹起来，headout /head
地板：把foot包裹起来， footout /foot
二、什么是小布局？
如果大布局或页头或页脚，出现好几屏，或好几栏，这就是小布局，又叫 分区分栏。
小布局 = (大布局元素下的) 分区|分栏
网页当前位置模块，可以算小布局： navhere phare
三、什么是模块？
模块是页面布局里的最基本的单元，它是html分析研究 最主要的对象！
页头 > (站名logo + 主导航 + 快捷导航)
页脚 > (页脚logo + 页脚导航 + 版权信息)
大包围 > (主内容 + 侧边栏)
主内容 > 小布局 > (各种各样的模块)
侧边栏 (> 小布局 ) > (侧边菜单模块 + 其它模块)
站名logo
站点标题
四、最常见的基础模块有哪些？
a 列表模块：div >( h3+ ul >(li*n) )
b 段落模块：div >( h3+ div >(p *n) )
c 定义模块：div >( h3+ div >(dl*n) )
五、模块的基本构成
模块写法：基本结构是日字，也有可能是口字或其组合。
把某个模块拆分后：
简称1：外衣、 头、内衣、项
全称1：模块外衣、 模块头、模块内衣、模块项
详情参考：列表模块 > 模块小结
六、如果做手机端页面
美工效果图一般是720/750，而手机视窗最小是320，因此需把效果图宽度压缩到320宽后再用photoshop查看尺寸。
效果图和手机视窗之间 字号换算法
720px :320px
9:4=2.25
20.25px :9px=2.25
22.5px :10px=2.25
24.75px :11px=2.25
27px :12px=2.25
20.25px :13px=2.25
31.5px :14px=2.25
33.75px :15px=2.25
36px :16px=2.25
38.25px :17px=2.25
40.5px :18px=2.25
42.75px :19px=2.25
45px :20px=2.25
start-fl20151029gz
更新网址：https://feilong.org/front-end-temple-page-layout-basic
最初发布：20170606 03:49:26 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： html css 教程
