CSS3弹性布局、响应式布局、PS

1.响应式Web设计-Viewport
响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定
的版本。
优点:
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点:
兼容各种设备工作量大,效率低下
代码累赘,会出现隐藏无用的元素,加载时间加长
其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构,会出现用户混淆的情况
(1)、什么是Viewport
viewport是用户网页的可视区域。
viewport翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"
窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破
坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的
不同部分。

(2)、设置Viewport
一个常用的针对移动网页优化过的页面的viewportmeta标签大致如下:
<metaname="viewport"content="width=device-width,initial-scale=1.0">
width:控制viewport的大小,可以指定的一个值,如600,或者特殊的值,
如device-width为设备的宽度(单位为缩放为100%时的CSS的像素)。
height:和width相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次load的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放。

2.响应式Web设计-网格视图
(1)、什么是网格视图
很多网页都是基于网格设计的,这说明网页是按列来布局的。
使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。
响应式网格视图通常是12列,宽度为100%,在浏览器窗口大小调整时会自
动伸缩。
(2)、创建响应式网格视图
首先确保所有的HTML元素都有box-sizing属性且设置为border-box。
确保边距和边框包含在元素的宽度和高度间。
添加如下代码:
*{box-sizing:border-box;}
以下实例演示了简单的响应式网页,包含两列:
.menu{
width:25%;
float:left;
}
.main{
width:75%;
float:left;
}
12列的网格系统可以更好的控制响应式网页。
首先我们可以计算每列的百分比:100%/12列=8.33%。
在每列中指定class,class="col-"用于定义每列有几个跨度:
.col-1{width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}
.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}
.col-7{width:58.33%;}
.col-8{width:66.66%;}
.col-9{width:75%;}
.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}
所有的列向左浮动,间距(padding)为15px:
[class*="col-"]{
float:left;
padding:15px;
border:1pxsolidred;
}
每一行使用<div>包裹。所有列数加起来应为12:
<divclass="row">
<divclass="col-3">...</div>
<divclass="col-9">...</div>
</div>
列中行为左浮动,并添加清除浮动:
.row:after{
content:"";
clear:both;
display:block;
}
我们可以添加一些样式和颜色,让其更好看

3.响应式Web设计-媒体查询
(1)、定义和使用
使用@media查询,你可以针对不同的媒体类型定义不同的样式。
@media可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设
计响应式的页面,@media是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页
面。

(2)、CSS语法
动画是使元素从一种样式逐渐变化为另一种样式的效果。
@mediaonlymediatypeand|not(mediafeature){
CSS-Code;
}
你也可以针对不同的媒体使用不同stylesheets:
<linkrel="stylesheet"media="mediatypeand|not|only(mediafeature)"href="mystyles
heet.css">

(3)、媒体类型

  print   用于打印机和打印预览

screen   用于电脑屏幕,平板电脑,智能手机等。

(4)、媒体功能
动画是使元素从一种样式逐渐变化为另一种样式的效果。

device-height定义输出设备的屏幕可见高度。
device-width定义输出设备的屏幕可见宽度。

max-width定义输出设备中的页面最大可见区域宽度。

min-width定义输出设备中的页面最小可见区域宽度。

orientation定义输出设备中的页面可见区域高度是否大于或等于宽度。

(5)、更多实例
使用@media查询来制作响应式设计
如果窗口小于500px,背景将变为浅蓝色:
@mediaonlyscreenand(max-width:500px){
body{
background-color:lightblue;
}
}

(5)、更多实例
使用@media查询来制作响应式设计
如果窗口小于500px,背景将变为浅蓝色:
@mediaonlyscreenand(max-width:500px){
body{
background-color:lightblue;
}
}

4.响应式Web设计-图片
(1)、使用width属性
如果width属性设置为100%,图片会根据上下范围实现响应式功能:
img{
width:100%;
height:auto;
}

(2)、使用max-width属性
如果max-width属性设置为100%,图片永远不会大于其原始大小:
img{
max-width:100%;
height:auto;
}

(3)、背景图片
背景图片可以响应调整大小或缩放。
以下是三个不同的方法:
1.如果background-size属性设置为"contain",背景图片将按比例自适应内容
区域。图片保持其比例不变:

