飞龙前端殿堂0:页面布局基础.txt
feilong.org 修订于2021-01-22 12:18:36 300 次浏览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 教程