oneoo's 私家花园

使博客访问速度更快的技巧

oneoo — Sun, 29 Jun 2008 05:24:05 +0800

很

多网友会发现，大家同样是使用 Yo2 的博客服务，怎么自己的博客打开速度比人家慢？嗯，虽然都是跑同样的服务器，同样的线路，但博客的设置各不相同，这样就会出现差距了。我作为 Yo2 的开发员，我给大家介绍一下如何设置自己的博客可以取得更快的访问速度

不要频繁进入管理后台更改设置
- 很多网友喜欢经常到管理后台更改一下设置，看到文章有点瑕疵就重新编辑发布等等，这些操作都会触发 Yo2 CDN 系统更新博客缓存，如果一个博客的缓存被更新，那么就需要重新生成这些博客页面了，打开一个缓存页面的速度比重新生成一个页面快很多。所以大家要改改这些习惯
打开博客的缓存加速功能
- 在管理后台-设置-输出，可以打开博客的缓存加速功能，大家可以根据所使用的模板进行选择，那些页面组成部分可以让系统缓存（比如我的博客只有页首因为有当前页面标识的功能，而侧栏和页尾的内容都可以是固定不变的，那么我就打开了侧栏和页尾的缓存加速）。开启了页面组成部分的缓存加速，可以让在重新生成页面时，可以直接使用已缓存的页面组成部分，减少了部分的数据操作，相对生产页面所消耗的时间就得到减少了
尽量减少第三方网站提供的 JavaScript 、图片调用
- 有些网友喜欢在自己的侧栏加入很多第三方网站提供的服务，比如播放器、Rss、图片、访问统计等等，甚至有人会加入多个统计代码。博客确实很多东西了，但随之而来的速度被拖慢了，如果调用了一些国外的服务，对博客的访问速度影响更大。我之前有加入过 google 的访问统计，但这个有比较长时间的页面显示延迟，为了获取更快的速度，我把它删了。之前我还是用了 FeedSky 的 JavaScript 方式显示订阅按钮，后来直接写成 Html 格式，都可以加快页面的显示速度。我建议大家尽可能把第三方的调用控制在2个以内
减少首页（列表页面）的文章数量
- 文章中可能包含了一些图片，在单个文章显示时的速度还挺快，但首页（文章列表）中包含的文章数量多的话，也就代表该页要显示的图片是列表上的文章所包含总和。还有部分网友是使用其他相册提供的图片服务，如果这些相册的访问速度慢，同样对自己的博客有影响。我建议把首页（文章列表）一页显示的文章数量控制在 5 个左右，确实需要一下显示多个文章的话，可以选择摘要输出（不显示图片）
使用 CNAME 绑定域名(收费用户)
- Yo2 在各个网络都部署有独立服务器节点，只有使用 CNAME 方式进行域名解析，才能使用 Yo2 的 CDN 服务进行访问加速。对于使用了 A记录方式直接解析到我们其中一台服务器，那么所有网友访问你的博客也只限于在一台服务器上，并且这台服务器的线路不一定是最快的。如果你要使用 domain.com 这的域名进行绑定，而域名服务器又无法给 domain.com 提供 CNAME 方式的解析，我建议你更换绑定的域名为 www.domain.com 或 blog.domain.com ，又或者更换域名的解析服务器，改为使用 DnsPod 这样的域名解析服务

完成！希望这些技巧能让你更好的使用 Yo2 博客服务

文章来源 oneoo's 私家花园 : http://oneoo.com/articles/blog-faster-access-to-the-skills.html, 数字验证: b96690767bb506e0257e9532a7888dc4

国内 CDN 服务介绍

oneoo — Sat, 28 Jun 2008 06:15:32 +0800

C
DN是一个经策略性部署的整体系统，能够帮助用户解决分布式存储、负载均衡、网络请求的重定向和内容管理等问题。　　其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，解决 Internet 网络拥塞状况，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均而产生的用户访问网站响应速度慢的根本原因。
引用：http://www.chinacache.com/viewtechnique.asp?id=15

