甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
分析设计图
上海网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联自2013年创立以来到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
假设设计图大小为1080px。这也就意味着，在开发时，需要兼容的最大分辨率为1080px，最小的为320px。
2. 调整视口
代码实例：
!DOCTYPE html
head
meta charset="UTF-8" /
title布局之路-移动端开发实例/title
meta name="viewport" content="width=device-width,user-scalable = no" /
link rel="stylesheet" type="text/css" href="css/reset.css" /
/head
body
div class="wrap"/div
/body
/html
代码解析：由于使用不同设备打开网页时，宽度均有所不同，所以不能讲视口设置为固定值，应当为width=device-width,即将视口设置为当前设备的宽度。
3. 确定设计图的最小字体
浏览器（部分）能够显示的最小字体未12px，当移动端页面宽度为320px时，要保证最小字体为12px，那么在1080px的设计图中，最小字体应当为42px。
代码实例：
style type="text/css"
html {
font-size: 42px;
}
/style
4. 按照设计图的像素进行开发
按照正常网页开发流程，进行网页开发即可。
5. 使用百分比和rem替换px
代码效果对比：
/*使用固定像素*/
.box {
float: left;
width: 658px;
font-size: 72px;
text-align: center;
line-height: 195px;
}
/*使用百分比和rem*/
.box {
float: left;
width: 60.93%;
font-size: 1.71rem;
text-align: center;
line-height: 4.64rem;
}
代码解析：
水平方向的值，将具体像素调整为百分比。百分比的计算是根据父级的内容区宽度进行计算的。
例如，父级宽度为1080px， 子级元素为197px，那么子元素转换为百分比为：197/1080*100%=18.24%。需要注意的是百分比根据父级计算，当标签结构级别不同时，计算公式中的“分母”也有所不同，在开发时这个地方很容易出现问题，请务必注意。
垂直方向的值，将具体像素调整为rem，与水平方向相比，垂直方向的计算就比较简单。例如，行高为195px，HTML标签当前的字体大小为42px，将行高转换为rem单位，即195/42= 4. 64rem。
1）像这样的行内标记，定义它的margin-top和margin-bottom是无效的，除非你把它设置为块状元素才可以。Display:block
2）对于块状元素，你可以自由的使用外边距来定义版式和元素之间的距离。类似 DIV 等等，
3）无论什么元素，一旦设置为是浮动显示，就拥有了完整的盒模型结构，我们就可以使用外边距，内边距，边框，高和宽来控制的大小以及与其他对象之间的位置关系。
4）浮动是从网页布局的角度来定义元素的显示，而行内和块状属性主要是从元素自身的性质来定其显示的。
5）当元素没有定义边框时，可以把内边距作为外边距使用。有时候外边距会有重叠现象的。
6）当为元素定义背景图像时，内边距区域内可以显示背景图像，而对外边距区域来说，背景图像是达不到的，他永远都是透明状态
7）用div+css设计网页结构时，设计师满脑子都是网页内容，而非内容所呈现的效果。
8）块状元素：不管块状元素宽度是多少，他总会自动占据一行，因为在他末尾附加了一个换行符，而行内元素没有这个特点。块状元素有完整的盒模型结构，可以定义宽度和高度，而行内元素没有这个特性，无法通过高度来改变文本行的行高。
块元素的代表标记 div
行内元素的代表标记 span ，行内标记不具备组织结构框架
9）网页布局分为：自然布局，浮动布局， 定位布局
10）当一个元素被定义为浮动显示时，即定义为块状元素。并且该元素就会收缩自身体积为最小状态。所以，应该有个好的习惯即把浮动元素设置高和宽。如果没有设置，则元素会按照它所包含的内容大小来确定它的大小。
11）当元素浮动后，周边的对象会自动环绕浮动元素周围，形成一种环绕关系。
12）块状元素之间的外边距会有重叠现象，但是浮动元素之间的外边距不会发声重叠现象。
13）浮动元素移动，上移：margin-top:-**; 下移：margin-botom:-*px,其他以此类推。
14）一般定位元素（绝对或是相对元素）都会覆盖在文档流对象之上。但是，select元素的窗口控件还不完全支持z-index
15）在css定位布局中，一般遵循“外部相对定位，内部绝对定位”
16）在body中设置min-width:760px,可以避免布局重叠现象。
可以通过DIV来分块布局，然后通过CSS样式来调整大小，颜色等样式。参考代码如下：
!DOCTYPE html
html
head
style
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
/style
/head
body
div id="header"
h1第一层/h1
/div
div id="nav"
第二层左侧
/div
div id="section"
第二层右侧
/div
div id="footer"
第三层
/div
/body
/html
justify-content: space-between;
align-items: center;
这两行放到ul上面
步骤1 创建空白的HTML 5模版
首先，我们创建一个空白的模版，代码很简单，如下所示：
复制代码
步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：
复制代码
读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的 步骤3 往HTML 5标签中增加代码
1）首先往标题中增加如下代码：
Simple HTML5 Template
复制代码
2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：
Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact
复制代码
3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：
This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s
复制代码
4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
根据目前的规范，元素有两种使用方法：
被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。