首页 > 开发 > CSS > 正文

Web标准实战CSS网页布局Google首页

2024-07-11 08:40:31
字体:
来源:转载
供稿:网友
  今天我们来学习用 Web 标准的方法来制作 Google 首页(中文)。Google 首页一直是用 table 布局的。我们把 Google 首页用 PrtScr 截屏,作为制作时的设计稿参考,并且不打开 Google 首页查看其源代码――就当它不存在。这样和真实项目工作比较接近。

第一部分、HTML 的构建(基于XHTML Transitional)

  从设计稿上看到的内容,去揣摩结构。因为整个页面内容较少,轻易理解,但也碰到了我们的第一个问题:是用 <p> 标签还是 <div>?各自代表着 paragraph 和 division,原则上说,这个页面上没有任何的段落存在,所以不应该用 <p>。但这里涉及到一个问题,抛开样式表显示的话,用 <p> 更加的清楚,因为默认 <div> 的 margin 和 padding 值都为零。好吧,用 <p> 还是用 <div> 是一个个人喜好问题,但是原则上应当用后者。在本例中也使用后者。开始找个称手的编辑器写 HTML :

示例代码 [www.CuoXIn.com]
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表