摘要：
一、两栏布局（左边固定宽度，右边自动适应）方法1、左浮动其中一个DIV，使其脱离文档流，另一个DIV不设置浮动即可。注意：DIV的顺序不能改变PS：设置浮动可以让元素脱离正常的文档流，使后面的元素占据浮动元素本身的位置。但是浮动元素只能影响后面的元素的位置，而不能够影响前面的元素，也不能叠加在前面的元素上。（view类样式只是为了层便于识别）；.view{ height: 200px; background: #ccc;}#id1{float: left; width: 200px;}#id2{background: #666; } 侧边栏(float: left; width: 200... 阅读全文
随笔分类 - CSS
css清除浮动各方法
2012-03-09 14:47 by VVG, 345 阅读, 收藏, 编辑
摘要：
（1）空标签法： 这种方法应该说是最简单的一种了，W3C建议在容器的末尾增加一个“clear:both"的元素，强迫容器适应它的高度以便装下所有的float，并没限制使用什么样的标签，有用<br style=”clear:both”/>的，有用空<div style=”clear:both”></div>的;比如：<div> <div style ="float:left; width:40%;"> <p> Some content </p></div> <p&g 阅读全文
垂直居中的几种实现方法
2012-03-01 16:26 by VVG, 307 阅读, 收藏, 编辑
摘要：
用过 Fireworks / PhotoShop 的人应该都知道，在画布中将一个页面模块居中是多容易的事，可如果是垂直居中，前端就苦逼了。因为 CSS 本身并没有提供相应的 API 支持（确切来说是提供不全）。今天重新整理一下思路，说说前端在实现页面元素垂直居中的几种思路：一、利用 position 和负边距利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明：/* 代码实现： * 设定宽度和高度，父节点为 position:relative; CSS是这样写的: */.selector { position:abso... 阅读全文
CSS3 border-image的使用方法
2012-02-29 15:48 by VVG, 518 阅读, 收藏, 编辑
摘要：
一、border-image的兼容性border-image可以说是CSS3中的一员大将，将来一定会大放光彩，其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限，仅 Firefox3.5，chrome浏览器，Safari3+支持border-image。所以，就本文而言，IE浏览器可以回家休息 了，Firefox3及其以下以及Opera浏览器也可以休息去看《阿凡达》了。所以，本文提供的一些demo页面，要在 Firefox3.5+，chrome或Safari3+浏览器下才可以看到效果。二、熟悉border-image的一些特性我们可能对于CSS2中的background属性比较熟悉，例如：b 阅读全文
轻松解决PNG图片在IE6中背景不透明方法
2012-02-27 09:20 by VVG, 368 阅读, 收藏, 编辑
摘要：
最近在读javascript DOM高级程序设计，里面中有一个更好的代码，这种方式基本满足所有的PNG嵌入需求，代码如下：function fixMSIEPng() { if (!document.body.filters) { // Not MSIE return; } if (7 <= parseFloat(navigator.appVersion.split("MSIE")[1])) { // 7+ supports PNG return; } // Fix the inline images i... 阅读全文
[转]编写出色CSS代码的13个建议
2011-12-19 17:17 by VVG, 281 阅读, 收藏, 编辑
摘要：
CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在CSS书写风格上稍有不同，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则：1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset：?*{ margin:0; padding:0; } 这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同，Res... 阅读全文
三栏布局-两边固定，中间自适应，中间层优先显示
2011-11-23 14:37 by VVG, 619 阅读, 收藏, 编辑
摘要：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf- 阅读全文
CSS 在IE浏览器与Firefox浏览器 中显示的一些区别
2011-11-22 09:56 by VVG, 595 阅读, 收藏, 编辑
摘要：
记录以使自己不忘！！CSS 在IE浏览器与Firefox 浏览器中显示的一些区别：1、padding、border 的值在IE中不会计入宽度，而在Firefox中会计入宽度。2、margin:0 auto; 在IE6下不居中与代码有关，头部添加如下代码则会居中。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="h 阅读全文