DIV+CSS轻松实现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=gb2312" />
<title>Google</title>
<style type="text/css">
body{
    background: #FFF;
    color: #000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:0.8em;
    text-align: center;
    margin:2px 3px auto;
}
a:link{
    color: #00C;
}
a:visited{
    color: #551a8b;
}
#logo{
    margin:0 auto;
}

#login{
    text-align: right;
}
#stype{
    margin-bottom: 4px;
}
#stype span{
    padding: 6px 6px;
    
}
#stype div{
    color:red;
    font-size:0.9em;
    *font-size:0.7em;
    line-height:16px;
    position:absolute;
    left:556px;
    *left:550px;
    top:128px;
}
#search{
    margin: 0 auto;
    width: 400px;
    position: relative;
}
#more{
    width: 5em;
    position: absolute;
    top: 0;
    right: -5em;
}
#searchmg{
    margin:6px auto;
}
#footer{
    margin: 50px 0 16px 0;
}
</style>
</head>

<body>
<div id="login"><strong>gixxue@gmail.com</strong> | <a href="ig">个性化主页</a> | <a href="#">我的帐户</a> | <a href="#">退出</a></div>
<div id="logo"><img src=" http://www.google.com/intl/zh-CN_ALL/images/logo.gif" alt="Google" /></div>

<div id="stype"><span><strong>网页</strong></span> <span><a href="#">图片</a></span> <span><a href="#">资讯</a></span> <span><a href="#">地图</a><div>新!</div></span> <span><a href="#">  <strong>更多 »</strong></a></span></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 id="searchmg"><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="#">高级搜索</a> <a href="#">使用偏好</a> <a href="#">语言工具</a></div>
</form>

<div id="footer"><a href="#">广告计划</a> - <a href="#">Google 大全</a> - <a href="#">Google.com in English</a></div>
<div>©2007 Google</div>
</body>
</html>

 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值