Archive for the ‘div+css实例应用’ Category

你曾经遇到过这样的问题，你的网站提供用户上传照片功能，然后你发现，他们上传自己所拍摄的照片大小形状不一你该如何保持你网站的外观不是那么的凌乱？还有例如，您像给图片加上一个拉式阴影，或者圆角（也许两者都要）或其他图形效果应用到图像。这样显的非常cool，但对网站管理员或编辑人员，你将他或她能够保持一致的外观？

效果下载：download

这个实用的工具条只用定义简单CSS就可以实现漂亮的vista风格，现在你只要下载压缩包，打开里面的html文件你就可以预览到你想要的效果：

我们的工具栏使用少量的CSS和HTML 就实现。点击查看

兼容测试：Firefox 2, IE 6, IE 7, Opera 9.2, Safari 3.0.3 在 Windows下

测试兼容环境： IE6, IE5.5, IE7, Safari 2, Firefox 2, Opera 9.

给表格加超连接的代码如下：

让鼠标经过表格颜色变化的代码如下：

    我们按照网页的基本代码构成来逐步讲解

下面就是常用的代码结构

(全文…)

    为什么一定要用DIV+CSS做网站呢？

1.DIV+CSS是一种“WEB标准”也是一种发展的趋势，既然是一种标准说有它就有他的必要性，有他的优势所以就会有很多人去遵循它，就会成为一种趋势，当很多人都去遵循它我们也要争取走在趋势的前端。

2.DIV+CSS制作的网站打开打开速度快，一般是普通网站打开的三倍快。可以想象，用户在访问一个打开速度快的和一个打开网站要等待的网站那个体验更好呢？当我遇到打开速度快的网站，我可能会看几个页在，不知道你有没有这种想去体验速度的感觉呢？

3.表面和内容是分离的。表现和内容分离,方便网站改版，网站改版的时候只需要对css进行重构便可完成网站的改版需要。易于维护和改版,采用CSS+DIV对网站重构可以大大提升网站用户与搜索引擎的友好度。

1.对网站做SEO优化的时候能省掉不少麻烦。
　　SEO即搜索引擎优化,SEO就是在google、百度、yahoo等等各大搜索引擎中获得比较靠前的自然排名的技巧和策略。由于采用div+css的网站代码简洁能提高提高spider爬行效率就会受到spider喜欢，这样对收录数量有一定好处.

DIV+CSS的概念   DIV+CSS的概念是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

今天偶然看到“一个有将近两年的div + CSS 开发经验和历史，曾经是Web标准绝对拥趸的同志”在自己的blog上发表放弃div+css的申明。我更深感一种悲哀——特别是当我苦口婆心地劝说公司的前端开发人员开始学习DIV+CSS的时候。
不过看看这个“好同志”放弃的理由的其中两条，不禁让我所心冷。

• 公司领导及客户不关心这个，他们需要的是快速、高效的工作和花哨的页面
• 所费功夫与收入不成正比，利用table可以大大减少工作量

确实，当今市场环境下，div+css对于一个财力一般的公司是一种奢侈。尤其是对于那种靠业务员疯狂跑业务而存活的（不打算上市）的公司，是一种莫大的浪费。我在广州曾见过许多“三天建站”的公司其中90%的人在外跑业务，然后10%的垃圾web开发设计人员把代码一遍一遍的往table里面塞。

甚至可以这么说，一个公司对div+css的认同和投入，直接决定了这个公司的期望目标，比如上市。好在我现在所在的公司在这一点上是非常愿意付出代价的。

其实，在具体商业产品实现上，并非一定要把自己拘泥于“Web标准绝对拥趸”的角色。我们似乎应该静心思考为什么使用div+css，而不是如何实现某个细节。

