前端页面开发流程
-
创建页面项目目录
-
使用Photoshop对效果图切图,切出网页制作中需要的小图片
-
将装饰类图像合并,制作成雪碧图
-
结合Photoshop和代码编辑器,参照效果图,进行html和css代码书写,制作页面
CSS3圆角
CSS3圆角中 尺寸表示圆的半径
-
设置某一个角的圆角,比如设置左上角 (top-left) 的圆角:
border-top-left-radius:30px 60px;
-
同时分别设置四个角:
border-radius:30px 60px 120px 150px;
-
设置四个圆角相同(相当于一个圆):
border-radius:50%;
rgba颜色表示法(最后一个透明度)
-
rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度
/* 元素透明的完整写法 */ opacity:0.3;
其中 盒子的透明度表示法
.box
{
/* 元素透明的完整写法 */
opacity:0.1;
/* 兼容IE */
filter:alpha(opacity=10);
}
CSS3 transition动画
transition: 在哪动画(all), 动画时间, 过渡方式, 是否延迟(多少秒)
- 过渡的运动方式,常用有 linear(匀速)、ease(缓冲运动)
- 常常与hover结合
- {花括号内写变换后的样式}
同一种盒子之间的transition动画
.box:hover{
width:600px;
height:500px;
background-color:red;
}
两种不同盒子之间的transition动画
.pic_con:hover .pic_info{
top:180px;
}
CSS3 transform变换(变形)
- 常常和transition一起使用
- translate(x,y) 设置盒子位移(比定位的性能更高)
- scale(x,y) 设置盒子缩放(不会影响布局)
- rotate(deg) 设置盒子旋转 (deg表示角度)
- skew(x-angle,y-angle)设置盒子斜切
- tranform-origin 设置变形的中心点
- perspective 设置透视距离 (一般为800)
- transform-style flat | preserve-3d 设置盒子是否按3d空间显示
- translateX、translateY、translateZ 设置三维移动
- rotateX、rotateY、rotateZ 设置三维旋转
- scaleX、scaleY、scaleZ 设置三维缩放
- backface-visibility 设置盒子背面是否可见
- 做变形动画需要设置初始值,不设置容易出现跳变的bug
位移、缩放、旋转、切斜都是二维平面上的 都相对于比较简单
其中三维的移动、旋转、缩放 前面都得加perspective(800px) 效果会更真实
CSS3 animation动画(关键帧动画)
样式调用的时候:
animation: 动画名, 时间, 动画曲线, 是否延迟(多少秒), 动画次数,是否反向还原
- @keyframes 定义关键帧动画
@keyframes 名字{
from{
开始前的样式
}
to{
动画后的样式
}
}
-
animation-name 动画名称
-
animation-duration 动画时间
-
animation-timing-function 动画曲线
linear(匀速)|ease(缓冲)|steps(步数) -
animation-delay 动画延迟
-
animation-iteration-count 动画播放次数
n|infinite -
animation-direction 动画结束后是否反向还原
normal|alternate -
animation-play-state 动画状态
paused(停止)|running(运动) -
animation-fill-mode 动画前后的状态
none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用) -
animation:name duration timing-function delay iteration-count direction;同时设置多个属性
animation: 动画名, 时间, 动画曲线, 是否延迟(多少秒), 动画次数,是否反向还原
CSS权重
CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。
-
权重的等级
可以把样式的应用方式分为几个等级,按照等级来计算权重- !important,加在样式属性值后,权重值为 10000
- 内联样式,如:style=””,权重值为1000
- ID选择器,如:#content,权重值为100
- 类,伪类和属性选择器,如: content、:hover 权重值为10
- 标签选择器和伪元素选择器,如:div、p、:before 权重值为1
- 通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0
CSS3新增选择器
- 第一种类型
- div :nth-child(n):第N个类型是div的子元素
- div :first-child:div中第一个元素
- div :last-child:div中最后一个元素
- div :nth-child(2n/2n+1): div元素底下的偶数/奇数个子元素
- 第二种类型
- E > F E元素下面所有的F
- E ~ F E元素后面所有的F
- E + F E后面紧挨着的F(如果E下一个是F 就执行.否则就不执行)
- 第三种类型 ======> 属性选择器:
- E[attr] 含有attr属性的元素
- E[attr=‘ok’] 含有attr属性的元素且它的值为“ok”
- E[attr^=‘ok’] 含有attr属性的元素且它的值的开头含有“ok”
- E[attr$=‘ok’] 含有attr属性的元素且它的值的结尾含有“ok”
- E[attr*=‘ok’] 含有attr属性的元素且它的值中含有“ok”
/* 匹配所有有class属性的div */
.con div[class]{
background-color:gold;
margin-bottom:10px;
}
/* 匹配class属性值是ok的div */
.con div[class="ok"]{
}
/* 匹配class属性值是“ok”开头的div */
.con div[class^="ok"]{
}
/* 匹配class属性值是“ok”结尾的div */
.con div[class$="ok"]{
}
/* 匹配class属性值含有“ok”的div */
.con div[class*="ok"]{
}
HTML5新增标签
1、<header> 页面头部、页眉
2、<nav> 页面导航
3、<article> 一篇文章
4、<section> 文章中的章节
5、<aside> 侧边栏
6、<footer> 页面底部、页脚
音频视频
1、<audio>
2、<video>
HTML5 新增表单控件
- 不同游览器不同显示而且还改不了-所以很少有或者根本不用
<label>网址:</label><input type="类型名称" name="" required>
网址"url" 邮箱"email" 日期"date" 时间"time" 星期"week"
数量"number" 范围"range" 电话"tel" 颜色"color" 搜索"search"
HMTL5新增常用表单控件属性:
1、 placeholder 设置文本框默认提示文字
2、 autofocus 自动获得焦点
3、 autocomplete 联想关键词
background新属性
background-size:
- length:用长度值指定背景图像大小。不允许负值。
- percentage:用百分比指定背景图像大小。不允许负值。(与容器相比 的百分比)
- auto:背景图像的真实大小。
- cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。(取最大的高或长)
- contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。(用最小的高或长在容器里)
视口
目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小。
快捷方式:meta:vp + tab
适配布局类型
设备屏幕有多种不同的分辨率,页面适配方案有如下几种:
- 全适配:响应式布局+流体布局
- 移动端适配:
- 流体布局+少量响应式
- 基于rem的布局
流体布局
-
流体布局,就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值
-
流体布局中,元素的边线无法用百分比,可以使用样式中的计算函数 calc() 来设置宽度,或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
-
calc()
可以通过计算的方式给元素加尺寸,比如: width:calc(25% - 4px); -
box-sizing
1、content-box 默认的盒子尺寸
2、border-box 盒子的尺寸计算方式:边框+盒子的尺寸+padding
响应式布局
- 根据游览器横向分辨率不同 应用不同的样式块
- 伪代码
@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}
@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}
基于rem的布局
em单位是参照元素自身的文字大小来设置尺寸,rem指的是参照根节点的文字大小,根节点指的是html标签,设置html标签的文字大小,其他的元素相关尺寸设置用rem,这样,所有元素都有了统一的参照标准,改变html文字的大小,就会改变所有元素用rem设置的尺寸大小。
CSS3 浏览器前缀
浏览器样式前缀
-
为了让CSS3样式兼容,需要将某些样式加上浏览器前缀:
- -ms- 兼容IE浏览器
- -moz- 兼容firefox
- -o- 兼容opera
- -webkit- 兼容chrome 和 safari
自动添加浏览器前缀
具体没咋了解.需要再查阅资料.