【HTML5响应式网页设计T1-T2】

一、网页布局

1.布局

1.1分类导航或菜单等场合

 div-ul(ol)-li

1.2图文混编场合

div-dl-dt-dd

1.3图文布局或显示数据

div-table-tr-td

1.4布局表单

 div-form-table-tr-td

2.label标签

<label for="#" accesskey="#"></label>

注：

1.<label>标签具有提示表单含义的功能

 2.for表示<label>标签要绑定的HTML元素，当点击该标签时，所绑定的元素将获取焦点

3.accesskey表示访问<label>标签所绑定的元素的热键，当按下热键时，所绑定的元素将获取焦点

3.折叠边框：

border-collapse:collapse;

4.fieldset和legend

<fieldset>

        <legend></legend>

</fieldset>

fieldset：对表单进行分组，一个表单可以有多个fieldset。 legend：说明每组的内容描述。

二、页面美化

1.响应式布局

1、概念

响应式开发就是使用媒体查询对不同宽度的设备进行布局和样式的设置，从而达到适配不同设备的目的。

1.1响应式设计优点：
1.1.1面对不同分辨率设备时，灵活性较强

1.1.2能够快捷解决多设备显示适应问题
1.2响应式设计的缺点

• 工作量大，需要针对不同设备设置样式。
• 在一定程度上会改变原有的网页布局，会造成用户使用的不方便。

2、视口

1、概念

视口（viewport）就是浏览器显示页面内容的屏幕区域。

2.1 布局视口（layout viewport）

特点：看得全，看不清
一般移动设备的浏览器都会默认设置一个布局视口，Android、ios设备基本上都将这个视口分辨率设为980px。

2.2 视觉视口（visual viewport）

视觉视口指用户看到的网页区域。也就是，移动端按照电脑端的内容大小显示，只能显示页面的一小部分，可以通过滑动来查看其他部分。
特点：看得清，看不全

3、理想视口的实现方式

<meta name="viewport" 
      content="width=device-width,
      initial-scale=1.0,
      minimum-scale=1.0,
      maximum-scale=1.0,
      user-scalable=no" />

三、媒体查询

1、概念

媒体查询（Media Query）是CSS3的新语法，可以针对不同的媒体类型设置不同的样式，也就是可以针对不同的屏幕尺寸设置不同的样式。

2、基本语法

注意点：

关键字和媒体特征之间必须加空格
使用媒体查询之前必须先设置理想视口

@media 设备名 only (选取条件) not (选取条件) and (设备选取条件) {
           CSS样式规则  
}
@media 媒体类型 关键字 (媒体特征){
    css样式
}

在响应式设计中仅仅设置视口是不够的，还需要CSS的媒体查询来配合使用。媒体查询是制作响应式布局的一个利器，使用这个工具可以非常快捷的制作出各种内容丰富且实用性强的界面

2.1媒体查询可以获取的值：

2.1.1设备的宽和高

2.1.2渲染窗口的宽和高

2.1.3设备的手持方向

2.1.4画面比例

2.1.5设备比例

2.1.6对象颜色或颜色列表

2.1.7对象的分辨率

2.2可用设备名参数

参数名	说明
all	所有设备
braille	盲文
embossed	盲文打印
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示，比如幻灯片
screen	彩色电脑屏幕
tty	固定间距字符网格的媒体，比如电传打印机
speech	演讲
tv	电视

2.3媒体查询属性

媒体特征

值	解释说明
width	输出设备中页面可见区域的宽度
min-width	输出设备中页面最小可见区域的宽度
max-width	输出设备中页面最大可见区域的宽度

关键字

关键字	解释说明
and	连接多个设备
not	排除某个设置
only	仅表示某个设备

2.4媒体查询在网页中的使用方式

在样式表中内嵌@media

@media all and (max-width:768px) {
    .menu{
        background-color: black;
    }
}

在link中使用 @media

<link rel="stylesheet" type="text/css" 
media="all and (max-width:768px)" href="ipad.css"/>

四、弹性布局

4.1概念

弹性布局（flexible Box）是一种页面布局方式，缩写为：flex，用来对盒状模型提供的最大的灵活性，任何一个容器都可以指定为flex布局。

弹性布局也被称为：flex布局、伸缩布局、伸缩盒布局、弹性盒布局

4.2、布局原理

通过给父盒子添加flex属性（display: flex;），来控制子盒子的位置和排列方式。极大的方便了页面的盒子布局，与传统布局方式相比，更加简便，更加快速。

4.3弹性布局的相关属性

4.3.1设置主轴方向

flex-direction

在flex布局中，方向分为主轴和侧轴两个方向，默认情况下：

