代码HTML:
<!DOCTYPE html>
<html>
<head>
<title>百度一下,你就知道</title>
<meta charset="UTF-8" />
<meta name="keywords" content="关键字">
<meta name="description" content="描述">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="baidu.css">
</head>
<body>
<div class="wrpper">
<header>
<nav>
<a href="http://news.baidu.com/">新闻</a>
<a href="http://www.hao123.com/">hao123</a>
<a href="http://map.baidu.com/">地图</a>
<a href="http://v.baidu.com/">视频</a>
<a href="http://tieba.baidu.com/">贴吧</a>
<a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F">登录</a>
<a href="javascript:;">设置</a>
<a href="javascript:;">更多产品</a>
</nav>
</header>
<div class="content">
<img src="img/bd_logo1.png" alt="百度一下">
<form action="https://www.baidu.com/s" method="get" target="_blank">
<input type="text" name="wd">
<button type="submit">百度一下</button>
</form>
</div>
<footer>
<p>
<a href="https://www.baidu.com/cache/sethelp/help.html">把百度设为首页</a>
<a href="http://home.baidu.com/">关于百度</a>
<a href="http://ir.baidu.com/">About Baidu</a>
</p>
<p>
<span>©2016 Baidu</span>
<!-- 文本用span标签,方便修改 -->
<a href="http://www.baidu.com/duty/">使用百度前必读</a>
<a href="http://jianyi.baidu.com/">意见反馈</a>
<span>京ICP证030173号</span>
</p>
</footer>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------
CSS:
body{
font:12px arial;
}
header{
overflow: hidden;
}
header nav{
width: 400px;
float:right;
}
header nav a{
margin-left: 15px;
}
/*主体部分*/
.content{
text-align: center;
}
.content img{
width:270px;
height: 129px;
}
.content input{
width: 450px;
height:34px;
}
.content button{
width:100px;
height: 38px; 有默认的2px的边框
}
footer{
padding-top:10px;
}
footer p{
text-align: center;
}