学田网络

CSS技巧代码

Wed, 29 Apr 2009 07:41:58 +0000

目录

介绍
针对浏览器的选择器
让IE6支持PNG透明
移除超链接的虚线
给行内元素定义宽度
让固定宽度的页面居中
图片替换技术

一. 介绍

这篇文章包括了8个非常有用的解决办法, 在进行css设计遇到问题时你就会用到它们.

二. 针对浏览器的选择器

这些选择器在你需要针对某款浏览器进行css设计时将非常有用.

IE6及其更低版本

* html {}

IE7及其更低版本

*:first-child html {} * html {}

仅针对IE7

*:first-child html {}

IE7和当代浏览器

html>body{}

仅当代浏览器(IE7不适用)

html>/**/body{}

Opera9及其更低版本

html:first-child {}

Safari

html[xmlns*=""] body:last-child {}

要使用这些选择器,请将它们放在样式之前. 例如:

#content-box {
width: 300px;
height: 150px;
}
* html
#content-box {
width: 250px;
} /* overrides the above style and changes the width to 250px in IE 6 and below */

三. 让IE6支持PNG透明

一个IE6的Bug引起了大麻烦, 他不支持透明的PNG图片.

你需要使用一个css滤镜

*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png", sizingMethod="scale");
}

四. 移除超链接的虚线(仅对FF有效)

FireFox下,当你点击一个超链接时会在外围出现一个虚线轮廓. 这很容易解决, 只需要在标签样式中加入 outline:none .

a{
outline: none;
}

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

五. 给行内元素定义宽度

如果你给一个行内元素定义宽度,那么它只是在IE6下有效. 所有的HTML元素要么是行内元素要么就好是块元素,你不能定义行内元素的宽度, 为了解决这个问题你可以将行内元素转变为块元素.

span { width: 150px; display: block }

六. 让固定宽度的页面居中

为了让页面在浏览器居中显示, 需要相对定位外层div, 然后把margin设置为auto.

#wrapper {
margin: auto;
position: relative;
}

七. 图片替换技术

用文字总比用图片做标题好一些. 文字对屏幕阅读机和SEO都是非常友好的.

HTML:

Main heading one

CSS:

h1 { background: url(heading-image.gif) no-repeat; }
h1 span {
position:absolute;
text-indent: -5000px;
}

Tags - css , 技巧 , 代码

DIV CSS常用的网页布局代码

Wed, 29 Apr 2009 07:34:03 +0000

单行一列

body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

两行一列

body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}

三行一列

body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

单行两列

#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}

两行两列

#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}

三行两列

#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 410px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }

单行三列
绝对定位

#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}

float定位一
xhtml:

这里是第一列

这里是第二列

这里是第三列

CSS:

#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

float定位二
xhtml:

This is the main content.

This is the left sidebar.

This is the right sidebar.

CSS:

body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}

两行三列
xhtml:

这里是第一列

这里是第二列

这里是第三列

CSS:

#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

三行三列
xhtml:

这里是第一列

这里是第二列

这里是第三列

CSS:

PS:这里列出的是常用的例子，而非研究之用，对一每个盒子，都没有设置margin,padding,boeder等属性！
Tags - div , css , 网页 , 布局 , 代码

你还钟情于PHP吗？请看：PHP的九大缺陷

Wed, 29 Apr 2009 07:21:54 +0000

　　首先，不可否认的说：PHP确实十分容易编写。但是PHP也有一些十分严重的缺陷。

　　下面我会给出我的理由，为什么PHP不适合于比小型业余网站更大的网站。

　　1. 对递归的不良支持

　　递归是一种函数调用自身的机制。这是一种强大的特性可以把某些复杂的东西变得很简单。有一个使用递归的例子是快速排序(quicksort)。不幸的是，PHP并不擅长递归。Zeev，一个PHP开发人员，说道：“PHP 4.0(Zend)对密集数据使用了栈方式，而不是使用堆方式。也就是说它能容忍的递归函数的数量限制和其他语言比起来明显少。”见bug 1901。这是一个很不好的借口。每一个编程语言都应该提供良好的递归支持。

　　2. 许多PHP模块都不是线程安全的

　　在几年前，Apache发布了Web服务器的2.0版。这个版本支持多线程模式，在这个模式下，软件一个一部分可以同时运行多个。PHP的发明者说PHP的核心是线程安全的，但是非核心模块不一定是。但是十次有九次，你想要在PHP脚本中使用这种模块，但这又使你的脚本不能合适Apache的多线程模式。这也是为什么PHP小组不推荐在Apache 2 的多线程模式下运行PHP。不良的多线程模式支持使PHP常被认为是Apache 2依然不流行的原因之一。

　　请阅读这篇讨论： Slashdot: Sites Rejecting Apache 2?.

