关于移动web前端布局,怎样做出这样的设计?
说句题外话，这图片是终稿吗，你们这美工的水平也过于惊悚了。另外，按照这个图，很难做到各种分辨率下百分之百与原稿一致的，产品经理真要有这颗完美的心，先弄一个交互文档设计文档，明确设计语言，然后按照多个常见分辨率下多出几个设计图吧，没有这金刚钻就别提变态要求。实在不行的话，我给你一个百分之百一致的方法：1. 背景图切出来覆盖全屏2. 其他元素切成一张前景图，包括文字等3. 前景图随分辨率等比缩放这样是不是完美适应了？保证各部分比例正确，没有像素溢出。但是可用性怎样就不说了。
■网友
我觉得生活中的网页布局无非就是这几种了现在的网页差不多都采用分列布局 ，常见的有单列布局（如百度首页）、双列布局、三列布局和混合布局，超过三列的布局很少见，在此只介绍以上四种。 混合布局可以看作是在三列布局的基础上，再继续分块。本文仅从宏观结构上介绍，比如新浪、腾讯首页可以看作是三列布局，淘宝、京东首页可以看做是混合布局，这些大型网站会根据其内容更改其布局。最简单的要数单列布局了，这种布局适合各种搜索引擎主页，干净的界面和较少的干扰信息给用户较好的体验。单列布局
两列布局：
三列布局：
混合布局：
【关于移动web前端布局,怎样做出这样的设计?】
可以发现，网页布局无非就是并列、嵌套、层叠这几种，将网页的结构分辨清楚，要设计出类似的网站也就不是什么难题了。下面来分析一下布局的相关代码：单列布局在于设置块状元素居中，只需设置 margin:0 auto ;(前面的0是上下外面局，可任意设置)。两列布局在于设置中间主体并排分布，在 左边的块设置float:left ，在 右边的块设置float:right 即可，当然要使两者的width之和等于某一设定值；三列布局只是在两列布局的基础上再将中间块进行二次分割，方法一致，在此不做赘述。最后说一下混合布局中的一个注意事项：由于中间主体设置了float，最后的footer需要通过 清除浮动 来正确显示在主体下方， clear:both 。下面附上混合布局的部分代码：1 HTML 2 \u0026lt;body\u0026gt; 3 \u0026lt;div class="top"\u0026gt; 4 \u0026lt;div class="head"\u0026gt;head\u0026lt;/div\u0026gt; 5 \u0026lt;/div\u0026gt; 6 \u0026lt;div class="main"\u0026gt; 7 \u0026lt;div class="left"\u0026gt;left\u0026lt;/div\u0026gt; 8 \u0026lt;div class="right"\u0026gt; 9 \u0026lt;div class="r_sub_left"\u0026gt;sub_left10 \u0026lt;/div\u0026gt;11 \u0026lt;div class=" r_sub_right"\u0026gt;sub_right12 \u0026lt;/div\u0026gt;13 \u0026lt;/div\u0026gt;14 \u0026lt;/div\u0026gt;15 \u0026lt;div class="footer"\u0026gt;footer\u0026lt;/div\u0026gt;16 \u0026lt;/body\u0026gt;17 18 css:19 .top{ height:100px;background:#9CF}20 .head,.main{ width:960px;margin: 0 auto;}21 .head{ height:100px; background:#F90}22 .left{ width:220px; height:600px; background:#ccc; float: left;}23 .right{ width:740px; height:600px;background:#FCC; float:right}24 .r_sub_left{ width:540px; height:600px; background:#9C3; float:left;}25 .r_sub_right{ width:200px; height:600px; background:#9FC; float: right;}26 .footer{ height:50px; background:#9F9;clear:both;}上面就是html基础的一些主要的步骤了文章来源：更多相似文章
推荐阅读
- 过节■江苏省委省政府办公厅下发关于做好2021年元旦春节期间有关工作的通知
- 西藏首台5G网络车载移动CT仪器投用
- 教育|中国移动“和教育”智慧校园研讨会在通召开
- 夕阳红|南通移动：“智慧养老”手机让“夕阳红”不孤单
- |徐州市出台《关于优化创新创业生态系统 提升区域科技创新活力的实施意见》及实施细则
- 怎样评价华为、诺基亚、中兴中标中国移动高端路由交换设备扩容集采
- 雨下|全球关于禁售燃油车只是理论上可行吗
- 关于用phpfsocket 写Post， 模拟http 报文怎样写入要传输的处理数据
- 为啥Smartisan OS只能支持移动的VoLTE
- 智叔|很多家长还在整箱买：谈谈关于牛奶的17个真相警惕这些列入黑名单的“假牛奶”