CQPEA – PEA重庆分会
msgbartop
msgbarbottom

28 六 09 Web开发与设计师速查手册大全（上）

作为 Web 开发与设计师，免不了在工作时查询大量资料，某个 Web 色值，某个 JavaScript 库的核心语法，这类资料如果攒齐了，怕有半间屋子那么多，如果用 Cheet Sheet 也许几十页纸就够了，本文收集了近百份用于 Web 开发与设计的 Cheet Sheet，你会发现他们非常实用。

HTML, XHTML, CSS2 CSS2 Cheat Sheet


一份完整的 CSS2 速查手册。预览 | 下载 （PDF）
Gosquared CSS help sheets
设计和结构都很整齐，漂亮。下载（PDF）
addedbytes CSS2 Cheat Sheet
该速查手册只有一页纸，包含 CSS 2.1 全部选择器和属性，还包含一个盒子模型示例。下载（PDF | PNG）


Core css
将 CSS 的核心知识分成3部分，包含了 CSS 的方方面面。下载 （需免费注册）
CSS Shorthand Cheat Sheet
一些不容易记住的 CSS 元素。下载 （PDF）
CSS2 – Quick Reference Guide – PDF 下载（PDF） XHTML 1.1 Cheat Sheet
XHTML 1.1 细则中涉及到的所有元素与属性。预览 | 下载
Gosquared html help sheets
设计漂亮，结构精良的 HTML 速查。下载（PDF）
HTML Cheat Sheet
一份 A4 纸大小的单页 HTML 速查表。下载 （PDF | PNG）
HTML Character Entities Cheat Sheet
该表包含 HTML 4 字符标识，包括 ISO8859-1 (Latin-1) 中的字符。预览 | 下载
HTML Colors Cheat Sheet
该 HTML 颜色表包含 1050 种颜色。预览 | 下载（PDF）
RGB Hex Colour Chart
RGB 16进制颜色表。包含216种 Web 安全色。下载 （PNG | PDF）
Scripting 速查手册 JavaScript Cheat Sheet
包含 JavaScript 的 的方法与函数，正则表单时，以及 XMLHttpRequest 对象。下载（PNG | PDF）
JavaScript DOM Cheatsheet
JavaScript DOM 结构速查手册。下载（PDF）
jQuery 1.3 Cheat Sheet
jQuery 1.3 速查表。预览 | 下载（PDF）
mootools 1.2 cheat sheet
另一个 JavaScript 库 MooTools 1.2 速查手册。下载（PDF）
Prototype 1.6.0.2 Cheat Sheet
JavaScript 库 Prototype 1.6.0.2 速查手册。下载（PDF）
Addison-Wesley’s JavaScript Reference Card
JavaScript 参考手册。下载（PDF）
jQuery selectors
对 jQuery 开发者来说，该速查手册不可或缺，详细列举了 jQuery 所有选择器。下载 （免费注册）
服务器端编程 PHP Cheat Sheet (V2)
单页 PHP 参考手册，包含日期格式，正则表达式以及常用函数。下载 （PDF | PNG）
Php 4 Reference Card PHP4 参考速查手册。下载（PDF） PHP Cheat Sheet
PHP 比较操作速查手册。下载
XML (eXtensible Markup Language) in one page XML 单页速查手册。直接访问 XML Syntax Quick Reference XML 语法参考。下载（PDF） SEO 速查手册 The Web Developer’s SEO Cheat Sheet
出自 SEO MOZ 的 SEO 速查手册，包括重要的 SEO HTML 标签，搜索引擎索引的限制，Title 标签语法建议等。下载（PDF）


Tags - , , , , ,
Filed in PHPers' Action with 评论关闭

02 六 09 匹配域名的正则表达式

