飞龙博客

善人行善,从乐入乐。

飞龙前端殿堂0:页面布局基础.txt

feilong.org 修订于2017-06-06 04:24:19 232

version:fl20151116gz

一、什么是大布局?

一个页面内容一般很多,但可以对它进行分区细化,拆分后,再组装,化繁为易。

页面最粗略的分区,包括 页头 大包围 页脚 ,
大包围 内 是 主内容 侧边栏 。

大布局5个基本构成 = ( 页头 + 大包围 > (主内容+侧边栏) + 页脚 )

head wrap main seco foot

其中:
大包围 wrap 是网页的重点划分:把 主内容main 和 侧边 seco 包裹着。
页头/页脚是整站/某子站/某频道/某栏目通用的部分。

以上元素都在 body 标签内,属于网页可见部分
网页不可见部分在 head标签内

因此一个通用的网页布局,也许是这样的:

<div class="top">...<!-- top --></div>
<div class="head">...<!-- head --></div>
<div class="nav">...<!-- nav --></div>
<div class="ban">...<!-- ban --></div>
 
<div class="wrap">
<div class="main">...<!-- main --></div>
<div class="seco">...<!-- seco --></div>
<!-- wrap --></div>
 
<div class="tail">...<!-- tail --></div>
<div class="foot">...<!-- foot --></div>

或用汉语拼音:头 脖 身主次 尾, 不推荐。

<div class="tou">...<!-- tou --></div>
<div class="bo">...<!-- bo --></div>
 
<div class="shen">
<div class="zhu">...<!-- zhu --></div>
<div class="ci">...<!-- ci --></div>
<!-- wrap --></div>
 
<div class="wei">...<!-- foot --></div>

其它大布局
大世界:把其它所有布局区包裹起来, room /all
天花板:把head包裹起来,headout /head
地板:把foot包裹起来, footout /foot

二、什么是小布局?

如果大布局或页头或页脚,出现好几屏,或好几栏,这就是小布局,又叫 分区分栏。

小布局 = (大布局元素下的) 分区|分栏

网页当前位置模块,可以算小布局: navhere phare

三、什么是模块?
模块是页面布局里的最基本的单元,它是html分析研究 最主要的对象!

页头 > (站名logo + 主导航 + 快捷导航)
页脚 > (页脚logo + 页脚导航 + 版权信息)

大包围 > (主内容 + 侧边栏)

主内容 > 小布局 > (各种各样的模块)

侧边栏 (> 小布局 ) > (侧边菜单模块 + 其它模块)

站名logo

<h1><a class="logotop" href="index.html">站点标题</a></h1>

四、最常见的基础模块有哪些?

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

更新网址:http://feilong.org/front-end-temple-page-layout-basic
最初发布:20170606 03:49:26 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 前端开发

新作:

旧文:

飞龙前端QQ群