　　3. PHP 由于商业原因而不健全

　　通过使用缓存，PHP的性能可以陡增500%[见基准测试]。那么为什么缓存没有被构建在PHP中呢?因为Zend——PHP的制造者，它在销售自己的Zend Accelerator，所以当然，他们不想抛弃自己的商业产品这块肥肉。

　　但是有另一个可选择的： APC. (Zend后来推出Zend Optimizer，免费的加速器——译者)

　　4. 没有命名空间

　　设想某个人制作了一个PHP模块用来阅读文件。模块中一个函数叫做read。然后另一个人的模块可以读取网页的，同样包含一个函数read。然后我们就无法同时使用这两个模块了，因为PHP不知道你要用哪个函数。但是有一个很简单的解决方法，那就是命名空间。曾经有人建议PHP5加入这个特性，但不幸得是他没有这么做。现在，没有命名空间，每个函数都必须加上模块名作为前缀，来避免名称冲突。这导致了函数名恐怖得长，例如xsl_xsltprocessor_transform_to_XML让代码难于书写和理解。

　　5. 不标准的日期格式字符

　　很多程序员对日期格式字符都很熟悉，它是从UNIX和C语言中来的。其他一些编程语言采用了这个标准，但是很奇怪的，PHP有它自己的一套完全不兼容的日期格式字符。在C中，“%j”表示一年中的当天，在PHP中他表示一个月中的当天。然而使事情更混乱的是：Smarty (一个很流行的PHP模版引擎)的 strftime 函数和 date_format 函数，却使用了C/UNIX的格式化字符。

　　6. 混乱的许可证

　　你也许认为PHP是免费的，所有的在手册中提到的PHP模块也是免费的。错了!例如，如果你想在PHP中生成PDF文件，你会在手册中发现两个模块：PDF 和 ClibPDF。但是这两个都是有商业许可证的。所以，你所使用的每个模块，你都要确保你同意他的许可证。

　　7. 不一致的函数命名规则

　　有些函数名称是有多个单词组成的。一般有三种单词组合的习惯：

　　直接拼接：getnumberoffiles

　　用下划线分开：get_number_of_files

　　骆驼法则：getNumberOfFiles

　　大部分语言选择其中一中。但是PHP都用到了。

　　例如，你想要把一些特殊字符转换成HTML实体，你会使用函数htmlentities (直接拼接单词)。如果你要使用相反的功能，你要用到它的小弟弟html_entity_decode。由于某些特殊的原因，这个函数名是由下划线分隔单词。怎么能这样呢?你知道有一个函数叫strpad。或者他是str_pad?每次你都要查看一下到底这个符号是什么或者直接等他出现一个错误。函数是不分大小写的，所以对于PHP来说rawurldecode 和RawUrlDecode之间没有什么区别。这也很糟糕，因为两个都使用到了同时他们看上去还不一样，混淆了阅读者。

　　8. 魔法引用的地狱

　　魔法引用(Magic quote)可以保护PHP脚本免受SQL注入攻击。这很好。但是出于某些原因，你可以在php.ini中关闭这个配置。所以你如果要写出一个有弹性的脚本，你总要检查魔法引用是开启还是关闭。这样一个“特性”应该让编程更简单，而事实上变得更复杂了。

　　9. 缺少标准框架

　　一个成长中的网站没有一个整体框架，最终会变成维护的噩梦。一个框架可以让很多工作变得简单。现在最流行的框架模型时MVC-模型，在其中表现层、业务逻辑和数据库访问都分离开了。

　　很多PHP网站不使用MVC-模型。他们甚至没有一个框架。甚至现在有一些PHP框架同时你都可以自己写一个，关于PHP的文章和手册没有提高框架的一个字。同时JSP-开发人员使用像Struts的框架、ASP开发人员使用.net，看起来好像这些概念都广泛被PHP开发人员所了解。这就说明了PHP实际上到底是多专业。

　　总结

　　什么问题?

　　对于非常小的项目，它可以是一个十分符合人意的编程语言。但是对于较大的和更为复杂的项目，PHP就显出他的薄弱了。当你不断地摸索之后，你会发现我提到的某些问题的解决方案。所以，当解决方案已知之后，为什么不能修正他呢?另外为什么这些修补不在手册中提到呢? 一个开源的语言十分流行是一件好事。但不幸得是，它不是一个伟大的语言。我希望所有的问题能有一天得到解决(也许在PHP6?)，然后我们就将拥有一个开源语言，他既开源，又好用。

　　到现在，当你要启动一个多于5个脚本页面的项目的时候，你最好考虑C#/ASP.NET或者 Java/JSP或者也许Python同样是一个更好的选择。

看完了，你还是只钟情于PHP吗？或者说，已经找到了更好的选择呢？
Tags - php , 缺陷 , 网站