前端页面制作流程分享与总结

前端页面制作流程分享与总结

摘要：

本周主要分享一个移动端页面的制作流程，以及注意事项

一、设计图分析

 

 

1、看到设计图首先分析该前端页面包含几部分，大致怎样布局？

该页面包含6部分：标题、机构简介、课程介绍、师资介绍、联系我们、详情页面；采用常规布局方式，自上而下，从左到右；

 

2、考虑采用哪种方法制作手机端前端页面？

目前常用的方法有：

（1）字体缩放或rem（固定宽度640px或750px，具体根据情况js动态计算font-size的值）；

（2）直接写或aui框架（宽度按320px）；

备注：在不同的移动终端设备中，实现UI设计稿的等比例适配。但使用rem、字体缩放在大屏设备上并没有展示更多的内容，而且大屏手机看到的字也比较大。因为每个浏览器对最小font-size的支持，不尽相同。js动态计算的font-size值太小时，会导致超小屏上UI显示效果比预想中的偏大。比如，font-size计算是10px，但是chrome只支持到12px，他就按照12px去渲染了，这就会导致UI偏大了。

 

3、切图

根据布局方式、前端页面的写法考虑该怎样切图，使前端页面制作跟设计图更符合。

（1）能用css实现的效果尽量不要切成图片；

（2）对于有规律的图片可以只切一部分，然后根据情况平铺；

二、页面制作：

1、第一部分：标题

 

 

这里使用背景图片，然后将标题整体右浮动，背景图片需要写高度，防止标题过长时将背景图片撑开，使图片变形；也可以使用img标签，用position定位来写。

2、第二部分：机构简介

 

（1）机构简介整体背景可以用css实现：background-color:#76ab5d; border-radius:18px; box-shadow:3px 3px 3px 0 #333;

（2）border-radius圆角

border-radius：10px  10px  10px  10px  

左上  右上  右下  左下（顺时针）

border-radius：10px  10px   左上右下   右上左下

border-radius：10px  四角

(注意：当圆角的值大于元素的宽就会变成圆形)

 （3）box-shadow阴影

box-shadow：0 0 1px #000 inset;

水平  垂直   模糊  颜色；

   [1] inset代表框内阴影,不加inset代表框外阴影

   [2]第1个值为0时，代表左右边框阴影为1px范围
      第1个值为正整数 代表左边框阴影
      第1个值为负整数 代表右边框阴影
      同理
      第2个值为0代表上下边框阴影
      第2个值为正整数 代表1px阴影距离上边框多少
      第1个值为负整数 代表下边框阴影设置

(注意：box-shadow：0 0 10px颜色 ；四周发光；)

3、第三部分：课程介绍

 

布局同上，css样式标题p添加背景图片，写margin-top：-48px使标题高于外层div，且覆盖在上面；注意当外层div不写padding值时，此时写margin-top：-48px，外层div和标题会一同向上移动48px；不能实现标题高于外层div的效果。

解释：如果有两个嵌套关系的div，外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。

解决方法：

（1）、父层div加： padding-top: 1px;

（2）、在父层div加上：overflow:hidden；

4、第四部分：师资介绍

 

布局同上

5、第五部分：联系我们

 

 

当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别自然的高于文本流,除非设置其z-index值为负值。

6、第六部分：详情页面

 

采用双重定位，在不固定弹出层高度的情况下，使弹出层相对于body垂直居中，并且在不同高度手机屏幕下，弹出层距离顶部底部的间距保持一致。