CSS3容易忘记的知识点记录(01)
来源:互联网 发布:windows toolkit 编辑:程序博客网 时间:2024/05/17 12:56
1.background-attachment: fixed; //可以指定背景图片是否跟着滚动条一起滚动!
2.HTML中链接标签的四种状态用CSS实现:
a:LINK { /* 点链接之前 */
color: blue;
}
a:HOVER { /* 鼠标移动到上面的时候*/
color: red;
}
a:ACTIVE { /* 鼠标正在点链接的时候*/
color: blue;
}
a:VISITED { /* 鼠标已经点了链接之后*/
color: black;
}
3.实现表格的边框合并
border-collapse: collapse;
4.用户突出效果的轮廓
outline 设置轮廓属性
outline-color 设置轮廓颜色
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度
5.让一个div居中的CSS方式:
margin-left: auto;
margin-right: auto;
这样子就实现了水平上的居中,是不是很简单,比用js实现简单多了哦
6.对齐的操作
6.1使用margin 这个就是第五点所使用的
6.2使用position属性,配合left,right使用
6.3使用float属性进行对齐
7.让列表一行的显示,就是li标签一行显示出来
li{
display: inline;
}
这样子就实现列表的横向放置
8.透明度的使用
opacity: 0.5; /*表示半透明,可以用在图片元素img上,等等*/
9.CSS3新加的2D和3D效果的兼容(例子一枚)
transform:translate(100px,100px);
-webkit-transform:translate(100px,100px); /*支持safari chrome*/
-ms-transform:translate(100px,100px);/*支持IE,360浏览器也是IE的内核*/
-o-transform:translate(100px,100px);/*支持opera*/
-moz-transform:translate(100px,100px);/*支持Firefox*/
放一张介绍:
10.一个旋转并且缩放的小例子
div {
width: 100px;
height: 100px;
background-color: aqua;
transition: width 10s, height 10s, transform 10s;
/* 上句并不起作用,实际起作用的是下一句 */
-moz-transition: width 2s, height 2s, -moz-transform 2s;
}
div:HOVER {
width: 200px;
height: 400px;
background-color: fuchsia;
transform: rotate(360deg);
/* 上句并不起作用,实际起作用的是下一句 */
-moz-transform: rotate(360deg);
}
这个小例子只能在火狐下运行正常,如果你的浏览器不是火狐的,请照着第九点写上对应浏览器能识别的代码,放上一张介绍
11.实现一个正方形的平移动画,亲测可行,Chrome,Firfox,其他留给你们去测试吧
div {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
animation: anim 5s;
}
@keyframes anim {
0%{
background-color: green;
left: 0px;
top: 0px
}
25%{
background-color: red;
left: 100px;
top: 0px
}
50%{
background-color: blue;
left: 100px;
top: 100px
}
75%{
background-color: red;
left: 0px;
top: 100px
}
100%{
background-color: blue;
left: 0px;
top: 0px
}
}
- CSS3容易忘记的知识点记录(01)
- PHP容易忘记的知识点
- javascript 容易忘记的知识点
- 记录容易忘记的方法
- java比较容易忘记的知识点
- Java基础知识点记录(主要记录一些不常见或者容易忘记的知识点,时刻更新)
- C容易忘记知识点
- css3容易混淆记错的记录
- 【情怀记录贴】:记录容易忘记的东西
- 容易忘记的android 知识点(实时更新)
- OC中一些容易混淆和忘记的知识点总结
- PHP中最容易忘记的一些知识点总结
- 记录小的知识点防止自己忘记
- 记录一些容易忘记的ThinkPHP使用技巧
- 容易忘记的常识
- 容易忘记的学习心得
- 容易忘记的css
- 容易忘记的命令
- php模拟登陆
- java 下拉多级联动 头像裁剪 调用摄像头 SpringMVC mybatis SSM
- BZOJ1717——[Usaco2006 Dec]Milk Patterns 产奶的模式
- Js学习笔记-事件冒泡、事件捕获、阻止默认行为
- Server Tomcat Server at localhost failed to start解决方案
- CSS3容易忘记的知识点记录(01)
- 绿色版的谷歌浏览器chrome
- 1030. Travel Plan (30)
- httpclient访问网站时设置Accept-Encoding为gzip,deflate返回的结果为乱码的问题
- 欢迎使用CSDN-markdown编辑器
- Java 通过反射获取一个Field对象的泛型类型
- OpenCV中findContours详解
- 用Python functools.wraps实现装饰器
- uCOS-II内核之初始化及启动