CSS
文章平均质量分 81
Aus0049
这个作者很懒,什么都没留下…
展开
-
[持续更新]CSS3学习笔记(一)伪类选择器&自定义字体&背景图片
CSS3学习笔记1. 伪类选择器CSS3之前的伪类共有::hover,:active, :visited, :link, :first-child, :lang这六种。CSS3新增了许多选择器,下面列出常见的几种。1. :nth-child(n) 某个父元素的第n个子元素。(CSS3)2. :nth-child(2n) 选择偶数项。(CSS3)3. :nth-c原创 2015-09-06 21:30:49 · 3646 阅读 · 0 评论 -
[持续更新]CSS3学习笔记(三)弹性盒子
1. 弹性盒子弹性盒子用于页面布局。之前面试经常会问到:写一个三列布局,左右两个定宽,中间的宽度自动伸缩门。解决方法有很多种,可以设置三列浮动,左右定宽,中间宽度自动。下面要说的是一种利用CSS布局来结局的比较好的方案。使用box-flex属性告诉浏览器如何分配元素之间的未使用的空间。看个例子: box-flex* { padding: 0px原创 2015-09-09 15:33:39 · 489 阅读 · 0 评论 -
百度面试题--盒子凸起一个角效果实现的讨论
今天联系百度面试题的时候,看到了一道题:请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:我很感兴趣,想了一下就做出来了,不过我做的效果大致上一样,只是数据上对不上,只好记录下我的思路。给的答案如下:思路就是先用:before在目的位置做出一个黑色大三角形,然后用:after在该位置做出一个小白色三角形,白色三角形比黑色三角形小,这样留出的宽度就看起来就像b原创 2015-09-11 16:19:13 · 2397 阅读 · 0 评论 -
[持续更新]CSS3学习笔记(二)渐变&圆角&阴影&变换&动画
1. 颜色模式在网页中常见的颜色模式有:RGB,HSLA。RGB 大家不陌生,分别代表red,green,blue。使用6位16进制数表示。#00FF00;RGBA 就说多了一个Aplha透明通道。这个数值用0~1的数字来表示。rbga(255,255,255,0.3);HSLA 分别代表色调Hue,饱和度Saturation,亮度Light,透明度Alpha。但是在实际应用原创 2015-09-07 16:29:23 · 994 阅读 · 0 评论 -
CSS3实现Bootstrap的tooltip动画提示效果
这几天做项目,经常用到bootstrap中的tooltip,他一插件的形式在项目中出现,样式改起来比较麻烦,索性自己做了个玩玩。Demo来源与网上的教程,自己琢磨改进Html如下 tooltip Home原创 2015-11-05 23:21:26 · 4081 阅读 · 0 评论 -
关于float的一些理解
Float是否脱离文档流,一个父元素不设置overflow的话,子元素float,就不会把父元素撑开,换句话说,他就不会有高度,但是做个demo:父元素overflow:hidden; 子元素前两个float,第三个不float,结果是第三个没有clear浮动的元素,跟float的元素出现在同一个位置,前提是这三个元素都是块元素。如果是行内元素的话,浮动元素则会跟行内元素争抢空间。总结一下:原创 2015-11-29 23:20:42 · 1721 阅读 · 0 评论 -
仿iPhone的switch开关
看到很多iPhone上的滑动开关效果的button,今天终于有时间搞一下其实很简单,也不难就是大量用到了CSS3的属性,不需要引入图片,但是要一点JS来控制贴上效果图:开启的时候关闭的效果代码在这里: anmiation .switch-bg { width: 150px;原创 2016-01-28 10:55:39 · 1086 阅读 · 0 评论 -
尺寸单位em,rem,vh,vw
这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位1.em在做手机端的时候经常会用到的做字体的尺寸单位说白了 em就相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5但是当div进行嵌套的时候,em始终是按照当前div继承的字体大小来缩放,参照原创 2016-02-12 14:21:21 · 8758 阅读 · 0 评论