代码改变世界

随笔分类 - CSS

系统总结了一下CSS布局方面的知识

2012-07-21 21:44 by VVG, 1696 阅读, 收藏, 编辑
摘要:一、两栏布局(左边固定宽度,右边自动适应)方法1、左浮动其中一个DIV,使其脱离文档流,另一个DIV不设置浮动即可。注意:DIV的顺序不能改变PS:设置浮动可以让元素脱离正常的文档流,使后面的元素占据浮动元素本身的位置。但是浮动元素只能影响后面的元素的位置,而不能够影响前面的元素,也不能叠加在前面的元素上。(view类样式只是为了层便于识别);.view{ height: 200px; background: #ccc;}#id1{float: left; width: 200px;}#id2{background: #666; } 侧边栏(float: left; width: 200... 阅读全文

css清除浮动各方法

2012-03-09 14:47 by VVG, 200 阅读, 收藏, 编辑
摘要:(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, 165 阅读, 收藏, 编辑
摘要:用过 Fireworks / PhotoShop 的人应该都知道,在画布中将一个页面模块居中是多容易的事,可如果是垂直居中,前端就苦逼了。因为 CSS 本身并没有提供相应的 API 支持(确切来说是提供不全)。今天重新整理一下思路,说说前端在实现页面元素垂直居中的几种思路:一、利用 position 和负边距利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明:/* 代码实现: * 设定宽度和高度,父节点为 position:relative; CSS是这样写的: */.selector { position:abso... 阅读全文

CSS3 border-image的使用方法

2012-02-29 15:48 by VVG, 328 阅读, 收藏, 编辑
摘要:一、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, 250 阅读, 收藏, 编辑
摘要:最近在读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, 174 阅读, 收藏, 编辑
摘要: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, 428 阅读, 收藏, 编辑
摘要:<!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, 346 阅读, 收藏, 编辑
摘要:记录以使自己不忘!!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 阅读全文