加载中
七种实现左侧固定,右侧自适应两栏布局的方法

双inline-block方案 双float方案 float+margin-left方案 使用absolute+margin-left方法 使用float+BFC方法 flex方案 grid方案 极限情况 总结一下左边固定,右边自适应的两栏布局的七种方法。...

2017/08/17 20:54
307
【推荐】未知尺寸元素水平垂直居中终解(支持所有浏览器,简单好用)

该未知尺寸元素水平垂直居中方案基于 inline-block 元素的 vertical-align:middle 特性实现,在这里需要对 line box 及 vertical-align 的应用情况有一定的了解...

2016/11/30 17:13
68
margin系列之圣杯拾遗

在 margin系列之布局篇 一文结尾时,我们谈到了圣杯布局,说这个布局的实现本身存在了一些问题:“在IE6/7下报废,不过不用慌,因为它可被修复”。 圣杯布局的一些谈资 下面节选一段来自网路...

2016/11/30 15:11
59
CSS 绝对底部

来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面。当改变窗口高度时,不会出现重叠问题。甚至,创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案。不知...

2016/11/30 15:05
49
七种CSS方式让一个容器水平垂直居中

方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: center;justify-content: center 方法五:display:flex;margin:auto 方法六...

2016/09/18 14:18
59
常见移动设备的 CSS3 Media Query 整理(iPhone/iPad/Galaxy/HTC

/**  * iPhone 4/4s landscape & portrait  */@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and ...

2016/01/15 17:38
1K
css vertical-align:middle; 垂直居中的一个推荐方式(IE7+)(个人喜欢)

css vertical-align:middle; 垂直居中的一个推荐方式(个人喜欢),因为该方式仅需要用到一个多余的holder标签,并且兼容IE7+浏览器。

2015/11/07 11:14
1K
网站图片变灰的通用CSS解决方案

<style> html {    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);    filter: grayscale(100...

2015/08/14 10:27
162
CSS布局终极方案之--圣杯布局(兼容IE6+,现代浏览器)

经典三列布局,也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它的布局要...

2015/01/16 14:11
12.6K
兼容性背景颜色半透明CSS代码(不影响内部子元素)

如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响

2015/01/12 10:19
1K
CSS, HTML, JavaScript等兼容性问题案例分析及解决

更多请参见:http://www.w3help.org/zh-cn/causes/ 渲染-HTML相关 [HH] SGML与HTML HH8001: 在 Firefox 中注释内容中如果包含 '-' 字符在某些情况下会使该注释解析错误 [HR] HTML文档描述 HR...

2013/10/17 09:57
93
The 30 CSS Selectors you Must Memorize

1. * * { margin: 0; padding: 0; } Let’s knock the obvious ones out, for the beginners, before we move onto the more advanced selectors. The star symbol will target every singl...

2013/07/28 14:39
30
纯CSS实现容器基于窗口垂直居中(仅支持IE8+及现代浏览器)

1. 方法1: <!DOCTYPE html> <html> <head> <title>基于窗口垂直居中 by 司徒正美</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8...

2013/06/29 17:09
63
自适应网页设计(Responsive Web Design)

作者: 阮一峰 日期: 2012年5月 1日 随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同...

2013/04/18 22:42
57
image-less arrow carets

.triangle { display: inline-block; width: 0; height: 0; border-style: solid; border-width: 0 45px 60px 45px; border-color: transparent transparent #000 t...

2013/04/03 21:21
20
web像素密度在不同分辨率和移动设备下的解决

normalized.html <!doctype html> <html> <head> <!-- Encoding --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Always force late...

2013/03/09 21:56
692
Chrome渲染Transition时页面闪动Bug

前段时间,有同事和会员反馈使用Chrome访问淘宝首页会出现画面闪动的现象,但是我在Mac和Win下面的Chrome都无法重现这个问题,后来重装了一遍Win7下的Chrome Beta版本,终于重现了这个问题,...

2013/02/20 13:24
339
webkit css properties

http://css-infos.net/properties/webkit Webkit CSS properties -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-f...

2013/02/18 22:05
46
移除button在IE67下的黑边

在IE6-7中,当button标签的type=submit,或input标签的type=submit会出现黑边,并且在ios下也存在相同的问题。 IE下要使用滤镜来处理: <!--[if IE]> <style type="text/css"> input { ...

2012/12/07 21:13
179

没有更多内容

加载失败,请刷新页面

返回顶部
顶部