栏目头部广告

结婚证自动生成网页如何布局!

结婚本生成软件网页的布局决定了整个网页的设计效果,本任务介绍常见的几种布局方式,并在此基础上确定“中国诗词”网站首页的布局方式。
常见的布局方式有以下几种。
一、固定布局(Fixed)

固定布局是指整个网页有一个固定的宽度。网页的宽度必须指定为一个像素值,在屏幕分辨率为1024pxx768px时,一般将网页宽度指定为960px,因为开发人员发现960px是最适用于网格布局的宽度,既可以整除3、4、5、6、8、10、12和15,也不至于使网页两侧空白太多。现在 PC 端的 Web 开发中依然比较普遍地使用固定宽度布局,因为这种布局具有很高的稳定性与可控性。但是这种布局同时也有一些劣势,如屏幕分辨率跨度较大,固定布局必须考虑网页宽度的最佳设置。

结婚证自动生成网页如何布局!(图1)

二、流式布局(Fluid)
流式布局与固定布局最主要的区别在于表示网页尺寸的单位不同,固定布局的单位是像素,流式布局的单位是百分比,流式布局使网页具有很强的可塑性和流动性。换句话说,通过设置百分比,我们不需要考虑设备尺寸或屏幕宽度,可以为每种情形找到一种可行的方案,使网页的尺寸适应所有的设备尺寸。流式布局与媒体查询和优化样式技术密切相关。

结婚证自动生成网页如何布局!(图2)

三、伸缩布局(Elastic)
伸缩布局与流式布局很像,主要的区别是尺寸单位不同。伸缩布局的尺寸单位不是像素(px)和百分比(%),而是em或rem,解决了固定局部在高分辨率屏幕上几乎无法辨识的问题,且比流式布局灵活,支持浏览器字体大小调整等的正常显示。这一布局更多地应用于移动端网页或应用开发,以适应移动端分辨率多变的特点。

结婚证自动生成网页如何布局!(图3)

四、弹性布局(Flex)
弹性布局是指使用 CSS3 Flex 系列属性进行的相对布局。传统布局主要以水平方式排列对齐元素,对垂直方向上元素的控制力较弱。W3C于2009 年推出的弹性布局方式中,容器有水平的主轴(mainaxis)和垂直的交叉轴(crossaxis)两个方向轴,可以方便、完整、响应式地实现各种页面布局,对于富媒体和复杂排版页面的支持非常大,但是存在兼容性问题。
五、媒体查询
使用媒体查询(@media)可以给具有不同尺寸和介质的设备切换不同的样式。优秀的响应范围设计可以给适配范围内的设备使用者更好的体验。如以下 CSS 代码所示,屏幕水平分辨率大于1200px时文字大小为18px,屏幕水平分辨率大于 992px 时文字大小为 20px,屏幕水平分辨率大于 768px 时文字大小为 22px。
Cmedia (min-width:1200px)(
body{font-size:18px))/*分辨率>=1200px的设备*/ Cmedia (min-width:992px)
body{font-size: 20px/*分辨率>=992px的设备*/
@media (min-width:768px){

body{font-size:22px;))/*分辨率>=768px的设备*/

结婚证自动生成网页如何布局!(图4)

六、任务实现
 考虑到本书读者多为初学者,我们选择最简单易学的固定布局作为“中国诗词”网站首页的布局方式。设置页面固定宽度为1000px,将页面分成上、中、下三个部分,上部是网站 Banner 和导航栏,中部是主要内容区域,下部是页脚。根据栏目设计,内容区域分为诗人、唐诗、宋词和元曲四部分,为了提升显示效果,在内容区域加一个图片显示区域,这样五部分按半包围结构排列,布局结构如图 1-2-2 所示。

标签:
文章详情页广告

随便看看

底部广告