昨天搞了IPv4的正则，今天又需要域名的，我汗……
干脆直接去Regular Expression Library找算了，合格的如下：
^[a-zA-Z0-9]+([a-zA-Z0-9\-\.]+)?\.(aero|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|ee|eg|eh|er|es|et|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly| ma|mc|md|mg|mh|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|pa|pe|pf|pg|ph|pk| pl|pm|pn|pr|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr| st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zr|zw|AERO|BIZ|COM|COOP|EDU|GOV|INFO|INT|MIL|MUSEUM|NAME|NET|ORG|AC|

描述：Based of from Steward Haddock's domain nam Checks domain names. This is an attempt to deal with some of the issues of the other reg ex in not handling leading periods(.), hypens(-). and valid extension.
匹配：mydomain.com | my-domain.info | mydomain.aero
不匹配：-mydomain.com | mydomain.aaa | .mydomain.com

^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$

描述：Checks domain names. This validates domains based on latest specifications (RFCs 952 and 1123 dealing with hostnames and RFC 1035 dealing with domain name system requirements) except that it only includes realistic fully-qualified domains: 1. requires at least one subdomain 2. allows shortest top-level domains like "ca", and "museum" as longest. Other validation rules: 1. Labels/parts should be seperated by period. 2. Each label/part has maximum of 63 characters. 3. First and last character of label must be alphanumeric, other characters alphanumeric or hyphen. 4. Does not check maxlength of domain which incidentally is 253 characters of text (255 binary representation). For a regular expression that matches ALL domains: ^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)*[a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?$
匹配：regexlib.com | this.is.a.museum | 3com.com
不匹配：notadomain-.com | helloworld.c | .oops.org
Tags - , , , , ,
Filed in PHPers' Action with 评论关闭

01 六 09 匹配合格IPv4地址的正则表达式

今天写个小程序，需要用正则来匹配IP地址看其是否合格，本来打算自己写，但转念一想，估计这玩意应该有很多人已经做过了，于是上网搜索。郁闷的是找了半天发现网友们给出的都是很简单的模式，不适合做严谨的判断。没办法，只有自己搞了……
匹配合格IP地址的正则表达式的模式如下：
^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])$

后来到http://www.regexlib.com/搜了下，居然一样
Tags - , , , , , , ,
Filed in PHPers' Action with 评论关闭

01 六 09 IE7、FF DIV高度不能自适应问题的解决方案

今天有人问我这样一个问题：一个XHTML页面中，最底部的一个footer层居然跑到了中间的pagebody层上面，挨在了header层下面，更奇怪的是footer层中的图片却好好的呆在页面底部……orz
解决方法如下，其实也很简单：
给pagebody层的CSS样式增加如下内容：
height: 100%;
overflow: auto;

搞定！
Tags - , , , , , ,
Filed in PHPers' Action with 评论关闭

23 四 09 编写ASP uc-client与UC通信时遇到Access denied for agent changed

最近研究ASP 和康盛UCENTER通信，遇到了新的问题，

那就是在写uc_user_login等client端函数时 遇到 Access denied for agent changed 问题。

原因在于之前对UC与应用程序之间通信的校验原理没搞清楚的原因

故写博客备忘：

表忘记在http头提交需要的东东。

UC/model/base.php 中校验的http_user_agent是在模拟提交的过程中的当前客户浏览器的usera gent ，

如果在模拟提交过程中，没有将当前用户的useragent提交上去的话，那么UC在

uc/model/base.php 中的 init_input方法获取到的http_user_agent将会是应用服务器当前系统的默认user agent，

而不是客户端的http_user_agent，从而导致 http_user_agent 校验失败，而无法正常通信。

 

以下是PHP和ASP模拟提交的代码 