2.如果background-size属性设置为"100%100%",背景图片将延展覆盖整个
区域

3.如果background-size属性设置为"cover",则会把背景图像扩展至足够大,
以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此背景图像的
某些部分无法显示在背景定位区域中。

以下大图片和小图片将显示在不同设备上:
/*Forwidthsmallerthan400px:*/
body{
background-image:url('img_smallflower.jpg');
}
/*Forwidth400pxandlarger:*/
@mediaonlyscreenand(min-width:400px){
body{
background-image:url('img_flowers.jpg');
}
}

5.Photoshop的简单使用
(1)、PS界面组成
菜单栏、选项栏、工具栏、浮动面板(拖拽名称,可单独操作面板)、绘图窗
口​、窗口菜单可显示隐藏所有面板。工作区:(新建)。
(2)、图层操作
图层面板快捷键F7,其实图层就是一张张透明的纸,可以实现叠加问题。

图层选择:使用移动工具V
1、图层缩览图判断
2、按住CTRL,在目标图像上单击
3、将光标放置在目标图像上右键,选择图层名称
图层面板中加选图层:
1、按SHIFT,单击另一目标图层,中间所有图层被选中
2、按CTRL,单击另一目标图层,只选中目标图层

复制图层:选中目标图层后(移动工具状态下)
1、按ALT拖拽图像
2、CTRL+J(重合)

