【转】DIV CSS网页布局中易出现的问题

这是我在别人博客里面看到的,感觉比较有用就转了过来。以前写内嵌的时候,直接就写<style=“padding:30px 0 10px 20px;”>根本就没有写过< style type=“padding:30px 0 10px 20px;”>.

也许有很多东西来自于不经意间

DIV CSS网页布局中易出现的问题.应用Div+CSS网页布局,制作符合web标准的网站,容易出现的一些问题。

一.CSS校验的问题

我们设计的网页,都希望符合XHTML标准,CSS通过W3C的校验。有些未通过CSS2.0校验,主要校验错误都是:“Line : 0 font-family: 建议你指定一个种类族科作为最后的选择”
W3C建议字体定义的时候,最后以一个类别的字体结束,而不要以单独某个字体结束。例如"sans-serif"就可以保证在不同操作系统下,网页字体都能被显示。

虽然多数人都在body标签上定义了"sans-serif",但在其它的id或class中再次定义字体时漏了sans-serif,被认为校验不通过。这个错误不是很严重,只要稍加注意就可以避免。

二.CSS的书写建议

给CSS文件加注释。注释会为你今后的维护带来方便,建议尽可能给CSS文件加注释,不要担心增加少量的字节。 尽量简写CSS语法。比如颜色值"#FFFFFF"可以简写成"#FFF";"padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px"可以简写为"padding:30px 0 10px 20px;"。在定义技巧上有更多的节省技巧,随着对CSS应用的熟练,你会不断发现更好的办法。

三.XHTML校验的问题

往往大家对CSS的校验比较注意,但在XHTML符合标准方面有点忽视,出现很多低级错误。主要问题罗列如下:

◎target="_blank",这个语法在HTML4.0里是正确的,在XHTML1.0里是不允许使用的。解决的办法之一是写成target="new",另外一个办法是用js处理所有的target;
◎样式表最好不要内嵌,将样式表文件独立出来易于维护。如果内嵌<style>一定要写成<style type="text/css">,其中的type不能忽略,否则XHTML无法判断你的style作用在什么方面。
◎<br>必须写成<br />,XHTML要求所有的标签必须关闭,不成对的标签直接在后面加" /"。
◎重复使用同一ID。一个ID在XHTML中只能使用1次,如果需要多次引用样式,应该使用class。
◎Flash的嵌入方法错误。<embed>最早是Netscape的私有标签,即使后来为IE所支持,但始终没有被W3C承认,在HTML4.0没有<embed>这个标签。W3C主张的是采用<object>标签。为了解决不同浏览器的兼容,有一个变通的解决方法是2个标签都采用。

完整的示例代码如下(flash背景为透明):

<object
classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
width="300" height="100">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="SRC" value="test.swf">
<embed src="test.swf" wmode="transparent" quality="high"
pluginspage="Flash">http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" width="300" height="100">
</embed>
</object>

但直接写在XHTML中依然不可以,我们现在只能通过把上面代码写在flash.js文件里,然后再调用来骗过校验。

<script type="text/javascript" src="flash.js"></script>

关于flash是否符合标准,是一个存在争议的问题。

◎类似id=header class=title代码都应该写成id="header" class="title"。给属性值加引号是最XHTML基本的语法规则。

四.兼容的问题

有些网站在IE6.0、Mozilla Firefox1.0、Opera 7.12中浏览发生变形和错位。
在IE里居中,但Mozilla里没有。在IE中设置body {TEXT-ALIGN: center;}就已经可以居中了,但在Mozilla中必须对需要居中的层再加入以下样式设置:MARGIN-RIGHT: auto;MARGIN-LEFT: auto;

超出宽度。在Mozilla里看正常的页面,在IE里因为超出宽度而变形,并排的层移到下面去了。这个情况是因为IE和Mozilla对盒模型解释不同造成的,有很多解决办法,比如"!important"方法。

web标准和CSS布局已经被越来越多的设计师了解和掌握。CSS布局经过一段时间的消化理解和应用,会有更多技术美观兼顾的网页涌现。

【转】2010网页设计趋势

纯粹主义者会说,伟大的设计是永恒的。是的,在一个理想世界中,我们可以忽视趋势与流行。

但是实事求是地讲,跟踪和融入设计的趋势是很有价值的,尤其是网站方面。让我们面对现实:网络时刻在迅速变化,而不像其他媒体,网站设计的趋势不再仅仅受美学驱动。技术是不断变化的,媒介的能力和手段都在随之而发生巨大变化。2010年,我们看到设计师在网页设计方面不断推陈出新,形成了以下明显的趋势

CSS3 技术

不确定你可以利用CSS3吗?再想想。网络先锋如Andy Clarke 和 Jeremy Keith一直提倡网页设计要“逐步加强”。

逐步增强是指在网站设计师时要兼顾到旧版浏览器的可用性,而“增强”则是针对喜欢最新技术的用户。

在这样的设计阵营,你利用可以尽情利用CSS3属性的优势,如圆角,边框背景和文本框阴影。新版浏览器用户会看到一个很好的版本,并且对旧版本用户( IE6同学,我就不每次都点名了)将看到较为基本的版本。

CSS3 动画