PHP代码
  1. function uc_fopen($url, $limit = 0, $post = ”, $cookie = ”, $bysocket = FALSE, $ip = ”, $timeout = 15, $block = TRUE) {   
  2.     $return = ”;   
  3.     $matches = parse_url($url);   
  4.     !isset($matches['host']) && $matches['host'] = ”;   
  5.     !isset($matches['path']) && $matches['path'] = ”;   
  6.     !isset($matches['query']) && $matches['query'] = ”;   
  7.     !isset($matches['port']) && $matches['port'] = ”;   
  8.     $host = $matches['host'];   
  9.     $path = $matches['path'] ? $matches['path'].($matches['query'] ? ‘?’.$matches['query'] : ”) : ‘/’;   
  10.     $port = !emptyempty($matches['port']) ? $matches['port'] : 80;   
  11.     if($post) {   
  12.         $out = “POST $path HTTP/1.0\r\n”;   
  13.         $out .= “Accept: */*\r\n”;   
  14.         //$out .= ”Referer: $boardurl\r\n”;   
  15.         $out .= “Accept-Language: zh-cn\r\n”;   
  16.         $out .= “Content-Type: application/x-www-form-urlencoded\r\n”;   
  17.         $out .= “User-Agent: $_SERVER[HTTP_USER_AGENT]\r\n”;   
  18.         $out .= “Host: $host\r\n”;   
  19.         $out .= ‘Content-Length: ’.strlen($post).“\r\n”;   
  20.         $out .= “Connection: Close\r\n”;   
  21.         $out .= “Cache-Control: no-cache\r\n”;   
  22.         $out .= “Cookie: $cookie\r\n\r\n”;   
  23.         $out .= $post;   
  24.     } else {   
  25.         $out = “GET $path HTTP/1.0\r\n”;   
  26.         $out .= “Accept: */*\r\n”;   
  27.         //$out .= ”Referer: $boardurl\r\n”;   
  28.         $out .= “Accept-Language: zh-cn\r\n”;   
  29.         $out .= “User-Agent: $_SERVER[HTTP_USER_AGENT]\r\n”;   
  30.         $out .= “Host: $host\r\n”;   
  31.         $out .= “Connection: Close\r\n”;   
  32.         $out .= “Cookie: $cookie\r\n\r\n”;   
  33.     }   
  34.     $fp = @fsockopen(($ip ? $ip : $host), $port, $errno, $errstr, $timeout);   
  35.     if(!$fp) {   
  36.         return ”;   
  37.     } else {   
  38.         stream_set_blocking($fp, $block);   
  39.         stream_set_timeout($fp, $timeout);   
  40.         @fwrite($fp, $out);   
  41.         $status = stream_get_meta_data($fp);   
  42.         if(!$status['timed_out']) {   
  43.             while (!feof($fp)) {   
  44.                 if(($header = @fgets($fp)) && ($header == “\r\n” ||  $header == “\n”)) {   
  45.                     break;   
  46.                 }   
  47.             }   
  48.   
  49.             $stop = false;   
  50.             while(!feof($fp) && !$stop) {   
  51.                 $data = fread($fp, ($limit == 0 || $limit > 8192 ? 8192 : $limit));   
  52.                 $return .= $data;   
  53.                 if($limit) {   
  54.                     $limit -= strlen($data);   
  55.                     $stop = $limit <= 0;   
  56.                 }   
  57.             }   
  58.         }   
  59.         @fclose($fp);   
  60.         return $return;   
  61.     }   
  62. }  

因此，在ASP提交的时候也应该把这些头提交上去

 

