css+xhtml页面构建的心得总结

写了这么长时间的静态页面了,有必要来整理一下网页代码的书写心得,也许会对读者您有所帮助。我按照一般页面构成来说吧。
login:
头部一般会有登陆条。写用户名密码的地方,建议字和input分别用单独类的margin来控制。大家都知道文字和input在一起的时候用line-height并不会起什么效果。记得用户名和密码的文字用label标签。
logo:
这个可能有值得商榷的地方。有人喜欢把LOGO用H1来显示,有人喜欢背景显示LOGO而代码隐藏文字。具体对SEO的影响自己去体会吧,不妨都试试,不过LOGO上总要带链接的。
nav:
导行菜单一般都用LI来做,不过最好带上浮动float:left,而不仅仅是display:inline,这样控制起来可能更精确一点。至于象门户那样复杂的菜单就可以自由发挥,比如我之前写的一个菜单。.
search:
搜索的输入框和按纽用padding值来控制里面字的显示吧,用height和line-height的效果可能在各个浏览器里不尽相同。按纽如果都用系统默认的样式就别清除默认的border值,如果用图片就必须清除.line-height的值比height大点可能效果会好点,不过要溢出剪切哦。
banner:
这个其实没什么可说的,但是针对一行多个广告条,我还要补充一句,banner既可能是图片也可能是FLASH,写的时候套个DIV写个宽度和溢出剪切没坏处。
list:
列表是出现最多的。控制内容和边框的间距最好给ul用padding,并且加宽度和剪切。至于li就要用height和line-height来控制了,如果回行也要剪,保证标题内容代码的完整而又不破坏页面美观。前面加点那肯定是用背景图片来控制了,默认的项目符号真的不好用。
titleBar:
标题行一般就是单独居左出现,或者右面是more和tags。这个写法也是根据每个人习惯不同而有变化的。我最近试着标题用H3,more或tags用H4来写。以后关注一下效果如何。毕竟这样的话,在没有加载样式的情况下,某块内容的标题会突出显示。当然more和tags用span写也可以,这样看具体显示的内容而定了。
pictureWrap:
图文混排的表现形式比较多,语言描述也太麻烦就不说太多了。想说的就是图片配标题的时候,给标题加个class,定义一下宽高和行高,然后溢出剪切,这样标题太长也不会挤乱页面了。而且写动态程序的时候也不用去数截取多少个字了。毕竟,我们想留给读我们代码的爬虫一个完整的标题。
footer:
这个也没多少可说的,该怎么写就这么写,能用A标签的就不用li了。记得统计代码放在最后,而且最好给他一个dispaly:none的样式。

好了,就写这么多吧,虽然很多代码可能是需要重复敲打好多遍的,可是如何写出既让人又让机器读的舒服的代码,是我们需要逐步总结和研究的,而这更是我们努力的方向。

PS:以上纯粹是本人一个时期内的心得总结,如有不妥之处还请您不吝赐教,共同进步!
Tags: html 网页重构
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
网摘收藏:
相关日志:
评论: 1 | 引用: 0 | 查看次数: -
回复回复keelii[2009-12-04 09:05 PM | del]
经验之谈,很值得学习。得仔细看看了。
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您 注册帐号.