在网络上动画经历了很多阶段。起初,我们只能用GIF动画图片。然后,我们又几乎限于Flash。现在,我们可以选择的有Flash,Silverlight,以及GIF,JavaScript和甚至乎CSS3。CSS3更轻量,更易用,可创造令人难忘的微妙的动画。

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

圆角

在2005年和2006年的Web 2.0风格,使得圆角大受欢迎,恼人的问题是,在当时要实现这些可不容易。有没有固定可行的方法来建立真正的圆角。退而求其次的,大多都是利用CSS,JavaScript和图像来模拟。

现在CSS3允许浏览器直接生成圆角,不仅创建轻松,而且更有效率,因为用户不必下载额外的图片或JavaScript文件。

2010年,设计师正越来越多地利用浏览器的这些新功能优势。

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

图框和文本阴影

在网络的早期,利用阴影创造一种立体感是早已有之(甚至有时是用过头了)。但其实并不总是那么好搞的,要给文本添加阴影,你得使用的图片,从而增加加载时间,并且维护更加困难。框架阴影需要一些图片和CSS技巧,如“滑动门”。

CSS3具有阴影高度可定制的能力,这对于创新影响十分巨大,不仅包括阴影,还有内阴影。有创意设计师已经开始使用这些CSS3效果,模拟浮雕和压印的效果。

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

RGBa和半透明

多年来,使用不透明性和透明度,在网络上技术上是不可能的。你有三种选择:使用平面图像模拟的透明度,使用不能跨浏览器兼容的PNG格式,或者去折腾CSS基本的透明选择器和滤镜。

CSS3使得设计师在使用RGBa不透明属性时,更加稳定和自由。你可以在很多方面利用半透明的优点,其中之一就是使用半透明的颜色叠加到复杂背景时起到特别作用。之前,这种效果如果没有使用PNG是不切实际,也是不可能达到的。

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

手机兼容设计

移动网络让成千上万的用户在排队等候(无事可做)时能够检查他们的银行帐户,在地铁里可以查看最新分数,在开车时更新自己的Twitter的情况(这是一个危险的习惯?),移动网络正在茁壮成长。

据我们所知,很多公司都都在考虑他们的网站是否要加入移动网络,如果是的话又会怎么样。而创新公司则已经投入巨资在开发高效的用户友好的移动版本网站。

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

创新

社交媒体使用率的爆炸性增长证明,人们对连接和共享东西总是热情有加的。

在设计领域,我们已经看浏览和分享别人作品的趋势正在增长。作为设计师,现在我们感受着别人创造力的冲击。这不仅提高了设计质量的标准,还鼓励了共享精神,也促进了创造力和创新文化理念。

清新的插画

如果你像我一样,看着迪斯尼电影长大,你会欣赏动画里面每一帧的效果。我们早已淡忘了墨水和马克笔画插画的日子,工具的演变产生了一些非常有创意的方法去实现设计。

很多设计师正在学习使用光滑,干爽,清晰的插图创建一个独特的感觉,这不是摄影或简单的剪贴画可以达到的。结果是出现了很多美丽动人富有吸引力的专业插画设计。

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

纹理背景

纹理图案背景在网络上没有什么新鲜的。但是,最近几个月这种技术已经出现了有趣的变化。我指的是“微型纹理”, 是微妙的,几乎不明显的背景纹理。

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

缩略图

你可能会说,“缩略图从网络出世那天早就有了。怎样么会是趋势呢?”是的,它们一直被使用,但普遍很简单。有一个缩略图,点击一下就可以看得更大的图片。需要的功能就是这样,不过很无聊。

在最近几个月,设计师们开始探讨,“怎样才能使缩略图更精彩?”这些探讨导致了缩略图在智能和可用性方面大大增强。

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

水彩效果

随着网络的发展,我们看到越来越多的设计师正从各种媒体来源获取灵感。毫不奇怪,艺术就是来源于此。

最近出现风格之一是模拟水彩。这种轻柔优雅风格看起来总是那么清晰和平静。

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

手写

手写字体和草稿字体一直滥用得很厉害。基于这个原因,许多设计师避开这两种类型,出于厌恶或者因为看起来很业余的感觉。不过最近,许多设计师都发现,如果使用得当,手写风格可以传达手工艺和策划的意识。在结合上下文环境使用,会是一个功能强大的表达方式。

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

社交媒体

现在人们在Facebook和Google上花更多的时间,设计师正用创新的方法来把社交媒体整合到网站上。

有些设计师竟然在社交媒体网络上发布内容,然后利用他们的网站聚合。

可以很有把握的说随着2010年的进一步发展,我们将看到更多的设计师创造性地整合社交媒体到网站,以更好的吸引用户。

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

固定元素

现在,浏览器可以更好地支持元素position: fixed属性,我们看到这个属性的一些巧用。

很多情况下,固定的元素(如固定不动的导航条)可以为目标客户更好服务,网站也更加实用。

固定元素令人难忘且增强用户体验,有无数的创意用途,我们将会看到设计师利用这些优点。

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

2010网页设计趋势 MazingTech.Com翻译

那些流行趋势是你在追随的?还有其他什么样的新兴的趋势?欢迎讨论