目前国内主要的 CDN服务商有北京蓝汛、网宿科技、北京快网、浙江联存、CDN联盟等数家，服务商之间的技术实力还有一定差距，产品线比较长的有北京蓝汛和网宿等几家，全国分布节点数量多，可提供多种加速服务，但相对价格也比较昂贵。一般小型 CDN 服务商较有价格优势，但产品线比较短，不能提供一些比较高端的应用，基本是做静态文件加速服务。

普通的静态文件加速服务技术门槛低，只需要配备智能DNS解析服务，使用 squid (内容缓存系统) 在各地区部署一定数量的服务器节点，即可投入服务。所以现在有越来越多的 IDC 服务商开始建立自己的 CDN 网络，但因为还在起步阶段，带宽总容量低，所部署的节点数量比较少，主要分布在各大城市，并且节点的网络质量参次不齐。

更多的服务商加入到 CDN 行列，已经把带宽资费拉到普通多线带宽的水平。现在越来越多的网站开始使用 CDN 服务，给网站的静态内容(如：图片)进行加速，而动态内容依然使用自有多线服务器提供访问服务。而有部分大型网站则开始建立自己的 CDN 网络 (如：6.cn) 自主 CDN 网络的可控性高，可以根据自己的各项服务需求进行细节调整，但维护成本则相对购买第三方的 CDN 服务要高得多。