ASP代码
  1. Private Function doPost(url,param)   
  2.     Dim https   
  3.     Set https = Server.CreateObject(“MSXML2.XMLHTTP”)    
  4.     https.Open “Post”, url, False  
  5.     useragent=http_user_agent()   
  6.     https.setRequestHeader “Accept”, “*/*”  
  7.     https.setRequestHeader “Accept-Language”,“zh-cn”  
  8.     https.setRequestHeader “Content-Type”,“application/x-www-form-urlencoded”  
  9.     https.setRequestHeader “User-Agent”, useragent   
  10.     https.setRequestHeader “Content-Length”,len(param)   
  11.     https.setRequestHeader “Connection”,“Close”  
  12.     https.setRequestHeader “Cache-Control”,“no-cache”  
  13.     https.Send param   
  14.     If https.readystate=4 Then   
  15.         doPost = https.ResponseBody   
  16.         doPost = BytesToBstr(doPost,UC_CHARSET)   
  17.     End If   
  18.     Set https = Nothing    
  19. End Function   

如果不提交上去，特别是user agent如果不提交上去，肯定就会出现：Access denied for agent changed 错误

Tags: ,

Filed in 技巧&心得 with 0 Comments

08 三 09 2009.3.7第五次聚会，杨家坪必胜客

PHPers in 2009

【活动主题】PHPer应如何应对2009的机遇和挑战
【预定内容】（新人）自我介绍；主题讨论；经验交流；合影留念
【活动时间】2009年3月7日下午14：00—16：00
【活动地点】重庆杨家坪步行街必胜客二楼
今天来的人不多，大部分PHPer是因为周末要加班或是已有安排，另外一些则是有些日子没有在群里出现所以不知道聚会的事情。
今天讨论的主要内容除了技术话题外，更多的则是面对去年以来的金融危机给IT业尤其是重庆地区带来的影响。与会者一致认为目前的形势非常严峻，从毕业生就业到市区房价、从项目技术成本到生活必需品的物价……社会正在经历一场新的变革。而PHPer们应当把握这段时间，踏实学习、深入研究，为把握住将来的机遇增加对自身有利的砝码。

照例，附上本次活动的照片。算上结束时才来的三少，今天一共来了7个人（照片中没有他）。
IMGP0005
IMGP0011 
IMGP0014

Tags: , , , ,

Filed in CQPEA活动 with 0 Comments

02 三 09 6个jQuery图表的Web扩展应用

随着jQuery、Mootools、prototype等知名的JavaScript框架的应用变的越来越强大，浏览器对最新版本CSS属性的支持，除去页面中Flash的应用之外，图表应用变的越来越广泛实用。本文为你整理了6个实用性强的jQuery图表插件，概述了它们各自的功用和优势。

1，Flot

从交互性的层面来说，jQuery实现的 Flot图表和Flash实现的图表效果已经是非常的接近。图表输出效果相当的流畅光滑，注重视觉效果。你也可以和data points数据节点配合使用，当鼠标hover到某个数据节点时，会得到对应节点的数值说明内容的反馈信息。

如上图所示，你也可以选择图表的一部分内容，获得这些特殊区域的数据；同时，你还可以对数据节点进行放大处理。

优势: 线条、节点、区域填充、柱状图以及以上功能的组合。

2，Sparklines

Sparklines 是我最欣赏的微型图表实现工具。真正实现了仪表风格的图表样式（登录到你的 Google Analytics 就知道什么样子了)。另外一个好的功用就是，可以帮助在所有的图表插件中实现 self-refresh 的能力。

优势: 楔形、线条、柱状图以及以上功能的组合。

3， Google Charts Plugin

Google Charts plugin 是通过jQuery插件将Google Charts API应用到Web程序的一个非常简单的方式。同时，这个 API 本身也是非常的简单易用 。允许使用简单的jQuery调用，设置你自己需要的参数：

.attr(<span>'src'</span>, api.make(<span><strong>{</strong></span>data : [[<span>153</span>, <span>60</span>, <span>52</span>], [<span>113</span>, <span>70</span>, <span>60</span>], [<span>120</span>, <span>80</span>, <span>40</span>]]<strong>}</strong>))

优势: 柱状图、重叠柱状图、线条、楔形、3D楔形。

4，jQuery Chart 0.21

jQuery Chart 0.21看起来似乎并不是一个特别好看的图表插件。实现的也是基本的功能，但它的使用却是非常灵活、易用的。

实例（添加值给图表）

.chartAdd({”label”:”Leads”,”type”:”Line”,”color”:”#008800″,”values”:["100","124","222","44","123","23","99"]})

优势: 区块、线条、柱状图以及以上功能的组合。

5，jQchart

jQchart 可以实现在图表中的拖拽动作和动画转换功能。如果你的CSS应用够好，可以实现外观不错的图表效果。与其他插件相比，jQchart的实现功能似乎有些单一。

优势: 柱状图、线条

6，TufteGraph

Tuftegraph 生成的柱状图漂亮精致，而且可以实现层叠效果。相比Flot 的精致小巧，Tuftegraph也可以实现自身的减压，变得更加轻便。

优势: 柱状图、重叠柱状图。

以上6中同样通过jQuery实现的图表效果，却各有各的优势和局限，你可以根据自身项目的需求，有选择性地使用，我们的原则就是：简单、实用、兼容性强。


Tags - , , , , ,
Filed in PHPers' Action with 评论关闭

01 三 09 15个网站用户体验优化禁忌

对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的实验来认识到。

用户体验，英文叫做User Experience，缩写为UE或者UX。一种纯主观的在用户访问一个网站或使用一个产品（服务）的过程中建立起来的心理感受。他们的印象和感觉，是否成功，是否享受，是否还想再来/使用。他们能够忍受的问题，疑惑和BUG的程度。因为它是纯主观的，就带有一定的不确定因素。个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。

1、超长的页面下载时间

如果页面下载时间超过30秒，很难有用户会喜欢你的网站。

2、无限制的使用Flash及图片

适当的用一些图片及Flash，可以增加网站的生动性，增加视觉冲击力。但无限制的使用Flash及图片，会造成页面文件超大，占用浏览者的CPU资源，并且不利于页面更新及搜索引擎对网站的抓取。企赢营销在服务企业客户时也会遇到纯Flash的整站首页网站，建议网站建设过程中要考虑视觉效果的同时，把优化的因素重视起来。

3、网站页面过长

你认为有多少浏览者有兴趣看你网页中最下面的内容，不要拿自己来作比喻，因为99%以上的人才刚学会上网。

在王建硕的一篇文章中提到：“1995年Jakob Neilson做的互联网用户调查，美国的用户在1994年的时候，只有10%的用户会拖动浏览器右边的滚动条，而绝大多数，90%的用户，打开一个网站，只看浏览第一屏看到的内容，就以为看到了全部，而不会向下滚动。”

现在中国也有这样的人，而且为数不少。在一个网站的首页，能看到第三屏内容的人只有10%以下，一个过长的网站很容易引起浏览者的视觉疲劳，更何况大部分浏览者很有可能已经被前两屏的内容吸引到别的页面去了。

4、不友好的导航

不友好的导航是最影响用户操作的，不能让用记很方便的找到自己想到的内容。用户来到一个页面不知如何返回上一页，不知道当前页面是在哪个栏目下的，这样的网站很可能用户来了一次就不会再来了。

5、过期的信息

很久不更新的信息，很容易让浏览者感到反感，而且在心中也会对你这个网站的品牌形象大打折扣。

6、死连接或连接错误

这个就不说了，这是最基本的错误，但是好些还有这样的错误，包括新浪这种大网站。

7、孤立的页面

用户不知用什么方法返回首页，这种情况往往是出现在信息提示页或内容调查的结果页上。

8、页面没有视觉差异

页面没有视觉差异，页面设计很“平”，缺少“层次感”，缺少视觉冲击力和亮点或者视觉冲击力突出的并不是网站的主体内容。这是没有经验的设计师设计大型网站时最容易犯的错误。

把一大堆信息铺天盖地的展示到浏览者的眼前，你认为他会记住多少。页面设计要吸引并引导浏览者来观看你想推广的内容或产品，当然对网页“层次感”的
设计平不是简单的用一些纯度高的颜色来实现，要根据页面的环境及周边元素综合考虑。就象在一个黑板中画一个白点很明显，但在一个白板上画一个白点就看不清
楚了。

9、链连没有标准的表现形式

现在很多刚上网站的人还只认为有带下画线的文字才是链接，网站要有统一标准的链接表现形式，并且要和没有连接的文字有区别，要让浏览者很方便的认出哪些是连接的文字。

如果是图片加的连接要在图片下标出“点击图片见大图”，图片一定要加ALT属性。“更多”要用中文写，最好不要MORE或者标点符号代替。

10、过多的运用新技术

所谓新技术，就是只有少数人掌握的技术，虽然有可能他的视觉效果很好，功能很强大，但过多的运用新技术，就意味着你准备抛弃99%的用户。

11、缺少互动的内容

缺少互动的内容，缺少网友的参与，不能让网友表达情感和思想，注定这个网站只是个死网站。

12、过复杂的文件目录及文件名

过复杂的文件目录及文件名，不利用搜索引擎对页面的抓取，并且也不利于浏览者的记忆。几乎100%的人输入网址时会用到IE的缓存，目录和文件过于复杂，排在IE缓存很靠下的地方，你当然被第二次访问的机率小的多。

不要说什么用收藏夹，不会有超过一半的人会用收藏夹。而且象我这种收藏夹过于庞大的人，想在收藏夹里找一个网址也是比较不容易的。

13、使用框架

不建议使用框架，不为什么，就因为搜索引荐不喜欢。连Google的广告计划中，对有框架的代码都是单独的。

14、恶意插件，恶意弹出窗口

15、页面中不要过多的用_blank

过多的弹出新窗口，会大量占用计算机的资源，影响浏览者的浏览速度。


Tags - , , , ,
Filed in PHPers' Action with 评论关闭

22 二 09 在PHP中使用SOAP方式调用WebService需要注意的地方

发现个细节问题，不知道是不是和语言以及开发环境有关，暂且先记录下来。
PHP和.NET都可以使用SOAP方式开发出被调用的WebService，在PHP中调用这些WebService的方式都是相同的。
不同的是调用PHP开发的WebService与.NET开发的WebService的RPC方法的方式上（挺拗口的。。。），下面用个例子说明：
调用PHP开发的WebService：
$client = new SoapClient(null, array('location' => "http://********/theinterface.php",
         'uri' => "http://test-uri/",
         'encoding' => 'UTF-8'));
