一个简单的百度页面
Posted 淇水清云
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个简单的百度页面相关的知识，希望对你有一定的参考价值。
<style>
.foot
font-size: 13px;
.zuoshang
position: absolute;
top: 20px;
left: 17px;
text-decoration: none;
.youshang
position: absolute;
top: 20px;
right: 30px;
.head a
text-decoration: none;
color: black;
cursor: pointer;
< !--xiao shou-->
.head a:hover
color: rgb(110, 110, 231);
.body
text-align: center;
position: relative;
img
height: 130px;
margin-top: 113px;
margin-right: 13px;
cursor: pointer;
.text
width: 545px;
height: 40px;
position: absolute;
margin: 15px -335px;
border-radius: 10px 0 0 10px;
border-color: rgb(0, 102, 255);
.submit
width: 108px;
height: 44px;
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, 89, 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>上面是css部分
下面是完整源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度一下，你就知道</title>
<style>
.foot
font-size: 13px;
.zuoshang
position: absolute;
top: 20px;
left: 17px;
text-decoration: none;
.youshang
position: absolute;
top: 20px;
right: 30px;
.head a
text-decoration: none;
color: black;
cursor: pointer;
< !--xiao shou-->
.head a:hover
color: rgb(110, 110, 231);
.body
text-align: center;
position: relative;
img
height: 130px;
margin-top: 113px;
margin-right: 13px;
cursor: pointer;
.text
width: 545px;
height: 40px;
position: absolute;
margin: 15px -335px;
border-radius: 10px 0 0 10px;
border-color: rgb(0, 102, 255);
.submit
width: 108px;
height: 44px;
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, 89, 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="zuoshang">
<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="youshang">
</div>
<div class="body">
<img src="baidu2.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="" target="_blank">设为首页</a>
<a href="" target="_blank">关于百度</a>
<a href="" target="_blank">About Baidu</a>
<a href="" target="_blank">百度营销</a>
<a href="" target="_blank">使用百度前必读</a>
<a href="" target="_blank">意见反馈</a>
<a href="" target="_blank">帮助中心</a>
</div>
<div class="foot_right">
<span>©2020 Baidu</span>
<span>(京)-经营性-2017-0020</span>
<a href="" target="_blank">京公网安备11000002000001号</a>
<span>京ICP证030173号</span>
</div>
</div>
</body>
</html>下面是效果图
水平有限，仅供参考
以上是关于一个简单的百度页面的主要内容，如果未能解决你的问题，请参考以下文章