1、能用css不用js

1、鼠标悬浮展示

     

      

2、自定义radio、checkbox的样式

3、巧用css伪类

当input获取焦点时候，把右边的按钮改变样式

检测用户输入：如果用户输入不合法，将右边的按钮样式置透明度0.5

4、自定义title提示样式

5、伪元素

6、使用伪元素画一条分割线

    

7、After伪类设置清除浮动

8、After伪类禁用input框

9、Css计数器和after伪类

   

10、Css画一个三角形

三角形的画法：

画一个有边缘的三角形：

     

11、css3自适应布局单位 vm, vh

12、CSS 函数

css 性能优化小结的更多相关文章

  1. 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

    第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...

  2. CSS性能优化的8个技巧

    本文作者:高峰,360奇舞团前端工程师,W3C性能工作组成员,同时参与WOT工作组的学习. 我们都知道对于网站来说,性能至关重要,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验 ...

  3. Oracle性能优化小结

    Oracle性能优化小结 原则一.注意where子句中的连接顺序 Oracle采用自下而上的顺序解析where子句,根据这个原理,表之间的连接必须卸载其他where条件之前,哪些可以滤掉最大数量记录的 ...

  4. CSS性能优化探讨

    大部分前端开发人员都不关心CSS性能优化,其实对于一个复杂的页面来说,高效的选择器还是可以带来一定的性能提升的. 1. CSS 选择器 浏览器是“从右往左”来分析 class 的,它的匹配规则是从右向 ...

  5. css写作建议和性能优化小结

    1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是,cs ...

  6. webpack 性能优化小结

    背景 如今前端工程化的概念早已经深入人心,选择一款合适的编译和资源管理工具已经成为了所有前端工程中的标配,而在诸多的构建工具中,webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了gru ...

  7. web前端页面性能优化小结

    影响用户访问的最大部分是前端的页面.网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现. 而我 ...

  8. WEB前端性能优化小结

    转:http://www.gafish.net/archives/1514 对前端开发工程师来说,前端性能优化的重要性是不言而喻的,最为大家所知的是YSLOW的23条优化规则,在我的理解中,性能优化不 ...

  9. ASP.NET性能优化小结(ASP.NET&C#)

    ASP.NET: 一.返回多个数据集 检查你的访问数据库的代码,看是否存在着要返回多次的请求.每次往返降低了你的应用程序的每秒能够响应请求的次数.通过在单个数据库请求中返回多个结果集,可以减少与数据库 ...

随机推荐

  1. 判断浏览器是否支持HTML5 video

    话不多说,下面是我从W3C扒的判断浏览器是是否支持H5视频的代码,有需要的小伙伴,拿走不谢 HTML <div id="checkVideoResult"><bu ...

  2. mac中：不能完成此操作，因为找不到一个或多个需要的项目。（错误代码 -43）

    今天使用mac删除某文件时,遇到此错误: 不能完成此操作,因为找不到一个或多个需要的项目.(错误代码 -43) 于是采用命令行删除可以正确删除:在要删除的文件夹坐在目录下执行   rm -rf tes ...

  3. java开发面试问题

    Java面试题:java的垮平台原理 为什么要跨平台使用????? 其实说白了就是个操作系统支持的指令集是不一样的.我们的程序需要再不同的操作系统上运行这些代码. 但是不要说jvm是跨平台的,而真正跨 ...

  4. Http状态信息

    一.HTTP协议1.简介:http超文本传输协议,基于请求与响应模式的,无状态的,应用层的协议.绝大读书的web开发都是建立在http协议之上的.2.http工作过程:当请求一个超链接时,http就开 ...

  5. python之连接oracle模块(cx_Oracle)

    cx_Oracle模块下载地址如下: https://pypi.python.org/pypi/cx_Oracle/5.2.1#downloads 安装好之后就可以使用了,具体使用如下 #!/usr/ ...

  6. Asp.net core 环境配置

    参考: 在 ASP.NET Core 中使用多个环境 ASP.NET Core 中的配置 在项目的 Properties\launchSettings.json中可以配置多个环境 { "ii ...

  7. mysql 开发进阶篇系列 9 锁问题 (Innodb 行锁实现方式)

    一.概述 Innodb 行锁是通过给索引上的索引项加锁来实现的.这一点与(oracle,sql server)不同后者是通过在数据块中对相应的数据行加锁.这意味着只有通过索引条件检索数据,innodb ...

  8. 全网最详细的基于Ubuntu14.04/16.04 + Anaconda2 / Anaconda3 + Python2.7/3.4/3.5/3.6安装Tensorflow详细步骤（图文）（博主推荐）

    不多说,直接上干货! 前言 建议参照最新的tensorflow安装步骤(Linux,官方网站经常访问不是很稳定,所以给了一个github的地址):         https://github.com ...

  9. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

  10. TOMCAT源码分析（转）

    前言:   本文是我阅读了TOMCAT源码后的一些心得. 主要是讲解TOMCAT的系统框架, 以及启动流程.若有错漏之处,敬请批评指教!建议:   毕竟TOMCAT的框架还是比较复杂的, 单是从文字上 ...