文章中心
Article center
2009-06-08
Web2.0 在互联网已被提出了好一段日子,形容着下一世代的网站发展与设计。究竟何谓Web2.0?" Web2.0 是指新一代的万维网服务,这个服务能令使用者在在线共同合作或交流信息。与第一代相比,Web2.0 提供一个比传统静态网页更接近桌面应用的经验予使用者
2009-06-08
margin和padding总是有可能要用到,而产生的问题如何解决呢?由于浏览器解释容器宽度的方法不同:IE 6.0 Firefox Opera等是 真实宽度=width+padding+border+margin IE5.X 真实宽度=width-padding-border-margin很明显,第一种下很完美的布局在第二种情况下后果是很凄惨的!div.content { width:400px; //这个是错误的width,所有浏览器都读到了 voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容 voice-family:inherit; width:300
2009-06-08
我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码。同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的WAP技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;针对某种浏览器的DHTML特效,
2009-06-08
作者:nobita 2005-5-8 9:39:31 ISSN: 1534-0295. 20 October 2003 – Issue No. 160 原文作者:Douglas Bowman 原文出自:A List Apart 在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果。根据CSS2.0当前的规定,每一个背景图像都需要各自的HTML元素。在许多情况下,典型的标记已经为一般的接口组件提供了多种元素以供我们使用。 标签导航栏就是其中的一个例子。过去,我们频繁的
2009-06-08
学习程序最好的方法是查看别人的原代码,学习CSS也一样,这篇文章介绍最人们的CSS网站收集站点,行话叫CSS陈列馆(showcase),[专录]网站设计师必看,必收藏,毕学习 http://www.csszengarden.com/ CSS禅意花园是最富盛名的CSS设计陈列馆,Dave Shea在创办之初是为了让网页设计师通过CSS样式表针对同一个Html文件的设计不同的样式,却没想到这个项目成为了当今网页设计顶尖高手展现无穷创意的舞台,看看禅意花园的 http://www.cssvault.com/ Cssvault
2009-06-08
1.背景图填充这是使用最广泛的一种做法,无hacks,推荐使用。2.采用脚本控制列的高度(一)需要事先知道哪列的高度,以此为基准用脚本控制。document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight+"px"上面的代码是以sideright的基准高度来控制sideleft的高度。代码简单,但比较被动3.采用脚本控制列的高度(二)不需要事先知道哪列的高度,脚本自动判断。代码较复杂,有点延时4.采用负的外边界和内补
2009-06-08
最近写了一篇关于X-SPACE 个人空间模板制作的教程,有些繁琐,估计写完后也没多少网友能真正学会并灵活实用,标准页面的制作对于业内人士来说也要有一段适应时间,更不用说普通用户了,真希望程序开发商们在以后的完善过程中能更多地为大众考虑,毕竟大众是主体。试探地做了个简单方案,看似简单,里面要考虑的使用中的变化还是很多的,幸好X-SPACE 的CSS可以相互补充使用,要修改的部分可以单独分离出来调整,不用把全部的样式读懂,每个人习惯不同,全部读
2009-06-08
DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。 其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。 要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。 XHTML 1.0 提供了三种DTD声明可供选择:过渡的(Transitional):要求非常宽
2009-06-08
SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使Google等搜索引擎更容易搜索网站的内容,并且让网站的各个网页在GOOGLE等搜索引擎中获得较高的评分,从而获得较好的排名。DIV+CSS网页布局对SEO有哪些影响呢? 代码精简 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就
2009-06-08
一、首先是原创,是内容的提供,让用户成为网站的主人而不是网站的客户; (一)原创网站:不以复制和粘贴为网站内容的基本获取手段,只在前期和特定栏目及特定时间发布部分内容,但也需依照事前确定的网站规则进行。 (二)资源网站:我们不以服务或者具体产品为主要模式,而是以资源供应商和资源生产组织者(非集成)的身份开展合作、运营相关的推广和收益拓展等,其中内容是资源的一部分。 (三)用户网站:网站的宗旨是办用户自己的网站(非
2009-06-08
很长一段时间,我都使用12px作为网站的主要字体大小。10px太小,眼睛很容易疲劳,14px虽容易看清,却破坏页面的美感。唯独12px在审美和视力方面都恰到好处。谁对我的网站字体大小有意见? 很多视力不佳的人是最先抱怨的。这使我们意识到12px,其实只是让我觉得很不错而已,而对于那些视力下降明显的中年以上的人来讲,几乎等于10px对于我的感觉。 于是我告诉他,在“查看”里调整“文字大小”就可以了。但是却发现这是徒劳的。在Firefox能轻易调整的
2009-06-08
Div即父容器不根据内容自适应高度,我们看下面的代码:<div id="main"> <div id="content"></div> </div> 当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。 我们可以通过三种方法来解决这个问题。 一,增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。<div id="main"> <div id="content"></div> <div style
DIV CSS设计时IE6、IE7、FF 与兼容性有关的特性
2009-06-08
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7、FF 共用 height: 100px !important; 一、CSS 兼容 以下两种方法几乎能解决现今所有兼容. 1, !important (不是很推荐,用下面的一种感觉最安全)
2009-06-08
基本HTML代码<!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> <title>Div Float Sample</title> <style type="text/css"> div { margin:3px; } .d1 { width:250px; min-height:20px; border:1px solid #00cc00; } .d2 { width:130px; min-height:40px; border:1px solid #0000cc; } .d3 { wid
2009-06-08
meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中,meta 标签的用处很多。meta 的属性有两种:name和http-equiv。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键词),所以应该给每页加一个meta值。比较常用的有以下几
2009-06-08
有网友和我提到一个Bug,他说他的编辑框变形了。后来我看了他的代码发现编辑框没有自动换行。被文章中的英文撑开了。 于是我告诉他,让他在skin的CSS里加上 word-break: break-all; 问题解决了。这个问题只有IE才有,我在FF下测试,FF可以自己加滚动条,这样也不影响效果。 建议大家做Skin时,记得加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题。 以下引用word-break的说明, 注意word-break 是IE5+专有属性语法:word-break
2009-06-08
word-wrap: normal Default. Content exceeds the boundaries of its container. break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。word-break: normal Default. Allows line breaking within words. 好像是只对Asian text起作用。 break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value