河南索易客信息技术限公司为您免费提供焦作网站建设,焦作网络推广,焦作seo优化等相关信息发布和资讯展示,敬请关注!  

焦作网页设计中的布局

来源:http://jz.soeke.cn/news651897.html  发布时间 : 2021-07-20 11:06:00

河南索易客信息技术限公司为您免费提供焦作网站建设,焦作网络推广,焦作seo优化等相关信息发布和资讯展示,敬请关注!

  网页设计中的布局

  网页设计中的布局可以从两个角度来看:设计视角和前端视角。本篇文 章主要侧重分析前端视角,由于设计视角比较好理解,所以不做太多的 赘述。

  设计视角

  设计视角主要是从网页的排版角度去进行分类,大致分为四种:上下布 局、左右布局、国字形布局和T字形布局。

  上下布局是常见的布局方式,基本上都会在上方有一个导航,下方 是内容区,有的官网还会有页脚footer,站酷就是上下布局。左右布局 在后台类、TO B类产品中比较常见,一般左侧为侧边栏,右侧为内容区 。国字形布局和T字形布局其实算作上下布局,只不过比较典型,可以单 拎出来作为一种布局类型。

  前端视角

  首先为什么要了解些前端的布局方式呢,直接甩给前端一个设计稿,让 他去实现不就行了?其实这涉及到的是设计和开发之间的协作关系,一 个有规律有规范的设计稿,前端实现起来更加容易,也方便他管理自己 的代码,实现出来的样式也会更灵活,在出设计稿之前和前端沟通一下 ,采用什么布局方式,需要设计怎么配合,也费不了多少工夫。当然直 接甩个设计稿,前端也能实现,但一些特殊效果真的是需要双方合作才 能完成的。

  前端视角主要是指实现页面的各种CSS布局方式,

  归纳了5种:静态布局、流式布局、响应式布局、弹性布局和Flex布局。 除了静态布局,其他都能实现在不同分辨率下页面的自适应,来给用户 更佳的视觉呈现。

  静态布局(static layout)

  静态布局也叫做固定布局,网页内容区采?完整宽度,网页内每个模块 的尺寸大小固定,一般整体在浏览器内居中显示,并会设置小宽度 min-width,当分辨率小于较小宽度就会出现滚动条,如果大于更小宽 度则内容居中外加背景 。

  流式布局(fluid layout )

  流式布局英文fluid layout,也可以翻译成liquid layout,是指页面 按照百分比%定义宽度(也就是长度单位不是我们平常使用的px,而是百 分数),来适配不同的屏幕分辨率,在不同的分辨率下网页布局保持不 变,一般搭配min-、max-属性来控制尺寸流动范围,以免过大或者过小 影响展示和阅读,页面内元素的高度和文字大小往往px来固定住,方便 页面排版和阅读。

  流式布局的特点是,如果宽度太小,放不下两个元素,后面的元素会自 动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了 水平滚动条的出现。

  响应式布局(responsive layout )

  响应式布局是指网页分别为不同的屏幕分辨率定义不同的布局,同时在 每个布局中,各元素大小采用百分比定义宽度,即页面元素宽度随着窗 口调整而自动适配。可以看做是定义了几个不同尺寸的流式布局。

焦作网站建设哪家好?焦作网络推广哪家好?seo优化注意事项?河南索易客信息技术有限公司专业承接网站建设,网络推广,seo优化,电话:18680289960

[productname]

相关标签:网页设计,网页设计的布局,