用css3绘制腾讯企鹅，算什么厉害。趁着今天有空，姐就用css3来写一个百度的小度熊。话不多说，开始上码。 爆照 先来一张呆萌小度熊的成果照。 在绘制小度熊之前，首先要对小度熊布局上进行一个分解，便于...
css3绘制腾讯企鹅算什么？姐给你画个百度熊〜
阅读全文
HTML5 video视频字幕的使用和制作
原生HTML5 video对字幕的支持显示情况: 元素 HTML5允许我们使用元素为视频指定字幕。这个元素的各种属性允许我们指定这样的东西，比如我们添加的内容的类型，它所在的语言，当然还有对包含实际字...
css实现底部元素“粘住底部”效果的方案与代码
如何用css来实现底部元素可“粘住底部”的效果，对于“粘住底部”，本文有两种理解： 一是无论内容的多少，我们都希望使按钮，固定于可视窗口的底部，且内容区是可滚动的。 二是当内容区的内容较少时，页脚区不...
div文字超出使用css限制宽度，用省略号…
做前端的时候总是遇到文字超出的问题，那么可以使用div可以限制宽度，超出部分用省略号 <style> div.wid{ width:200px; white-space:nowrap; t...
CSS布局学习技巧全面指南
如翻天覆地的前端开发一般，CSS布局也产生了巨大的变化。现在我们有需要可选的CSS布局方式来开发我们的网站，这也就要求我们对这些方式作出选择。在这片文章里，我会介绍各种CSS布局的基本使用方式以及使用...
CSS技巧：display:none与visibility:hidden的恩怨情仇
面试时被问起"请说说display:none和visibility:hidden的区别"吗？是不是回答完display:none不占用原来的位置，而visibility:hidden保留原来的位置后，...
CSS3 filter 属性 制作酷炫的果冻菜单
这里我要学（抄）习（袭）的就是这个菜单效果，这个 dom 结构还是很简单的。 div.blobs div.circle.main div.circle.sub.first div.circle.sub...
bootstrap-select 多选+模糊查询下拉框（官方示例文档详解）
实际开发中遇到了一个问题，就是需要既支持多选又同时支持模糊查询的下拉控件，大家所熟知的比较强大的下拉框插件bootstrap-select2，博主当时也参考过，但是发现它的多选效果做的比较差，类似这种...
CSS3新增多栏布局（Multi-Columns Layout）低调却不简单
一、明确结构 多栏布局的结构很简单，主要由multi-column container和column box组成。 当一个元素设置了column-width和column-count属性并且值不为au...
CSS滤镜:filter改变图片颜色多种方法：核心是filter:url()
强大的 CSS:filter CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。 CSS标准里包含了一些已实现预定义效果的函数。 filt...
HTML5 做网页 一些重要但不常见的语义标签有哪些？
使用 HTML5 做网页了，并且会使用一些常见的标签，如 <header>、<section>、<article> 和 <footer> 等等，除此之外...
CSS水平垂直居中10种实现方式代码大全
要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个github仓库，欢迎大家star 仅居中元素定宽高适用 a...
CSS层叠上下文、层叠等级、层叠顺序、z-index一文搞懂
以往，由于自己使用z-index的频率不大，所以对这个CSS属性存在比较片面的认识。一直认为z-index就是用来描述定义一个元素在屏幕Z轴上的堆叠顺序。z-index值越大在Z轴上就越靠上，也就是离...
css float属性总结 不足之处由BFC来终结
1. float介绍 CSS世界中的float属性是一个年代非常久远的属性，设置了float属性的元素会根据设置的属性值向左或者向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。设置了flo...
css布局之absolute定位属性应用技巧总结
2. absolute的特性 在介绍absolute之前，有以下公共CSS代码： /* CSS代码 */ .father{ border: 2px solid deeppink; wi...
css进阶：:last-child 与: last-of-type 的区别
做列表的时候，会经常遇到最后一个元素与其他元素在样式上会有差异的情况。 如果是单纯的静态页面，可以使用class去控制。也可以在页面渲染结束之后，使用js去控制。若对于兼容性的要求并非那么严格，可以使...
css重点：Flex弹性布局的属性及使用
网页布局是CSS的一个重点 传统的布局解决方案，是基于盒装模型，主要依赖的属性有： normal flow（文档流） float + clear position relative + absolut...
CSS中写的%都是相对于谁进行计算的呢？
0.引言 在我们编写CSS的时候，经常会用到百分比赋值（%）实现自适应。像我们最常使用的流式布局设计模式，基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题，我们...
CSS3属性总结之background
学习css3的一些新属性，就把一些使用中遇到的方法和问题做一个小结。 background-color 背景颜色在IE7之前只显示到padding区域，不包含border。而现代浏览器backgrou...
img标签的alt与title有何异同？src与href的区别是什么？
alt(alt text) ： 为不能显示图像、窗体或applets的用户代理，alt属性用来指定替换文字，替换文字的语言由lang属性指定。 title(tool tip) ：设置该属性的元素的建议...
px/em/rem的区别有哪些？
1、px值固定，容易计算 2、em的值并不是固定的； 3、em会继承父级元素的字体大小。使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优...
CSS Hack是什么？ie6,7,8的hack分别有哪些？
针对不同的浏览器写不同的css code的过程就是css hack，比如 #text { background-color:yellow /*ie8*/ +background-color:yello...
css水平垂直居中有哪些，写出代码？
1.已知固定宽高元素 .parent { position: relative; } .child { width: 300px; height: 100px; padding: 20px; posi...
BFC是什么?触发BFC的条件有哪些？
BFC(block formatting context)翻译为“块级格式化上下文”，它会生成一个独立的渲染区域(不影响外面的元素，同时也不受外面元素的影响)，它的生成有以下规则： 内部的box会在垂...
16