$param = array('dir' => './themes');
$client->listThemes('./themes');

调用.NET开发的WebService：
$client = new SoapClient('http://*******/WebService/WSEcd.asmx?WSDL', array('encoding' => 'utf-8'));
$param = array();
$result = $client->__soapCall('TestLink', array('parameters' => $param));
$TestLinkResult = $result->TestLinkResult;

不同之处就在于牵着可以将RPC方法作为SOAPClient对象的方法直接使用，后者则要使用“__soapCall”方法调用RPC方法并传入参数。
另外，在PHP中调用SOAP方式的WebService，对于PHP而言，最好是直接使用SOAPServer的地址，而不使用WSDL文件（虽然使用ZendStudio可以生成WSDL文件，但是生成的文件似乎存在问题，比如其中的参数和返回值类型都不是很规范），如上例；而对.NET则最好是使用WSDL文件。
以上的细节对于JAVA是否存在还不清楚。
Tags - , , , ,
Filed in PHPers' Action with 评论关闭

16 二 09 CSS如何使DIV层水平居中(包括水平/垂直)

今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,
网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.
可是事实上这样的方法科学吗?
经过网络搜索和亲自实验得出以下结论:
正确的也是对页面构造没有影响的设置如下:
对需要水平居中的DIV层添加以下属性:
margin-left: auto;
margin-right: auto;

