完成了三次作业真的一次比一次难。本来以为这个很简单的,是我太天真了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度一下,你就知道</title>
<style type="text/css">
.foot {
font-size: 15px;
}
.head_left {
position: absolute;
top: 20px;
text-align: left;
left: 15px;
text-decoration: none;
}
.head_right {
position: absolute;
top: 20px;
text-align: right;
right: 15px;
text-decoration: none;
}
.head a {
text-decoration: none;
color: black;
cursor: pointer;
}
.head a:hover {
color: rgb(110, 110, 231);
}
.body {
text-align: center;
position: relative;
}
img {
height: 130px;
margin-top: 113px;
margin-right: 16px;
cursor: pointer;
}
.text {
width: 500px;
height: 40px;
position: absolute;
margin: 15px -335px;
border-radius: 10px 0 0 10px;
border-color: rgb(0, 102, 255);
}
.submit {
width: 110px;
height: 40px;
color: white;
background-color: rgb(55, 97, 224);
cursor: pointer;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 262px 923px;
border-radius: 0 10px 10px 0;
font-size: 17px;
}
.submit:hover {
background-color: rgb(0, 90, 205);
}
.foot_left {
position: absolute;
bottom: 15px;
left: 25px;
}
.foot_right {
position: absolute;
bottom: 20px;
right: 20px;
color: gray;
}
.foot a {
color: gray;
text-decoration: 30px;
}
.foot a:hover {
color: black;
}
</style>
</head>
<body>
<div class="head_left">
<a href="www.baidu.com" target="_blank">新闻</a>
<a href="www.baidu.com" target="_blank">hao123</a>
<a href="www.baidu.com" target="_blank">地图</a>
<a href="www.baidu.com" target="_blank">视频</a>
<a href="www.baidu.com" target="_blank">贴吧</a>
<a href="www.baidu.com" target="_blank">学术</a>
<a href="www.baidu.com" target="_blank">更多</a>
</div>
<div class="head_right">
<a href="www.baidu.com"target="_blank">设置</a>
<a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5"target="_blank">登录</a>
</div>
<div class="body">
<img src="baidu.png" alt="baidu" title="点击一下,了解更多">
<form action="http://www.baidu.com">
<input type="text" class="text">
<input type="submit" value="百度一下" class="submit">
</form>
</div>
<div class="foot">
<div class="foot_left">
<a href="https://www.baidu.com/cache/setindex/index.html" target="_blank">设为首页</a>
<a href="https://home.baidu.com/" target="_blank">关于百度</a>
<a href="http://ir.baidu.com/" target="_blank">About Baidu</a>
<a href="https://www.baidu.com/duty" target="_blank">使用百度前必读</a>
<a href="https://help.baidu.com/newadd?prod_id=1&category=4" target="_blank">意见反馈</a>
<a href="https://help.baidu.com/" target="_blank">帮助中心</a>
</div>
<div class="foot_right">
<span>©2020 Baidu</span>
<span>京ICP证030173号</span>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a>
<span>(京)-经营性-2017-0020</span>
</div>
</div>
</body>
</html>
效果图