会员
众包
新闻
博问
闪存
赞助商
HarmonyOS
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
会员中心
简洁模式
...
退出登录
注册
登录
晴天宝宝
博客园
首页
新随笔
联系
管理
订阅
上一页
1
···
3
4
5
6
7
8
9
10
11
···
16
下一页
2019年10月27日
css3 新特性(2D translate 移动,rotate 旋转 , scale 缩放)
摘要: 1.transform(转换)可以实现元素的位移,旋转,缩放等效果(可以简单理解为变形) 移动:translate 旋转:rotate 缩放:scale 2. 2D 转换之移动 translate 可以改变元素在页面中的位置,类似定位。 语法: transform:translate(x,y); 或
阅读全文
posted @ 2019-10-27 17:19 晴天宝宝i
阅读(621)
评论(0)
推荐(0)
2019年10月25日
CSS3 新特性(box-sizing盒模型,背景线性渐变,filter滤镜,calc函数,transition过渡)
摘要: 1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box、border-box,这样我们计算盒子大小的方式就发生了改变。 可分为两种情况: 1. box-sizing:content-box 盒子大小为 width
阅读全文
posted @ 2019-10-25 15:50 晴天宝宝i
阅读(453)
评论(0)
推荐(0)
CSS3新增(选择器{属性选择器,结构伪类选择器,伪元素选择器})
摘要: 1、属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器。 E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ] E [ att = 'val' ] 选择具有 att 属性且属性值等于 val 的 E元素 E [ at
阅读全文
posted @ 2019-10-25 14:41 晴天宝宝i
阅读(828)
评论(0)
推荐(0)
案例- CSS 三角加强
摘要: Document ¥1499 ¥2532
阅读全文
posted @ 2019-10-25 11:44 晴天宝宝i
阅读(194)
评论(0)
推荐(0)
2019年10月24日
用户界面样式(cursor,resize,vertical-align,outline,文字超出显示省略号)
摘要: 1. 鼠标样式 cursor default: 小白(箭头)默认 pointer:小手 move:移动 text:文本 not-allowed:禁止 2. 轮廓线(表单外发光)outline 给表单添加 outline:0; 或者 outline:none; 可以去掉默认蓝色边框 3. 防止拖拽文本
阅读全文
posted @ 2019-10-24 23:14 晴天宝宝i
阅读(255)
评论(0)
推荐(0)
小技巧-CSS 三角的做法
摘要: Document
阅读全文
posted @ 2019-10-24 22:28 晴天宝宝i
阅读(127)
评论(0)
推荐(0)
定位小技巧
摘要: 1. 固定定位小技巧:把图固定在版心右侧位置 小算法: 1. 让固定定位的盒子 left:50%,走到浏览器可视区(也可是看做版心)的一半位置 2. 让固定定位的盒子 margin -left :版心宽度的一半距离;多走版心宽度一半位置。 这样就实现了固定定位的盒子 贴着版心右侧对齐了 2.绝对定位
阅读全文
posted @ 2019-10-24 17:52 晴天宝宝i
阅读(189)
评论(0)
推荐(0)
2019年10月23日
css3新增(圆角边框(border-radius),盒子阴影(box-shadow),文字阴影(text-shadow),背景缩放(background-size))
摘要: 1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形,数值设置宽或高的一半,或者 50%; 矩形,数值设置高度的一半 2.盒子阴影 box-shadow b
阅读全文
posted @ 2019-10-23 22:14 晴天宝宝i
阅读(372)
评论(0)
推荐(0)
2019年10月21日
固定菜单栏左右滑动
摘要: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
阅读全文
posted @ 2019-10-21 11:43 晴天宝宝i
阅读(276)
评论(0)
推荐(0)
2019年10月20日
动画效果解析
摘要: 1.动画实现原理 核心原理:通过定时器 setInterval() 不断移动盒子位置 实现步骤: 1.获得盒子当前位置 2.让盒子在当前位置加上1个移动距离 3.利用定时器不断重复这个操作 4.加一个结束定时器的条件(当盒子到达指定位置,就清除定时器) 5.注意此元素需要添加定位,才能使用 elem
阅读全文
posted @ 2019-10-20 18:22 晴天宝宝i
阅读(307)
评论(0)
推荐(0)
上一页
1
···
3
4
5
6
7
8
9
10
11
···
16
下一页
公告