摘要：方法一：页面元素的水平居中页面元素的水平居中浮动方式： 上一页 1 2 3 4 2 3 2 3 4 ... 阅读全文

摘要：页面容器（#wrap）与页面头部（#header ）为100%宽度。而内容的容器（#page）为固定宽度960px。浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。如下图所示窗口宽度大于内容层宽度：改变浏览器窗口的大小，小于内容层宽度，如下图所示。拖动水平滚动条，出现了bug的样子。右边的背景... 阅读全文

摘要：对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。分解如下：1、HTML 部分： 我是浮动的 我也是居中的2、CSS 部分：.box{ float:left; position:relative; left:... 阅读全文

摘要：“DIV+CSS”这个词汇不知道害了多少人，也许其提出者本意并没有错，但是跟风者从表现曲解了其意思，认为整个页面就应当是DIV+CSS文件的组合。这样做，对于视觉上并没有什么影响，因为还原了之前设计的页面效果图，但如果这种HTML文档交给机器（例如蜘蛛）去分析，它可能根本找不到重点，你整个页面对它来说，就如同一个白蚁窝，它第一件要做的事情可能就是把这些相同的东西给去掉，然后再做内容的筛选。 搜索... 阅读全文

摘要：在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式... 阅读全文

摘要：最小最大宽度，最小最大高度，这是CSS很常见的一个要求。在现代浏览器中，一个 min-height，min-width 就可以解决问题，但是在IE系列，比如IE6则比较繁琐一点。下面总结一些IE 6下的最小最大宽度与高度的一些写法。 IE6最小最大宽度： .min-width { min-width:600px; _width:expression(document.b... 阅读全文

摘要：css初始化代码方案 为了消除各浏览器对css默认的设置，保持网页在各浏览器中的外观保持一致，初始化css就显得非常必要了！很多时候出现的样式不兼容问题，都可以通过css初始化代码来解决。下面列举常用的一些方案：1.最耗资源的，最简单的* { padding: 0; margin: 0; border: 0; } 2.选择性初始化举例（综合）body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,buttonform,fieldset,input,textarea,p,blockquote,th,td { paddin... 阅读全文

摘要：一个CSS布局的实例，等高的两个左右Div，很多时候，我们都需要两列等高，那怕其中一个是自适应高度呢。如例子所示，只要你按代码的方法去做了，不管有多少列，它都会以左边列为标准，自动适应高度，而且在兼容性方面，似乎做的也不错的。CSS特效-两列等高布局效果 这里是我的网站的头部 我也可以有背景色 不管有几个我，右边看起来总是和左边一样高 ... 阅读全文

摘要：因为神奇的中文有时也是会遇到国外同学都不知道原因导致一些神奇滴问题，所以要用更神奇的英文来解决问题。Mac OS的一些：华文细黑：STHeiti Light [STXihei]华文黑体：STHeiti华文楷体：STKaiti华文宋体：STSong华文仿宋：STFangsong儷黑 Pro：LiHei Pro Medium儷宋 Pro：LiSong Pro Light標楷體：BiauKai蘋果儷中黑：Apple LiGothic Medium蘋果儷細宋：Apple LiSung LightWindows的一些：新細明體：PMingLiU細明體：MingLiU標楷體：DFKai-SB黑体：SimH 阅读全文

摘要：Google公布了制图服务（Google Chart）的接口，这项服务用起来相当简单，只使用浏览器就可以用来为统计数据自动生成图片。目前谷歌制图服务提供折线图、条状图、饼图、Venn图、散点图、二维码图等。下面我们来看下如何使用这个简单的服务来生成二维码。接口地址 http://chart.apis.google.com/chart?chs=宽高值x宽高值&cht=qr&chld=等级|边距&chl=内容参数说明：宽高值：生成二维码尺寸，单位是像素，目前生成的二维码都是正方形的，所以两个宽高值都设置为一样的值等级：四个等级，L-默认：可以识别已损失的7%的数据；M-可以 阅读全文