源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下,你就知道</title>
<style>
body{
height:100%;
width:100%;
}
a{
color: #000000;
font-size: 12px;
}
a:hover {
color: blue;
}
.top{
text-align: right;
margin-top: 20px;
}
.st{
background: white;
width: 1520px;
height: 550px;
text-align: center;
}
.img{
width: 300px;
height: 150px;
}
.img2{
width: 36px;
height: 28px;
}
.zp{
background: white;
width: 38px;
height: 30px;
position: absolute;
left: 930px;
top: 202px;
}
.input{
width: 500px;
height: 30px;
}
button{
background: cornflowerblue;
}
.button2{
width: 90px;
height:38px;
font-size: 18px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="top">
<a href="#" >新闻</a>
<a href="#"> hao123</a>
<a href="#"> 地图</a>
<a href="#"> 视频</a>
<a href="#"> 贴吧</a>
<a href="#"> 学术</a>
<a href="#"> 登录</a>
<a href="#"> 设置</a>
<button >更多产品</button>
</div>
<div class="st">
<img class="img" src="https://www.baidu.com/img/bd_logo1.png" >
<form action="https://www.baidu.com/s" name="search">
<div>
<input class="input" type="text" >
<button class="button2">百度一下</button>
</div>
</form>
</div>
<div class="zp">
<img class="img2" src="img/sousuo.png" >
</div>
</body>
</html>
运行效果: