本文是在html5代码,内容系仿写百度,现在附上代码和效果图,仅供初学者学习参观

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.header{
height: 100px;
color: aqua;
text-align: right;
font-size: 13px;
line-height: 34px;
text-decoration-color: black;
}
.content{
height: 500px;
}
.footer{
height: 300px;
font-size: 13px;
}
.content,.footer{
text-align: center;
}
.ss{
height: 30px;
width: 500px;
}
.s1{
height: 34px;
width: 100px;
font-size: 15px;
}
.s2{
line-height: 30px;
}
.s3{
height: 130px;
}
.logo{
width: 260px;
}
.s4{
width: 100px;
}
body{
font-family: "微软雅黑","黑体";
color: black;
text-decoration: none;
text-decoration-line: none;
text-decoration: none;
}
div{
text-decoration: none;
}
p{
text-decoration: none;
}
</style>
</head>
<body>
<div class="header">
<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>
</div>
<div class="content">
<div><img src="百度logo.png" class="logo"> </div>
<div><span><input type="text" class="ss"><input type="submit" value="百度一下" class="s1"> </span> </div>
<div>
<div class="s3"></div>
<div class="s2"><img src="erweima.PNG" class="s4"></div>
<p>下载百度APP</p>
<p>有事搜一搜 没事看一看</p>
</div>
</div>
<div class="footer">
<p>
<a href="javascript;">把百度设为主页</a>
<a href="javascript;">关于百度</a>
<a href="javascript;">About Baidu</a>
<a href="javascript;">百度推广</a>
</p>
<p>
<a href="#">©2019 Baidu</a>
<a href="#">使用百度前必读</a>
<a href="#">意见反馈</a>
京ICP证030173号
<a href="#">京公网安备11000002000001号</a>
</p>
</div>
</body>
</html>宗波尘客-宗九尘博客,愿与您分享web前端开发!