经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!
郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.
问题到底出在哪里呢?
感谢网友乐天无用帮忙找出了这个邪门问题的原因.
原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.
问题并不在CSS而在XHTML网页本身.
需要加上这样的代码才能使得上述设置有效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果您希望更为严格的XHTML 1.0 Strict或者XHTML 1.1请查阅相关文档.
以上测试均基于Windows XP SP2版IE6和FireFox 1.0最终版.

如何使DIV居中

主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只
要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

如何使图片在DIV 中垂直居中
用背景的方法。举例：
body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;}

关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"

如何使文本在DIV中垂直居中

如果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body >
<div id="center"><p>test content</p></div>
</body>
</html>

说明：
vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。
CSS+DIV控制页面中元素垂直居中代码 全局和区域垂直居中
<style type="text/css" media=screen>
body
{
text-align: center;
}
#a
{
width: 200px;
height: 400px;
background: #000;
}
#b
{
margin-top: expression((a.clientHeight-50)/2);
width: 50px;
height: 50px;
background: #FFF;
}
#c
{
position: absolute;
left: expression((body.clientWidth-50)/2);
top: expression((body.clientHeight-50)/2);
width: 50px;
height: 50px;
background: #F00;
}
</style>
<div id="a">
<div id="b"></div>
</div>
<div id="c"></div>

另一方法:
<div style="background:blue;position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50"></div>

Tags - , , , ,
Filed in PHPers' Action with 评论关闭
« Previous Posts
sidebartop

Categories

sidebarbottom
sidebartop

PHP

PHPers

sidebarbottom
sidebartop

Tag Cloud

sidebarbottom
© CQPEA – PEA重庆分会 / Design: Smashing Wordpress Themes