Css
静态资源打包：一个javescript 的src引用多个文件，一个link引用多个CSS文件
疑惑描述：查看了淘宝网的首页源文件，看到这样的一个特殊的<scriptsrc="http://a.tbcdn.cn/??s/kissy/1.1.6/kissy-min.js,p/global/1.0/global-min.js,p/et/et.js?t=2011092320110301.js"></s...
使用BEM命名规范来组织CSS代码
BEM 是 Block（块） Element（元素） Modifier（修饰器）的简称使用BEM规范来命名CSS，组织HTML中选择器的结构，利于CSS代码的维护，使得代码结构更清晰（弊端主要是名字会稍长） 一个独立的（语义上或视觉上），可以复用而不依赖其它组件的部分，...
CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform、过渡transition的知识这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-），本文为简化内容，直接使用了原版属性根据不同属性的支持度，在实际使用的时候需要添加相应的浏览器前缀支持目录...
常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中，比较简单，可以设置text-aligncenter，或者设置margin-left:auto;margin-right:auto之类的即可。主要麻烦的地方还是在垂直居中的处理上，所以接下来主要考虑垂直方向上的居中实现。水平垂直居中主要包括三类：基本文本类，图像类，其他元素类但，也是由一些方法...
CSS布局 -- 左右定宽，中间自适应
左右定宽，中间自适应有几种方法可以实现改变窗口大小看看？ 方案一：左右设置绝对定位，定宽，中间设置margin-left margin-right查看demo<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www....
CSS布局 -- 左侧定宽，右侧自适应
左侧定宽，右侧自适应有很多种方法可以实现缩小窗口试试看？ 方案一：左边左浮动，右边加个margin-left查看demo <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1...
谈谈CSS的浮动问题
浮动的工作原理浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框则停留。浮动元素可能引起的问题1.父元素的高度无法被撑开，影响与父级元素同级的元素2.与浮动元素同级的非浮动元素会跟随其后3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面的显示结构 清除浮动有什么解决办...
CSS常见兼容性问题总结
浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。这里谈到的浏览器，主要指IE6/IE7/IE...FireFoxChromeOperaSafari等。但更多的兼容还是考虑IE6/IE7/FF之间的斗争先来谈谈CSSHack 我们为了让页面形成统一的效果，要针对不同的浏览器...
CSS- 文本超出指定宽度后隐藏并显示为省略号
一般的文字截断（适用于内联与块）：.text-overflow{ display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/*不换行*/ ...
CSS基础--常用样式
一、背景相关背景颜色 background-color：颜色名称/rgb值/十六进制值背景图片 background-image ：url('')背景图片平铺方式 background-repeat ： repeat-x(仅水平重复)repeat-y(仅垂直重复)no-repeat(不重复)设置背...
前端之CSS介绍--选择器
一、CSS简介介绍css我们称呼层叠样式表(英文全称：CascadingStyleSheets)。它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。如果html是一个人，那...
ul li 定制圆点，list-style-image调整图片圆点大小 与 文字和图片排版
今天我们要介绍两种前端要用到的布局：第一种是ulli定制化圆点的样式，然后使其与文字居中排列，另外一种是文字与图片混排并居中排版。 我们在使用ulli中通常会定制化圆点，使用如下代码就可以使圆点为自己设定的图片，然后调整圆点的对齐的像素ulli{list-sty...
vue 结合 animate.css
这里说的是vue2.0和animate.css的结合使用。其实用过就知道用法是比较简单的。但是就是刚开始使用的时候，难免有的会遇到各种问题。简单的说说我所用过并且遇过的坑。 首先是transition组件，在2.0中由transition属性变成了一个独立的组件。 ...
在 CSS 中直接引用 fontawesome 图标（附码表）
FontAwesome图标库：https://fontawesome.com/cheatsheet?from=io我们如果不想用Fontawesome提供的类，只想在css里面引用图标的话，可以这样子，请自行脑补：.icon:before{ content:'f006'; font-family:FontAweso...
一张图教会CSS3倒影
分享示例图片在CSS3之前，想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式，而CSS3问世之后，想要实现这样的效果变得非常简单，只需一个CSS3属性就可以轻松实现了。这就是今天所要提到的box-reflect属性。咱们先看看W3C给出的box-reflect语法：box-reflect：none|<...
