学习css布局的一些思路.docx
版权申诉
196 浏览量
2022-11-28
23:18:44
上传
评论
收藏 18KB DOCX 举报
学习 CSS 布局的一些思路
你正在学习 CSS 布局吗？是不是还不能完全掌握纯 CSS 布局？通常有两种情况阻碍你的学习：
第一种可能是你还没有理解 CSS 处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考
虑内容的语义和结构，然后再针对语义、结构添加 CSS。这篇文章将告诉你应该怎样把 HTML 结构
化。
另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)
束手无策，不知道该转换成对应的什么 CSS 语句。当你解决了第一种问题，知道了如何结构化你的
HTML，我再给出一个列表，详细列出原来的表现属性用什么 CSS 来代替。
结构化 HTML
我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后
我们用 Photoshop 或者 Fireworks 画出来、切割成小图。最后再通过编辑 HTML 将所有设计还原
表现在页面上。
如果你希望你的 HTML 页面用 CSS 布局(是 CSS-friendly 的)，你需要回头重来，先不考虑“外观”，
要先思考你的页面内容的语义和结构。
外观并不是最重要的。一个结构良好的 HTML 页面可以以任何外观表现出来，CSS Zen Garden是
一个典型的例子。CSS Zen Garden 帮助我们最终认识到 CSS 的强大力量。
HTML 不仅仅只在电脑屏幕上阅读。你用 photoshop 精心设计的画面可能不能显示在 PDA、移动电
话和屏幕阅读机上。但是一个结构良好的 HTML 页面可以通过 CSS 的不同定义，显示在任何地方，
任何网络设备上。
开始思考
首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以
及每块内容服务的目的，然后再根据这些内容目的建立起相应的 HTML 结构。
如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：
标志和站点名称
主页面内容
站点导航(主菜单)
子菜单
搜索框
功能区(例如购物车、收银台)
页脚(版权和有关法律声明)
我们通常采用 DIV 元素来将这些结构定义出来，类似这样：
评论0
最新资源