鸿 网 互 联 www.68idc.cn

当前位置 : 服务器租用 > 网站制作教程 > css > >

用DIV CSS网页布局之Google首页实现

来源:互联网 作者:佚名 时间:2013-04-28 15:50
  今天我们来学习用 Web 标准的方法来制作 Google 首页(中文)。Google 首页一直是用 table 布局的。我们把 Google 首页用 PrtScr 截屏,作为制作时的设计稿参考,并且不打开 Google 首页查看其源代码——就当它不存在。这样和真实项目工作比较接近。
第一部分、HTML 的构建(基于XHTML Transitional)
  从设计稿上看到的内容,去揣摩结构。因为整个页面内容较少,容易理解,但也碰到了我们的第一个问题:是用 <p> 标签还是 <div>?各自代表着 paragraph 和 division,原则上说,这个页面上没有任何的段落存在,所以不应该用 <p>。但这里涉及到一个问题,抛开样式表显示的话,用 <p> 更加的清晰,因为默认 <div> 的 margin 和 padding 值都为零。好吧,用 <p> 还是用 <div> 是一个个人喜好问题,但是原则上应当用后者。在本例中也使用后者。开始找个称手的编辑器写 HTML :
<div><strong>junchenwu@gmail.com</strong> | <a href="ig">个性化主页</a> | <a href="MyAccount">我的帐户</a> | <a href="logout">退出</a></div> 
<div><img src="http://www.google.com/intl/zh-CN_ALL/images/logo.gif" alt="Google" /></div>
  这包括头部的登陆状态和中间的大 Logo。我们先不增加任何样式 id 和 class。
  然后我们看到中间有“网页 图片 资讯 论坛 更多 »”这些链接。怎么做?一般就两种写法,看个人喜好。把这几个链接写一行里面或者写在一个 ul 里面,如下:
<div><strong>网页</strong> <a href="pic">图片</a> <a href="info">资讯</a> <a href="group">论坛</a> <a href="more"><strong>更多 »</strong></a></div> 
或者:
<ul> 
<li><strong>网页</strong></li> 
第 1 2 3 4 5 页
网友评论
<