最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的，默认给弹出隐藏掉，通过js事件绑定动态的显/隐弹出菜单元素。<ul> <li>主页</li> <li>新闻</l...

float:left/right/none;1.同级浮动（1）使块级元素在同一行显示（所有要在同一行显示的都要加浮动）<div class="box1">box1</div><div class="box2">box2</div><div class="box3">b...

前端杂谈: CSS 权重 (Specificity)css 权重想必大家都听说过, 一些简单的规则大部分人也都知道: 较长的 css selector 权重会大于较短的 css selector id selector 权重高...

附上一张效果图前几天在园子里看到一篇关于CSS3D行星运转的文章，感觉这个效果也太酷炫了，于是自己也就心血来潮的来尝试的做了一下。因为懒得去用什么插件了，于是就原生的JS写，...

css中margin-top是设置容器的外间距了距离了，div嵌套后，margin-top或者margin-bottom失效了，在网上打到下面的方法可以解决。设计页面的时候遇到一个神奇的问题，下面是html的代...

.triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green yellow;}.triangle_top{width:0;height: 0;border-width:50px;border-sty...

我们在做网页的时候，会遇到一个图片和文字位置对不齐的问题。(一般表现为图片总是比文字高点)，如下图，"我的联系方式"是文字，后面的email是图片：解决这个问题最好的办法：一个关键...

下面这段代码是用来清除浮动带来的高度塌陷问题.clearfix:before { content: "."; display: block; height: 0; clear: both; visibility: hidden;}...

扩展一: css3蒙版 语法:-webkit-mask-image: url(蒙版图片路径) | 使用渐变作为蒙版;-webkit-mask-repeat: no-repeat | repeat | repeat-x | repeat-y;-webkit-...

语法:background-size: 值; 1. length 该属性值是设置背景图的宽度和高度，第一个值代表宽度，第二个值代表高度，如果只设置第一个值，第二个值自动为auto，等比例缩放...

1. 线性渐变 语法:background: linear-gradient(tp top, red 0%, yellow 30%, green 45%); 注: 重复的线性渐变写法如下background: repeating-linear-gr...

1. 背景切割 语法:background-clip: border-box | padding-box | content-box; border-box: 默认值，背景在包含边框以内的区域可见 padding-box:...

文本阴影 语法:text-shadow: 水平偏移量 垂直偏移量 模糊度 颜色值; 水平偏移量: 向左为负，向右为正 垂直偏移量: 向上为负，向下为正 模糊度...

语法:border-radius: 数值+单位;1. 设置一个值border-radius: 20px; 四个方向的圆角均为20px 2. 设置两个值border-radius: 10px 50px; 左上角和右下...

语法:transform: rotate(旋转) | scale(缩放) | skew(倾斜) | translate(位移); 注: 当多种变形方式综合在一起时，用空格隔开 1. rotate 旋转( X/Y/Z 必须为大写 )...

呼吸灯实现思路底图是一个暗的灯 jpg，另外一张图则是亮灯的 png 透明图片，利用绝对定位将亮灯图片定位在底图上。然后用 animation 写出动效，也就是呼吸灯的闪动效果。最后亮灯...

昨天在做侧栏搜索时遇到一个小问题，搜索按钮高度与input表单高度不同。看似很小的问题自己却不懂，height100%不顶用，于是百度一下找到一个解决方法：首先让父容器 position:relat...

这是介于语法高亮和无样式之间的一种样式，效果如图：CSS参考图一pre { margin:15px auto; padding:20px 15px; border:1px solid #ddd; border-left:4px solid #58...

CSS本身没有什么安全性可言，也不需要加密。而有些时候为了保护指定的样式表，可以采用混淆的方法扰乱查看者的视听。比如下面这段：@charset "utf-8";/*Theme Name: linstyle...

由于某些原因你可能需要隐藏盒子的滚动条但又要它保持滚动效果。 百度找不到答案，谷歌或许你会找到。我就直接提供demo出来，运行代码来看效果吧。 有两种方法：大体思...

通常产品列表，我们希望产品图片是在一个盒子内垂直居中，如果图片尺寸未知，且希望保持原来的宽高比例，就涉及到未知高度元素垂直居中的问题。 如果不用考虑IE6/7，问题会非...

今天浏览这个http://www.sitepoint.com站时，因为好奇看了下人家写的代码，结果发现了这行代码于是就研究了一下，calc()从字面我们可以把他理解为一个函数function。其实calc是英...

自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。对于所有设计师使用过的CSS概念，负边距作为最少讨论到的定位方式...

这是一款简单又富有创意的css3立方体方块翻滚404动画特效，用来做网页404错误提示页面非常不错。代码下载：https://pan.baidu.com/s/1ILRFY2qQaZmQwGruh1l83g...

.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 加上中文名“微软雅黑”是为了兼容opera。 MicrosoftJhengHei...

HTML 网页里面添加如下代码：(30为透明度)HEAD 里面添加 <style type="text/css"> <!-- .alpha{filter:alpha(opacity=30); } --> </style>DIV 或者 BODY 里面添加 class=...

CSS圆角 border-radius：用这个属性能实现圆角边框的效果。 现在只有Mozilla/Firefox 和 Safari 3支持该属性。请看下面的示例代码： Mozilla/Firefox 和 Safari 3用户将在...

1.基本布局：将5张图片左浮动横向并排放入一个div容器（#photos）内，图片设置统一尺寸，div宽度设置5个图片的总尺寸，然后放入相框容器div（#frame），相框设置1个图片的大小并设置溢出隐藏，...

有时候，为了让用户有更好的体验，需要禁用掉文本选中功能比如：使用a标签模拟按钮，如果不禁用掉文本选中功能，那么双击时会选中文字，用起来很不爽。多数情况下，只需要使用CSS样式就可...

1.继承性作用：子元素可以继承父元素的样式继承性发生的前提是包含（嵌套关系）★文字颜色可以继承★文字大小可以继承★字体可以继续★字体粗细可以继承★文字风格可以继承★行高...

做页面需要一定的 CSS 基本功，虽然现在有很多成熟的框架如 bootstrap 等，我们轻松的就就可以做出一些页面效果。但是掌握每一个常见效果的写法还是很重要的，下面整理出一些常见...

在开发移动端网站的时候，我们经常会遇到弹出层的情况（如全屏的导航栏、提示遮罩等），这时候会有一个用户体验上的小 bug：当我们操作点出弹出层时，如果此时滑动屏幕，你会发现弹出层下...

效果图如下：html代码如下：<span class="pay_list_c1 on"><input type="radio" checked="checked" name="paylist" value="1" class="radioclass"></span>css代码:.pay_list_c1...

我们在做input文本上传的时候，html自带的上传按钮比较丑，如何对其进行美化呢？同理：input checkbox美化，input radio美化是一个道理的，后面文章会总结。1. 思路input file上传按钮...

在写css代码的时候,有时候会忘记css代码的缩写,故整理成文章,方便查阅 盒模型代码简写 盒模型时外边距(margin)、内边距(paddin...

针对Chrome和Safari等Webkit核心浏览器的CSS hack代码@media screen and (-webkit-min-device-pixel-ratio:0) { /* Webkit内核兼容CSS */ } 示例：@media screen and...

继承在一定程度上让程序在编写的过程中更加方便，但是有时候也会给我们的程序带来一定的困扰，所以认真的学习继承的原理，以及处理的方法很重要。下面是Css中处理继承的一个方法...

网站要自适应，其中一个工作就是必然要对图片的宽度进行处理。一般来说，网站图片插入的时候，编辑器会自动增加width和height的值，也就是图片的宽度高度，虽然可以去掉，也可以定义，但...

最近有童鞋问我，在一个div里面，其中有文字和图片，现在想要的效果是文字左对齐，图片居中对齐。然后说对图片定义text-align:center;无效。我说这里用text-align:center;肯定没有...

记得很早之前，那时候还没有接触css3，已经通过media=”print”来定义打印样式了，那个时候也不是很了解，只是单纯了写着好玩，其实没多大用处。 随着目前移动设备的普及，单纯...

做css的时候发现需要对文字隐藏，所以这里记录下，下次好使用。.text1 { word-break: keep-all;/*不换行*/ white-space: nowrap;/*不换行*/ overflow: hidden;...

这里主要使用表单的单选按钮来实现这个TAB显示和隐藏，首页tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显示内容。具体请看下面代码。<ul class="tabs"> <li> <i...

前段时间，终于仔仔细细的把pt、px、em、rem了解了一遍，简单整理了一下做个记录。pt、px、em、rem都是什么pt单位名称为点（Point），绝对长度单位。现在网页中出现得很少甚至不出现，...

比较复杂的方法input[type=checkbox]{ /* Double-sized Checkboxes */ -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FF */ -webkit-transform...

最近一个细节引起了我的注意，chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框，而且textarea还可以任意拖动放大，这是不能容忍的，影响美观不说，有时候拖动tex...

先来分享下来自老外的 The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on...

1. 对于img元素而言，使用auto height：img{ min-width: 100%; height: auto; } 2.不过对于DIV块元素，这样做没用，块大小总是按照内容或内含元素来匹配。 解决方案是使...

下面的效果完全是用css 来实现的，那么是怎么实现的呢，我们知道 html 中有一些特殊的字符，通过特殊字符，利用 css 中的margin或者position方法完全可以实现以上效果，感兴趣的...

1：Html代码<li><label for="subsubfolder1">下级</label><input id="subsubfolder1" type="checkbox" /><ol><li class="file"><a>下级</a></li><li><label for="sub...

是否曾经有过这样的经历：把一个元素置于另一个元素之上，而希望下面的那个元素成为可点击的？现在，利用css的pointer-events属性即可做到。CSS pointer-eventsPointer-events原本...