阅读文章(首页/网页制作/web标准/)

Web 标准实践——Google 的首页

[日期：2007-01-17]

来源：作者：

[字体：大中小]

第二部分、样式表

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

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 前台的热门话题，本文简单起见，直接使用绝对单位。

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

#login{ /*这是头部的登陆状态*/
text-align: right;
}
#stype{ /*这就是上文提到的那 5 项搜索类型*/
margin-bottom: 4px;
}
#stype span{ /*此处增加了无意义的 span*/
padding: 0 6px;
}

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

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

#search{ /*这是搜索表单*/
margin: 0 auto;
width: 400px;
position: relative;
}
#more{
width: 4em; /*4个汉字宽，这样可以形成类似列表的效果*/
position: absolute;
top: 0;
right: -4.5em;
}

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

#ft{
margin: 54px auto 16px;
}

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML XMLns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8" />
<title>Google</title>
<style type="text/CSS">
body{
background: #FFF;
color: #000;
font-family: Arial, sans-serif;
font-size: 13px;
text-align: center;
margin-top: 3px;
}
a:link{
color: #00C;
}
a:visited{
color: #551a8b;
}
#login{
text-align: right;
}
#stype{
margin-bottom: 4px;
}
#stype span{
padding: 0 6px;
}
#search{
margin: 0 auto;
width: 400px;
position: relative;
}
#more{
width: 4em;
position: absolute;
top: 0;
right: -4.5em;
}
#ft{
margin: 54px auto 16px;
}
</style>
</head>

<body>
<div style="text-align: right"><strong>junchenwu@gmail.com</strong> | <a href="ig">个性化主页</a> | <a href="MyAccount">我的帐户</a> | <a href="LOGOut">退出</a></div>
<div style="margin: 4px auto 19px;"><img src="upload/070117120083762.gif" alt="Google" /></div>

<form id="search" action="" method="post">
<div><input type="text" size="55" title="Google 搜索" /></div>
<div><button type="submit">Google 搜索</button><button>手气不错</button></div>
<div style="margin-top: 6px;"><label><input type="radio" name="t" checked="checked" />搜索所有网页</label><label><input type="radio" name="t" />中文网页</label><label><input type="radio" name="t" />简体中文网页</label></div>
<div id="more"><a href="advanced_search">高级搜索</a> <a href="pref">使用偏好</a> <a href="lang">语言工具</a></div>
</form>

<div id="ft"><a href="ad">广告计划</a> - <a href="all">Google 大全</a> - <a href="en">Google.com in English</a></div>
<div>©2007 Google</div>
</body>
</HTML>

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

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

上一页 [1] [2] [3] 下一页   

阅读：次
录入：blue1000

【评论】【推荐】【打印】

上一篇：Web 的未来：XHTML 2.0
下一篇：

发表评论