注意：主轴和侧轴是相对的，不是绝对的. 如果设置水平方向为主轴，那垂直方向就是侧轴； 如果设置垂直方向为主轴，那水平方向就是侧轴。

4.3.2弹性布局的相关属性

属性	说明
display	值为flex时，创建弹性布局容器
flex-direction	伸缩流方向row(默认值)主轴为水平方向，排列顺序与页面的文档顺序相同。row(默认值)主轴为水平方向，排列顺序与页面的文档顺序相同row-reverse主轴为水平方向，排列顺序与页面的文档顺序相反。
flex-wrap	伸缩流换行。nowrap(默认值)容器中的伸缩项目只占满容器在主轴方向上的一行，可能出现伸缩项目相互重叠或超出容器范围的现象。wrap当容器中的伸缩项目超出容器在主轴方向上的一行时，会把伸缩项目排列到下一行。下一行的位置与交叉轴的方向一致。wrap-reverse与wrap的含义类似，不同的是下一行的位置与交叉轴的方向相反。column-reverse主轴为垂直方向。排列顺序为从上到下
flex-flow	伸缩流(包含方向与换行)，综合了flex-direction和flex-wrap属性
justify-content	主轴对齐：flex-start默认值，项目位于容器的开头 。flex-end项目位于容器的结尾。center项目位于容器中心。space-between项目位于各行之间留有空白的容器内。space-around项目位于各行之前、之间、之后都留有空白的容器内
align-items	侧轴对齐：stretch默认值，项目被拉伸以适应容器。center项目位于容器的中心。flex-start项目位于容器的开头。flex-end项目位于容器的结尾、。baseline项目位于容器的基线上
align-content	堆栈伸缩行，只有在flex-wrap:wrap和wrap-reverse。设置下且伸缩项目存在多行时才生效。stretch默认值，项目被拉伸以适应容器 center项目位于容器的中心 。flex-start项目位于容器的开头。flex-end项目位于容器的结尾。space-between项目位于各行之间留有空白的容器内。space-around项目位于各行之前、之间、之后都留有空白的容器内
flex	用于设置或检索弹性模型对象的子元素如何分配空间，是flex-grow、flex-shrink和flex-basis属性的简写属性，即伸缩性。默认值是0 1 auto
order	设置或检索弹性模型对象的子元素出现的顺序。默认值是0
flex-grow	一个数字，规定项目将相对于其他灵活项目进行扩展的量，即扩展比率
flex-shrink	一个数字，规定项目将相对于其他灵活项目进行扩展的量，即收缩比率
flex-basis	项目的长度。合法值"auto" “inherit” 或一个后跟"%" “px” "em"或任何其他长度单位的数字，即伸缩基准值

4.3.2设置主轴上子元素的排列方式

justify-content

属性值	解释说明
flex-start	默认值，从头部开始排列（左对齐）
flex-end	从尾部开始排列（右对齐）
center	在主轴居中对齐
space-around	平分剩余空间（每个子元素占用相等空间）
space-between	先两边贴边，再平分剩余空间

4.2.3 设置子元素是否换行

flex-warp

【参数说明】

属性值	解释说明
nowarp	默认值，不换行
warp	换行

3.4 设置侧轴上子元素的排列方式

3.4.1 单行情况

align-items

参数

属性值	解释说明
flex-start	默认值，从头部开始排列
flex-start	从尾部开始排列
center	在侧轴居中对齐
stretch	拉伸（当未设置子盒子高度时有效果）

3.4.2 多行情况

align-content

参数

属性值	解释说明
flex-start	从头部开始排列
flex-start	从尾部开始排列
center	在侧轴居中对齐
space-around	子元素在侧轴上平分剩余空间
space-between	子元素在侧轴上先分布在两头，再平分剩余空间
stretch	默认值，设置子项元素平分父元素的高度

4.多列布局

能够让文本呈现多列显示状态，多列属性允许在多个垂直列中布局内容

属性	说明
column-count	指定列数，值是数字
column-fill	指定内容在列与列之间的分布方式，如果取balance值，则指浏览器确保不同列之间的长度差异尽可能小，如果取auto值，则按照顺序填充列
column-gap	指定列之间的距离
column-rule	在一条声明中设置column-rule-*的简写属性
column-rule-color	设置列之间的颜色规则，值为颜色
column-rule-style	设置列之间的样式规则，取值与border-style的值相同
column-rule-width	设置列之间的宽度
columns	设置column-span和column-width的简写
column-span	指定元素横向能跨多少列，取值none和all
column-width	指定列宽

4.1 设置子盒子占的份数

flex属性定义子盒子分配剩余空间

flex:份数;

4.2 设置子项自己在侧轴上的排列方式

单独设置子项在侧轴上的排列方式

align-self

4.3 定义子项目的排列顺序

数值越小，排列越靠前，默认为0

order