(3)、图层编组
选中目标图层,CTRL+G
取消编组:CTRL+SHIFT+G
双击图层名称可重新命名
双击组名称,可命名组
移动工具V选择组或图层时,需设置选项栏
(4)、图层上下位置移动
1、选中目标图层,在图层面拖拽
2、CTRL+]向上移动图层​CTRL+[向下移动图层
3、CTRL+SHIFT+]图层置顶​CTRL+SHIFT+[图层置底
移动选区或图像时:
移动过程中,没释放鼠标,按住SHIFT,可同一水平线、同一垂线、45度移动。
ps中的撤销操作是:ctrl+z撤销一步、ctrl+alt+z撤销多步。

(5)、Photoshop切图
PS切图可以分为手动利用切片切图以及利用PS的插件快速切图
切片工具
利用切片工具手动划出
图层菜单---新建基于图层的切片
利用标尺基于参考线的切片(选择切片工具)
先选个一个整个的切片,切片选择工具--属性面板中有“划分”--可以等分数
平分切图。
导出切片:文件--存储为web设备所用格式
6.基本的布局方法——Flex布局

(1)、基本概念

在不固定高度信息的例子中,我们只需要在容器中设置以下两个属性即可实现
内容不确定下的垂直居中。
.container{
display:flex;
flex-direction:column;
justify-content:center;
}

flex不单是一个属性,它包含了一套新的属性集。属性集包括用于设置容器,
和用于设置项目两部分。
设置容器的属性有:
display:flex;
flex-direction:row(默认值)|row-reverse|column|column-reverse
flex-wrap:nowrap(默认值)|wrap|wrap-reverse
justify-content:flex-start(默认值)|flex-end|center|space-between|space-around|
space-evenly
align-items:stretch(默认值)|center|flex-end|baseline|flex-start
align-content:stretch(默认值)|flex-start|center|flex-end|space-between|space-around
|space-evenly
设置项目的属性有:
order:0(默认值)|<integer>
flex-shrink:1(默认值)|<number>
flex-grow:0(默认值)|<number>
flex-basis:auto(默认值)|<length>
flex:none|auto|@flex-grow@flex-shrink@flex-basis
align-self:auto(默认值)|flex-start|flex-end|center|baseline|stretch

在开始介绍各个属性之前,我们需要先明确一个坐标轴。默认的情况下,水平
方向的是主轴(mainaxis),垂直方向的是交叉轴(crossaxis)。

'通过设置坐标轴,来设置项目排列方向。
.container{
flex-direction:row(默认值)|row-reverse|column|column-reverse
}
row(默认值):主轴横向,方向为从左指向右。项目沿主轴排列,从左到右

排列。
row-reverse:row的反方向。主轴横向,方向为从右指向左。项目沿主轴排列,
从右到左排列。
column:主轴纵向,方向从上指向下。项目沿主轴排列,从上到下排列。
column-reverse:column的反方向。主轴纵向,方向从下指向上。项目沿主轴
排列,从下到上排列。

flex-wrap属性
设置是否允许项目多行排列,以及多行排列时换行的方向。
.container{
flex-wrap:nowrap(默认值)|wrap|wrap-reverse
}
nowrap(默认值):不换行。如果单行内容过多,则溢出容器。
wrap:容器单行容不下所有项目时,换行排列。
wrap-reverse:容器单行容不下所有项目时,换行排列。换行方向为wrap时的反方
向。
​图4-8flex-wrap
justify-content属性
设置项目在主轴方向上对齐方式,以及分配项目之间及其周围多余的空间。
.container{

justify-content:flex-start(默认值)|flex-end|center|space-between|space-around|
space-evenly
}

flex-start(默认值):项目对齐主轴起点,项目间不留空隙。
center:项目在主轴上居中排列,项目间不留空隙。主轴上第一个项目离主轴
起点距离等于最后一个项目离主轴终点距离。
flex-end:项目对齐主轴终点,项目间不留空隙。
space-between:项目间间距相等,第一个项目离主轴起点和最后一个项目离主轴终
点距离为0。
space-around:与space-between相似。不同点为,第一个项目离主轴起点和最后一
个项目离主轴终点距离为中间项目间间距的一半。
space-evenly:项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点
距离等于项目间间距。

align-items属性
设置项目在行中的对齐方式。
.container{
align-items:stretch(默认值)|flex-start|center|flex-end|baseline
}
stretch(默认值):项目拉伸至填满行高。
flex-start:项目顶部与行起点对齐。
center:项目在行中居中对齐。
flex-end:项目底部与行终点对齐。
baseline:项目的第一行文字的基线对齐。。

align-content属性
多行排列时,设置行在交叉轴方向上的对齐方式,以及分配行之间及其周围多
余的空间。
.container{
align-content:stretch(默认值)|flex-start|center|flex-end|space-between
|space-around|space-evenly
}
stretch(默认值):当未设置项目尺寸,将各行中的项目拉伸至填满交叉轴。
当设置了项目尺寸,项目尺寸不变,项目行拉伸至填满交叉轴。
flex-start:首行在交叉轴起点开始排列,行间不留间距。
center:行在交叉轴中点排列,行间不留间距,首行离交叉轴起点和尾行离交
叉轴终点距离相等。
flex-end:尾行在交叉轴终点开始排列,行间不留间距。
space-between:行与行间距相等,首行离交叉轴起点和尾行离交叉轴终点距离为0。
space-around:行与行间距相等,首行离交叉轴起点和尾行离交叉轴终点距离为行
与行间间距的一半。
space-evenly:行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等。

(3)、项目属性
设置项目,用于设置项目的尺寸、位置,以及对项目的对齐方式做特殊设置。
order属性
设置项目沿主轴方向上的排列顺序,数值越小,排列越靠前。属性值为整数,
默认是0。
.item{
order:0(默认值)|<integer>
}

flex-shrink属性
当项目在主轴方向上溢出时,通过设置项目收缩因子来压缩项目适应容器。属
性值为项目的收缩因子,属性值取非负数。

需要注意一点,当项目的压缩因子相加小于1时,参与计算的溢出空间不等于
完整的溢出空间。在上面例子的基础上,我们改变各个项目的flex-shrink。

flex-grow属性
当项目在主轴方向上还有剩余空间时,通过设置项目扩张因子进行剩余空间的
分配。属性值为项目的扩张因子,属性值取非负数。
.item{
flex-grow:0(默认值)|<number>

}

flex-basis属性
当容器设置flex-direction为row或row-reverse时,flex-basis和width同时存在,
flex-basis优先级高于width,也就是此时flex-basis代替项目的width属性。
当容器设置flex-direction为column或column-reverse时,flex-basis和height
同时存在,flex-basis优先级高于height,也就是此时flex-basis代替项目的height
属性。
需要注意的是,当flex-basis和width(或height),其中一个属性值为auto时,
非auto的优先级更高。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值