CSS小笔记
来源:互联网 发布:php还原html转义字符 编辑:程序博客网 时间:2024/06/05 05:05
本文章主要写些关于CSS的笔记,某些段落可能比较浅显,毕竟是本人从小白到菜鸟记录的。
虽然网页的特效现在一般还是用JS来写,但是不得不承认的是,CSS3的特效简单且效果好,主要缺点是不兼容IE,不过相信随着IE的升级,总会有兼容的一天的。就本人来说,同样的一个有特效的页面,用CSS3写可以比用JS写节省近50%的时间,且我认为还有很大进步空间。
1.兼容的快捷输入。
例:先在style输入‘transition’
transition
按TAB键==>效果如下
接着输入属性==>
会发现所有的兼容语句同步书写,是不是很方便!
2.关于网页的图片特效问题
一般的图片特效可能是换图,改变图片本身大小,如果运用到CSS3的话,甚至会有旋转之类的特效。本人的建议是将此类图片用img写,而不是图方便用background写,因为当你需要改变图片大小的时候,你会发现改变背景图片非常困难,而img标签的话,直接改width,height等属性即可。当然如果图片上有文字之类的,视情况而定。
3.怪异型盒子
box-sizing: border-box;
加了这句之后,盒子宽高将包括padding,border的长度。例设置了:
盒子宽度是100px,内容为80px;因为padding左右各占10px。
4.placeholder属性
用于input中可输入内容的TYPE设置,设置提示的文字,点击输入框后消失。
注:写行内式
5.!important
若现在有一张大图,但你想要适应的盒子,可设置background-size:cover;来实现,但有时在由于在其他地方设置了优先级较高的样式时,为了避免麻烦再去查找之前设置的样式,可以加上!important强行提高优先级。如下:
background-size: cover !important;
6.文本域的锁定大小
文本域作为输入较多文字常用的input类型,其可以随意缩放的属性有时需禁用;具体只需加一句语句即可:
resize: none;
7.多背景图加背景颜色
不太常用,具体方法是在最后一个背景图的url后 ‘空格’ 写上即可。
效果见下图
先写这么多,有时间或遇到较少见的再补上。
- CSS小笔记
- CSS样式小笔记
- CSS小笔记
- 使用过的CSS小技巧笔记
- 小白的css笔记(一)
- CSS小白入门笔记(1)
- css布局居中总汇小笔记
- 【CSS笔记十】CSS样式设置小技巧
- 小css
- CSS学习笔记(记录一些小技巧)
- Web:前门进后门出(HTML+CSS>小笔记)
- 小白的CSS笔记(二)样式
- 前端学习的小笔记——CSS
- CSS布局学习笔记and一些小技巧
- css知识笔记(五)——css样式设置小技巧
- css 笔记 --- css 属性
- css小案例 小demo
- CSS笔记
- mysql和oracle的区别
- 通过银行卡号解析银行名称和卡别
- 关于INSTALL_FAILED_NO_MATCHING_ABIS.的个人总结
- POJ1577 二叉树的创建及先序遍历(给定一些二叉树中的值,大于根的排在右边,小于根的排在左边)
- x64 gs寄存器的一点资料
- CSS小笔记
- Linux common clock framework(3)_实现逻辑分析
- FindChessboardCorners 找棋盘角
- myEclipse 和Eclipse中常用快捷键
- 查看电脑那个端口号被占用
- Javascript基础_01基本概念
- 【Static】静态函数库设计
- Java数据类型之引用数据类型 String、Scanner、Math
- elasticsearch中的API