![](https://img-blog.csdnimg.cn/20190918135101160.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
html+css入门
html+css入门
_xw2018
越努力越幸运
展开
-
HTML+CSS学习记录
基本框架:<html><head></head><body></body></html>注释:<!-- -->头标签内:<title></title><meta></meta>可以设置页面跳转以及设置页面相关内容<base&g...原创 2019-05-04 00:08:39 · 148 阅读 · 0 评论 -
动画效果
(1)animation-name:指定动画名称(2)animation-duration:设置动画总耗时(3)animation-iteration-count:设置动画播放次数(4)animation-direction:alternate //设置交替动画(5)animation-delay:设置动画延迟(6)animation-fill-mode:forward|backward...原创 2019-06-20 22:41:40 · 135 阅读 · 0 评论 -
transform转换
transform转换:对元素实现移动、缩放、旋转、斜切等操作属性:2D转换(1)2d移动:translate(x)|translate(x,y);x:x轴移动的向量长度y:y轴移动的向量长度单方向:translateX(x)、translateY(y)(2)2d缩放:scale(xy)|scale(x,y);x:x轴方向缩放y:y轴方向缩放xy:两个方向缩放一样单...原创 2019-06-20 22:41:11 · 320 阅读 · 0 评论 -
过渡效果
transition-property:添加过渡效果的样式属性名称(all:所有样式)transition-duration:过渡时间的耗时(秒)transition-delay:延迟过渡效果transition-timing-function:设置时间函数,控制运动的速度属性值:linear:匀速ease:先慢后快再慢速结束ease-in:以慢速开始的过渡效果ease-out...原创 2019-06-20 22:40:23 · 318 阅读 · 0 评论 -
渐变效果
线性渐变 linear-gradient([point||angle],<color [startpos]>,<color [endpos]>[,<color pos>]*);ponit/angle参数值:(1)to left:设置渐变从右到左,相当于270deg(2)to right:设置渐变从左到右,相当于90deg(3)to top:...原创 2019-06-20 22:39:55 · 232 阅读 · 0 评论 -
阴影效果
文本阴影 text-shadow:offsetX offsetY blur color;offsetX:x轴偏移量offsetY:y轴偏移量blur:模糊值,值越大越模糊,不能为负数color:颜色演示代码<!DOCTYPE html><html> <head> <title>文本阴影</title>...原创 2019-06-20 22:39:25 · 113 阅读 · 0 评论 -
CSS3新增布局效果
盒模型:box-sizing(1)content-box:设置的width属性值仅仅是内容的宽度。(2)border-box:设置的width属性值就是盒子最终的宽度,包含了border、padding和内容。颜色:rgb(红,绿,蓝);//取值都在0~255hsl(颜色[0~360],饱和度[0%~100%],明度[0%~100%])opacity:透明度,取值0~1,子元素会继...原创 2019-06-20 22:38:58 · 308 阅读 · 0 评论 -
CSS3新增选择器
属性选择器:E[attr]:查找指定的拥有attr属性的E标签E[attr=value]:查找指定的拥有attr属性值为value的E标签E[attr*=value]:查找指定的拥有attr属性值中任意位置包含value的E标签E[attr^=value]:查找指定的拥有attr属性值以value开头的E标签E[attr$=value]:查找指定的拥有attr属性值以value结尾的E标...原创 2019-06-19 14:30:11 · 418 阅读 · 0 评论 -
HTML5学习记录
新增标签 新增表单属性 新增Dom操作 网络接口 全屏接口 读取文件 拖拽事件 Web存储原创 2019-06-19 14:22:51 · 127 阅读 · 0 评论 -
H5新增标签
语义标签:<header></header><nav></nav><main></main><article></article><aside></aside><footer></footer>功能相当于div,但IE9会解析为行级元素。...原创 2019-06-19 14:11:57 · 140 阅读 · 0 评论 -
H5新增表单属性
表单新增type属性:邮箱:<input type="email"/>电话:<input type="tel"/>网址:<input type="url"/>数量:<input type="number" value="50" max="100" min="0"/>查找:<input type="search"/>范围:<...原创 2019-06-19 14:07:49 · 202 阅读 · 0 评论 -
CSS3学习记录
选择器 新增布局效果 阴影效果 渐变效果 过渡效果 transform转换 动画效果原创 2019-06-20 22:42:05 · 160 阅读 · 0 评论