论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

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

文章类别:div+css布局 | 发表日期:2008-9-26 11:27:55

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

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

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<div><strong>junchenwu@gmail.com</strong> | <a href=\"ig\">个性化主页</a> | <a href=\"MyAccount\">我的帐户</a> | <a href=\"logout\">退出</a></div>
<div><img src="../img/divcss/200892611251984177804.gif" alt=\"Google\" /></div>

  这包括头部的登陆状态和中间的大 Logo。我们先不增加任何样式 id 和 class。

  然后我们看到中间有“网页 图片 资讯 论坛 更多 ?”这些链接。怎么做?一般就两种写法,看个人喜好。把这几个链接写一行里面或者写在一个 ul 里面,如下:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<div><strong>网页</strong> <a href=\"pic\">图片</a> <a href=\"info\">资讯</a> <a href=\"group\">论坛</a> <a href=\"more\"><strong>更多 ?</strong></a></div>

或者:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<ul>
<li><strong>网页</strong></li>
<li><a href=\"pic\">图片</a></li>
<li><a href=\"info\">资讯</a></li>
<li><a href=\"group\">论坛</a></li>
<li><a href=\"more\"><strong>更多 ?</strong></a></li>
</ul>

  这两种写法各有什么优缺点呢?这里一共有 5 项,第一项是加粗的文字,其余 4 项是链接。假如使用第一种写法对于样式的控制就显得力不从心,比如控制这 5 项之间的间距;假如使用第二种写法,那么在脱离样式的情况下,分了 5 行显示。这里我把缺点都写出来,根据本例情况,我们还是选择第一种写法,这样要控制样式就需要在每一项前后增加无意义的 <span>。

  我们先继续往下写,碰到了搜索表单以及边上的高级搜索等三个链接。先写哪一个?看上去是平级的啊。这个时候最好问一下产品设计师的本意。我们在这里先写表单。如下:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<form action=\"\" method=\"post\">
<div><input type=\"text\" size=\"55\" title=\"Google 搜索\" /></div>
<div><button type=\"submit\">Google 搜索</button><button>手气不错</button></div>
<div><label><input type=\"radio\" name=\"t\" checked=\"checked\" /> 搜索所有网页</label> <label><input type=\"radio\" name=\"t\" /> 中文网页</label> <label><input type=\"radio\" name=\"t\" /> 简体中文网页</label></div>
</form>

  注重给每一项 radio button 添加一个 label,具体的效果大家可以自行测试一下。另外这里采用了 label 包含的写法,也可以写成 <label for=\"foo\"> 针对 id 为 foo 的 label </label>。怎么写这也是看个人喜好的。

  接下来是高级搜索等三个链接,以及底部的版权信息等,代码如下:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<div><a href=\"advanced_search\">高级搜索</a> <a href=\"pref\">使用偏好</a> <a href=\"lang\">语言工具</a></div>
<div><a href=\"ad\">广告计划</a> - <a href=\"all\">Google 大全</a> - <a href=\"en\">Google.com in English</a></div>
<div>?2007 Google</div>

  到这里我们基本完成了 Google 首页的 HTML 构建,这里是样例文件,待会儿我们还会再修整一部分代码。

第二部分、样式表

  我们采用直接把样式写在 head 里面的方式,较为简单也方便演示。首先我们看到除了头部的登陆状态,其余部分都是居中对齐的,并且发现字体是 Arial,默认文字大小为 13 px。我们在 head 区域增加以下样式:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
body{
font-family: Arial, sans-serif;
font-size: 13px;
text-align: center;
margin-top: 3px;
}
a:link{
color: #00C;
}
a:visited{
color: #551a8b;
}

  这里使用了 px 这个绝对单位。关于绝对单位和相对单位,网上相关文章很多,并且也一直是 Web 前台的热门话题,本文简单起见,直接使用绝对单位。

  然后我们逐步增加其他样式:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#login{ /*这是头部的登陆状态*/
text-align: right;
}
#stype{ /*这就是上文提到的那 5 项搜索类型*/
margin-bottom: 4px;
}
#stype span{ /*此处增加了无意义的 span*/
padding: 0 6px;
}

  之后的搜索表单,我们碰到了样式化的难点,首先作为搜索的 size 为 55 的输入框从布局上来说是绝对居中的,而右侧高级搜索那三项的宽度加上输入框在内并不是绝对居中。也就是说视觉上,高级搜索那三项偏右了。如下图所示:


  这里我们使用绝对定位的方法来处理它(在 HTML 中将高级搜索这三项的内容放入 form 之内):

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#search{ /*这是搜索表单*/
margin: 0 auto;
width: 400px;
position: relative;
}
#more{
width: 4em; /*4个汉字宽,这样可以形成类似列表的效果*/
position: absolute;
top: 0;
right: -4.5em;
}

  最后我们加上底部链接和版权信息部分的样式:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#ft{
margin: 54px auto 16px;
}

  在浏览器里面预览并且微调一下各个数值,这样就完成了 Google 首页的制作。最终效果及源文件:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  这在 Firefox 1.5 下测试,与 Google 首页没有任何像素的差异。在 IE 下会有一些像素上的差异,这就是各个浏览器的兼容性问题,留给大家自行处理了。本系列以后会有专门的文章讨论这些问题。

  本例的最终代码还能够有进一步的优化,做法每个人习惯不同,希望本文能够帮助到大家。

怿飞补充:
  1、对于“?”使用代码“&raquo;”来代替;
  2、label写法推荐写成 <label for=\"foo\"> 针对 id 为 foo 的 label </label>。因为<label><input />xxxxx</label>只有在FF等对标准支持很好的浏览器里才显示正常,在IE6中无法显示正常的效果。
  3、对于strong,需要重点显示出来的内容,可以使用strong,而对于布局里需要区分主次点的部分,就写到样式里,比如分类的一级分类为粗体,二级分类为一般字体……,其实strong对于搜索引擎优化也有一定的作用,搜索引擎会优先strong的内容,而写在样式里就不会有这样的效果!
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058