飞龙博客

飞龙博客 飞龙在天

飞龙前端殿堂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 教程

新作:

旧文:

blog money bui 教程 echarts 教程 eclipse 教程 html css 教程 IT趋势 js 教程 json 教程 mysql 教程 nodejs npm 教程 onblog SQLite 教程 tutorials vscode 教程 wap网站 winpe启动盘 wordpress 主机推荐 书法 前端开发 博客 名企名网 国学 域名注册 常用软件 建站程序 操作系统 教程 数码 无线上网 日记 电子商务 电脑笔记本 网站 网站优化 网站开发 网站推广 网站策划 网络 虚拟现实 默认