我们需要根据自身网站的实际需求、技术能力和资金，综合分析应该怎样使用 CDN 服务进行访问加速。因为 CDN 服务商只能提供一定域名数量的加速服务，如果你的网站需要给大量的域名访问进行加速，则需要自行建立 CDN 网络了。(如果您需要进一步了解 CDN 服务，我是能够提供一些建议的

---------------------------------------------------------

Yo2 是博客服务商，需要给大量的博客进行访问加速，所以选择自行建立 CDN 网络。并且在服务器节点的页面缓存技术方面，相对普通的 CDN 服务商有一定的优势，我们的缓存系统已支持动态页面的加速服务，除了少量要求即时动态处理的数据以外，其他的博客文章页面、模板、图片等内容均已使用缓存加速。

虽然我们的 CDN 网络还是起步阶段，所部署的服务器节点有限，但我们选择的机房带宽要求都是很高的，同省区的访问速度 < 20Ms，跨省区访问的速度在30~50Ms之间。在 Yo2 的成长过程中，我们将进一步完善自己的 CDN 网络，以提供更快的博客访问速度

文章来源 oneoo's 私家花园 : http://oneoo.com/articles/cdn-services-on-the-mainland.html, 数字验证: b96690767bb506e0257e9532a7888dc4

HTTP 的后台任务

oneoo — Thu, 12 Jun 2008 00:18:47 +0800

众

所周知 HTTP 协议是无保持连接的，HTTP 1.1 虽然实现了保持连接的能力，但依然无法在连接上实现交互功能。浏览器给服务器发送一个 GET 请求，然后等待服务器返回数据，完成一个数据交互处理。问题就是出在等待返回这点，当有一个不需要服务器返回数据，但需要服务器处理一定的操作时，就显得这个等待是没有必要的。

举个比较长见的例子：

一个使用 Javascript (或图片) 方式记录的统计程序，需要用户每次打开页面都在服务器端做记录操作，而我们不需要收取服务器端返回的任何结果，只要服务器能做计数的操作就可以了。

虽然是 Javascript 或图片的调用，但在页面在浏览器渲染并显示给用户的过程，依然会造成一定的延时。如果我们能把这个没用的等待剔除，就可以加快页面的加载速度。

但这个应用非常特殊，正常来说根本没有这样的 web server 支持 _-!!，我在 google 查阅过一些资料，可以使用给浏览器发送 Header : Content-Length: 0 的方法来实现，经过测试在未经过 nginx 的情况下确实能够令到浏览器停止加载，但如果前端有 nginx 就没有任何效果了。

如需要 100% 的效果，只能从 web server下手，在收到 GET 请求时就直接返回一个内容，但继续进入 PHP 处理接下来的数据操作。

Yo2 的页面访问都是经由 yo2cache 处理的，so 我们很容易就实现了这项功能

文章来源 oneoo's 私家花园 : http://oneoo.com/articles/http-background-tasks.html, 数字验证: b96690767bb506e0257e9532a7888dc4

@139.com 邮箱实现服务器监测通知

oneoo — Fri, 06 Jun 2008 08:14:32 +0800

当

你手上管理着好几台服务器，需要及时获取这些服务器网络断开或死机的消息通知，那么手机短信通知将是最好的途径。这点小事情不需要开通什么SMS短信端口的你只要注册一个 @139.com 邮箱即可，该邮箱带有手机短信通知功能（好像通过手机查看邮件内容是需要付费的 _-!! 但我只需知道 web 服务是否正常，就把服务器信息简单的写在标题即可）

使用 PHP 监测 web 服务 80 端口是否正常：

发送邮件的 class (smtp.txt)，请自行修改文件名
<? include_once('smtp.php'); @ob_end_flush(); //请修改为自己的发信邮箱地址(用原来的@139.com邮箱无法发送成功 _-!!，错误不明) $smtp = new smtp("smtp.163.com",25,true,"***@163.com" ,"***"); function testServer($ip){ // 如果服务器在1小时内出现过错误则跳过检测 if(file_exists("/tmp/check-$ip") && (time() - filemtime("/tmp/check-$ip")) < 3600)return false; global $smtp; $h = ''; echo "CHECK: $ip"; if($fs = @fsockopen($ip,80, $errno, $errstr, 10)){ @fwrite($fs, "GET / HTTP/1.0\r\nHost: oneoo.com\r\n\r\n"); $h .= @fgets($fs, 256); @fclose($fs);} if(strpos($h,'200') === false){ @touch("/tmp/check-$ip"); echo " Fail\n"; //请修改为自己的邮箱地址 $smtp -> sendmail( '***@139.com', "wesnet@163.com", "Yo!", "服务器 $ip 出现异常", $h, "TXT" ); return false; }else @unlink("/tmp/check-$ip"); echo " OK\n"; return true; } testServer('***.***.***.***'); testServer('***.***.***.***');//检测多个服务器 echo "Finish TEST!\n"; ?>

把该程序放在相对最稳定的服务器上，并设置 crontab 定时执行该程序 (如果还担心这台服务器不稳定，可以在其他服务器上也搞个监测程序

程序虽然是非常简单，但作用不小哦。我就是用这个方法来监测 Yo2 的服务器，服务器一出现无法访问，就能在 10 分钟内短信通知我了。

如果服务器没有 PHP 环境，也可以使用 perl 来写个

文章来源 oneoo's 私家花园 : http://oneoo.com/articles/139com-mail-server-monitoring-to-achieve-notice.html, 数字验证: b96690767bb506e0257e9532a7888dc4

使用 PRTG 软件监控服务器、网络状态

oneoo — Tue, 03 Jun 2008 04:27:28 +0800

RTG 是一个 For Windows 的服务器远程监控工具，它可支持多种监控协议，比较常用的是 SNMP 协议，大部分路由器等网络设备都支持该协议。服务器只需要安装一个 snmpd 监控即可。

以下介绍如何使用 PRTG 工具来监控服务器的资源、网络状态：

第一、必须在服务器上安装 snmpd 工具

Linux: yum -y install snmpd && yum -y install net-snmp

第二、配置 snmpd 工具以提供 CPU、RAM、Disk和网络状态的监控

请编辑 /etc/snmp/snmpd.conf

加入配置内容：

access notConfigGroup "" any noauth exact mib2 none none
view mib2   included .iso.org.dod.internet.mgmt.mib-2 fc

如需要监控 CPU 和disk等状态，请加入以下配置内容：

com2sec adminUser default       admin
group   adminGroup v1           adminUser
view adminview included .1.3.6
access adminGroup "" any noauth exact adminview none none

load 12 14 14
disk / 10000

红色部分是设置只允许 admin 用户才能获取 CPU 和disk等状态数据，如果服务器的状态数据敏感，可使用 v2 协议，并加上密码

蓝色部分是设置监控某分区，当然也可以设置多个，以监控多个分区

第三、配置 PRTG 客户端监控服务器状态

添加网络监控：

添加CPU、磁盘等的监控：

跟添加网络监控的步骤有些区别，在第三步选择协议的时候不选择Standard Traffic Sensor 而选择 Custom SNMP Sensor。

在输入服务器信息时，如果 snmpd 配置文件中设置 CPU、磁盘等监控信息不为 public 默认访问可读取时，SNMP Community String 需要输入你在配置文件中设置的用户名

第五步需要输入正确的 OID (附表)，并设置数据类型为 Gauge ；如是磁盘、内存等数据可设置 Scale 为 1024

设置综合监控界面

还可以针对某项监控数据加上报警设置，如高亮显示，甚至可以自动执行某程序和发送 email 通知。

OID 对照表：

1.3.6.1.4.1.2021.10.1.3.1 //CPU 每分钟的 Load
1.3.6.1.4.1.2021.4.6.0 //已使用内存空间大小

1.3.6.1.2.1.6.9.0 //系统的 TCP 端口连接数

1.3.6.1.4.1.2021.9.1.6.1 //第一个监测 Disk 的总空间大小
1.3.6.1.4.1.2021.9.1.8.1 //第一个监测 Disk 的已使用空间大小
1.3.6.1.4.1.2021.9.1.9.1 //第一个监测 Disk 的使用比率

更详细的 OID 可使用 snmptranslate -Tp 1.3.6.1.4.1.2021 命令获取

文章来源 oneoo's 私家花园 : http://oneoo.com/articles/prtg-software-monitoring-the-use-of-servers-network-status.html, 数字验证: b96690767bb506e0257e9532a7888dc4

httperf 一个高性能的压力测试工具

oneoo — Wed, 14 May 2008 04:06:06 +0800

ttperf is a tool for measuring web server performance. It provides a flexible facility for generating various HTTP workloads and for measuring server performance. The focus of httperf is not on implementing one particular benchmark but on providing a robust, high-performance tool that facilitates the construction of both micro- and macro-level benchmarks. The three distinguishing characteristics of httperf are its robustness, which includes the ability to generate and sustain server overload, support for the HTTP/1.1 and SSL protocols, and its extensibility to new workload generators and performance measurements.

Httperf 是一个高效的 http 压力测试工具，使用它可以模拟出超过1千的并发访问，能充分测试出 web server 的性能。而之前使用的 siege 测试工具则未能突破 500 个并发测试（如果您知道如何可以实现，请告诉我）

使用 httperf 应该能了解到自己编写 yo2cache 软件性能极限如何了

以下是 gzip 格式访问的测试数据（因缓存文件以 gzip 格式保存，所以性能是最高的）

oneoo@oneoo-pc:~/Desktop$ httperf --server oneoo.com --num-conns 2000 --add-header "accept-encoding: gzip"
httperf --client=0/1 --server=oneoo.com --port=80 --uri=/ --send-buffer=4096 --recv-buffer=16384 --add-header='accept-encoding: gzip' --num-conns=2000 --num-calls=1
Maximum connect burst length: 1

Total: connections 2000 requests 2000 replies 2000 test-duration 1.304 s

Connection rate: 1533.7 conn/s (0.7 ms/conn, <=1 concurrent connections)
Connection time [ms]: min 0.6 avg 0.7 max 6.3 median 0.5 stddev 0.2
Connection time [ms]: connect 0.0
Connection length [replies/conn]: 1.000

Request rate: 1533.7 req/s (0.7 ms/req)
Request size [B]: 81.0

Reply rate [replies/s]: min 0.0 avg 0.0 max 0.0 stddev 0.0 (0 samples)
Reply time [ms]: response 0.6 transfer 0.0
Reply size [B]: header 302.0 content 10482.0 footer 0.0 (total 10784.0)
Reply status: 1xx=0 2xx=2000 3xx=0 4xx=0 5xx=0

CPU time [s]: user 0.29 system 1.01 (user 22.4% system 77.6% total 100.0%)
Net I/O: 16273.4 KB/s (133.3*10^6 bps)

Errors: total 0 client-timo 0 socket-timo 0 connrefused 0 connreset 0
Errors: fd-unavail 0 addrunavail 0 ftab-full 0 other 0

以下是 deflate (2级压缩率)格式访问的统计数据（需要从 gzip 解压，再压缩为 deflate 的数据处理）

oneoo@oneoo-pc:~/Desktop$ httperf --server oneoo.com --num-conns 2000 --add-header "accept-encoding: deflate"
httperf --client=0/1 --server=oneoo.com --port=80 --uri=/ --send-buffer=4096 --recv-buffer=16384 --add-header='accept-encoding: deflate' --num-conns=2000 --num-calls=1
Maximum connect burst length: 1

Total: connections 2000 requests 2000 replies 2000 test-duration 4.113 s

Connection rate: 486.2 conn/s (2.1 ms/conn, <=1 concurrent connections)
Connection time [ms]: min 2.0 avg 2.1 max 11.8 median 2.5 stddev 0.3
Connection time [ms]: connect 0.0
Connection length [replies/conn]: 1.000

Request rate: 486.2 req/s (2.1 ms/req)
Request size [B]: 84.0

Reply rate [replies/s]: min 0.0 avg 0.0 max 0.0 stddev 0.0 (0 samples)
Reply time [ms]: response 0.6 transfer 1.5
Reply size [B]: header 305.0 content 11014.0 footer 0.0 (total 11319.0)
Reply status: 1xx=0 2xx=2000 3xx=0 4xx=0 5xx=0

CPU time [s]: user 0.91 system 3.20 (user 22.2% system 77.8% total 100.0%)
Net I/O: 5414.3 KB/s (44.4*10^6 bps)

Errors: total 0 client-timo 0 socket-timo 0 connrefused 0 connreset 0
Errors: fd-unavail 0 addrunavail 0 ftab-full 0 other 0

以下是 deflate (4级压缩率)格式访问的统计数据

oneoo@oneoo-pc:~/Desktop$ httperf --server oneoo.com --num-conns 2000 --add-header "accept-encoding: deflate"
httperf --client=0/1 --server=oneoo.com --port=80 --uri=/ --send-buffer=4096 --recv-buffer=16384 --add-header='accept-encoding: deflate' --num-conns=2000 --num-calls=1
Maximum connect burst length: 1

Total: connections 2000 requests 2000 replies 2000 test-duration 5.329 s

Connection rate: 375.3 conn/s (2.7 ms/conn, <=1 concurrent connections)
Connection time [ms]: min 2.6 avg 2.7 max 32.8 median 2.5 stddev 0.7
Connection time [ms]: connect 0.0
Connection length [replies/conn]: 1.000

Request rate: 375.3 req/s (2.7 ms/req)
Request size [B]: 84.0

Reply rate [replies/s]: min 374.8 avg 374.8 max 374.8 stddev 0.0 (1 samples)
Reply time [ms]: response 0.6 transfer 2.0
Reply size [B]: header 305.0 content 10457.0 footer 0.0 (total 10762.0)
Reply status: 1xx=0 2xx=2000 3xx=0 4xx=0 5xx=0

CPU time [s]: user 1.29 system 4.01 (user 24.2% system 75.2% total 99.4%)
Net I/O: 3975.4 KB/s (32.6*10^6 bps)

Errors: total 0 client-timo 0 socket-timo 0 connrefused 0 connreset 0
Errors: fd-unavail 0 addrunavail 0 ftab-full 0 other 0

以下是文本格式访问的统计数据

oneoo@oneoo-pc:~/Desktop$ httperf --server oneoo.com --num-conns 2000 --add-header "accept-encoding: normal"
httperf --client=0/1 --server=oneoo.com --port=80 --uri=/ --send-buffer=4096 --recv-buffer=16384 --add-header='accept-encoding: normal' --num-conns=2000 --num-calls=1
Maximum connect burst length: 1

Total: connections 2000 requests 2000 replies 2000 test-duration 2.349 s

Connection rate: 851.3 conn/s (1.2 ms/conn, <=1 concurrent connections)
Connection time [ms]: min 1.1 avg 1.2 max 5.8 median 1.5 stddev 0.2
Connection time [ms]: connect 0.0
Connection length [replies/conn]: 1.000

Request rate: 851.3 req/s (1.2 ms/req)
Request size [B]: 83.0

Reply rate [replies/s]: min 0.0 avg 0.0 max 0.0 stddev 0.0 (0 samples)
Reply time [ms]: response 0.6 transfer 0.6
Reply size [B]: header 278.0 content 42562.0 footer 0.0 (total 42840.0)
Reply status: 1xx=0 2xx=2000 3xx=0 4xx=0 5xx=0

CPU time [s]: user 0.62 system 1.73 (user 26.2% system 73.7% total 99.9%)
Net I/O: 35683.0 KB/s (292.3*10^6 bps)

Errors: total 0 client-timo 0 socket-timo 0 connrefused 0 connreset 0
Errors: fd-unavail 0 addrunavail 0 ftab-full 0 other 0

从以上数据可以看到 yo2cache 性能挺好的，最高能达到每秒 1500 个并发处理。性能瓶颈是出现在缓存数据的解压与压缩处理上，如果缓存空间足够大的话，可以考虑保存多种格式的缓存数据，就能解决这个瓶颈问题。

而在 deflate 数据压缩方面，因为2级压缩率与4级压缩率所产生的数据量差距不大，但并发性能有一定差距，可以考虑使用 2 级压缩率。

文章来源 oneoo's 私家花园 : http://oneoo.com/articles/httperf-the-pressure-of-a-high-performance-test-tools.html, 数字验证: b96690767bb506e0257e9532a7888dc4

关于3月的相片销售业绩总结

oneoo — Mon, 12 May 2008 15:46:28 +0800

大

家还记得3月的时候我曾经发表过文章，要在网络上销售自己的生活照吧

现在两个月过去了，共有3个网友购买了我的照片，收入是3块钱人民币 _-!! 因为我不是什么名人，并且是个大男人。照片的吸引力确实不怎么样，能卖出去已经算是成功了。如果你是 mm ，估计你的销售业绩肯定比我好多了。这个收入跟放个广告差距不大 _-!!

还是原始的欲望所带来的商机大啊，好比做（合法）网站的，就算网站怎么个出色，也很难在一年内实现盈利，但人家做色·情·站的不用一个月就能开宝马了。呵呵，对比就是这么大。

注意：照片销售正式停止

文章来源 oneoo's 私家花园 : http://oneoo.com/articles/the-photo-on-the-march-sales-summary.html, 数字验证: b96690767bb506e0257e9532a7888dc4

Yes! 是 Yo2messenger

oneoo — Mon, 21 Apr 2008 07:13:30 +0800

很

早以前，一个老伯伯就发过一个 Yo2messenger 的截图，但此老伯伯当时只做了个非常简陋的登录界面，就没有回事。并未继续开发下去。

现在这个老伯伯终于下定决心要把它给“生”下来的并且制作了更好的界面，剩下的工作就是加入实际功能。

程序是基于网页 AJAX 的形式进行开发，当然对于 Windows 平台就提供一个简单的框架，更方便使用。而 Linux 等其他使用 FireFox 浏览器的用户则可以在浏览器的侧栏加载此程序界面已定型，现在给大家放个图

文章来源 oneoo's 私家花园 : http://oneoo.com/articles/yes-is-yo2messenger.html, 数字验证: b96690767bb506e0257e9532a7888dc4

你的理想是什么?

oneoo — Sat, 12 Apr 2008 00:18:35 +0800

理

想-是人生的奋斗目标，是人们对未来的一种有可能实现的想象。理想是一种对未来的想象，但是，并不是任何想象都是理想。

如果没有理想，你只能平庸的度过了自己短暂的一生。当然各个人的理想都不同，比如有的女人理想就是嫁一好老公，能过上安稳的日子，而有的则是希望嫁个有权势的老公，享尽荣华富贵。更有的理想是成为独立的女强人不知道你的理想是什么？

不同的理想所造就出来的人生差距是非常大的。拥有好老公的不可能成为人群中的亮点，而拥有权势的也不可能进出菜市场一样。可以说理想决定了你的一生，你怎样选择就得好好想想咯。

不同的生活环境造就不同的理想。生活在贫困当中的人，估计他所想到的理想也就只会局限在物质方面了，连自己的生活都未过得安稳，他如何去想更大的理想，并能够实现自己的理想呢？出身于富裕家庭的人，他的理想会只需要过上安稳的生活吗？他已经拥有安稳生活了啊！

安稳的生活成为理想定位的最大敌人！如果你生活在一个安稳的环境下，那么你的理想很可能被现在已拥有的生活而局限起来。你会觉得自己已经拥有一些其他人都没有物质，也就没有了强大的动力推使你去实现更大的理想，可能你已经觉得反正自己已经比人家优秀，没必要花费更大的力气了。安稳的生活也会使人生过得平庸！

我的理想是 Yo2 能够建立起一个品牌，成为互联网上一颗闪亮的星星

我为实现自己的理想，放弃了一直以来的安稳生活，全心全意的付出着，等待着···

文章来源 oneoo's 私家花园 : http://oneoo.com/articles/what-is-your-ideal.html, 数字验证: b96690767bb506e0257e9532a7888dc4

完美实现垂直水平居中的 DIV

oneoo — Sat, 05 Apr 2008 05:16:05 +0800

这

个问题，估计很多网页设计员都会遇到过，如何在页面中建立出一个垂直水平居中的 DIV 呢？

我在 google 搜索了一下关键字“div 垂直居中” ,约有71,900项符合的查询。但并未能找到一个正确的，符合 XHTML和CSS规范的办法。自己就琢磨了一下，其实也不难，虽然DIV不支持未明确高度的垂直居中，但这个是可以变通的。

我们知道 div 的 position 属性是支持百分比数值来进行定位的，有了这个定位能力，我们就可以把 div 的显示坐标定位在网页的绝对中心了，再通过 margin 属性把 div 设置为我们需要的宽度和高度就可以。当然我们的 margin-top 和 margin-left 属性需要使用到负数，把DIV的定位从中心分别向上和向左移动到合适的地方。下面这个例子可以在页面上建立一个垂直水平居中的 DIV:

<!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-8" /> <title>垂直水平居中的 DIV</title> <style type="text/css">  </style> </head> <body> <div id="pageFrame">垂直水平居中的 DIV</div> </body> </html>

使用此方法，既不需要书写不标准的 css 代码，使用各浏览器的Hack，更不需要使用 JavaScript 来实现。

文章来源 oneoo's 私家花园 : http://oneoo.com/articles/perfect-realization-of-the-level-of-intermediate-vertical-div.html, 数字验证: b96690767bb506e0257e9532a7888dc4