我们公司面临的困境则是相反的。就是太拘泥于div+css、为了DIV+CSS而DIV+CSS。这样做是毫无意义的。如果为了实现一个效果而不顾策略强行使用一种技术，是非常失败的一种做法。当然，我觉得这需要设计人员与开发人员的共同努力和让步。尤其是在B/S架构下。设计者肯定要做出更多的让步。比如某个布局中1px的差距能节省3k的HTML文件size，哪怕放弃视觉上这1px的效果，我看都值得。更何况，大多数干扰DIV+CSS布局的设计本身也是极不美观的。

movivi.com的SEO我思考了很多。我觉得最大的问题就出在我们并没有足够吃透W3C上。

当时，当w3c刚出的时候，三大门户十分不屑。清一色的table遍布整个首页。可是这样导致的问题不久就暴露出来了。搜索引擎爬虫难以解析复杂的table，而样式的改版也极为难受。

div+css，这个布局中，div承载的是内容，而css承载的是样式。内容和样式的分离对于所见即所得的传统table编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过div+css的好处实在是太明显了：

1、搜索引擎亲和力：搜索引擎不会在意一个页面的设计或者构成。搜索引擎不可能“欣赏”设计漂亮新颖的页面；也不会去“排斥”颜色搭配丑陋的页面。它们只是默默地拿到它们需要的内容就离开。如果一个页面中涵盖了大量的table来描述构架，试想搜索引擎要花多大的代价才可以拿到真正有用的信息呢？
凭我自己的经验，一般来说，table构架描述的页面，样式结构和内容信息大小比可能达到1：1甚至更高。而CSS+DIV构架的页面，虽然在客户端看来下载一个复杂的CSS也要占用差不多的带宽，然而搜索引擎可以很方便的绕过这个css，而直接抓去div中的内容。这便是div的优势所在。带宽的稍多占用，完全显得微不足道，更何况一个冗余的table设计架构如果代码写的不好会占用更多的带宽。

2、重构页面的方便性。
这个应用最经典的例子就是各大blog程序了。就如现在我用的wordpress系统，以及流行的PJBLOG、php下面的cms，都是采用div+css构架。内容和样式的分离导致我们在重构页面布局（更换皮肤）的时候，只用针对每一个div元素重新定义其具体位置、样式就行了。而在原来的table基础上进行改版,几乎必须改变所有的内容注入渠道,实在是太过于麻烦.
关于韩国风格网站难用div描述的问题，我个人认为在web2.0的大军冲击下，韩国的花哨流派很快会被简约派所代替。如果确实是优秀的设计，我个人认为用Flash来完成更好！

JavaScript在WEB编程中能起到很大的作用，将一些常用的功能写成JavaScript类库。
将下面代码保存为Common.js
类库功能：
1.Trim(str)－－去除字符串两边的空格
2.XMLEncode(str)－－对字符串进行XML编码
3.ShowLabel(str,str)－－鼠标提示功能（显示字符，提示字符）
可以设置显示的提示的文字的字体、颜色、大小以及提示的背景颜色、边框等
4.IsEmpty(obj)－－验证输入框是否为空
5.IsInt(objStr,sign,zero)－－验证是否为整数，正整数，负整数，以及是否包括零
6.IsFloat(objStr,sign,zero)－－验证是否为浮点数，正浮点，负浮点，以及是否包括零
7.IsEnLetter(objStr,size)－－验证是否为26个字母，大写小
源代码如下：
/*
名字：Common.js
功能：通用JavaScript脚本函数库
包括：
1.Trim(str)－－去除字符串两边的空格
2.XMLEncode(str)－－对字符串进行XML编码
3.ShowLabel(str,str)－－鼠标提示功能（显示字符，提示字符）
4.IsEmpty(obj)－－验证输入框是否为空
5.IsInt(objStr,sign,zero)－－验证是否为整数
6.IsFloat(objStr,sign,zero)－－验证是否为浮点数
7.IsEnLetter(objStr,size)－－验证是否为26个字母

(全文…)

遇到此种问题，设置文本框的 vertical-align:middle 就可以了