Home > Article > Web Front-end > HTML imitates Baidu homepage
HTML imitates Baidu homepage
- 不言Original
- 2018-07-17 17:43:083094browse
This article mainly introduces the HTML imitation of Baidu homepage, which has certain reference value. Now I share it with everyone. Friends in need can refer to it
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a {
color: black;
}
#header {
text-align: right;
height: 38px;
line-height: 38px;
}
#content {
text-align: center;
}
.content-top img {
width: 270px;
}
.btn {
width: 700px;
height: 38px;
margin: 10px auto 30px;
}
.btn input {
width: 550px;
height: 38px;
border: 1px solid #dddddd;
font-size: 15px;
}
.btn a {
background-color: #3385ff;
width: 100px;
height: 38px;
float: right;
text-align: center;
line-height: 38px;
color: white;
text-decoration: none;
}
#footer {
margin-top: 100px;
}
.erwei,
.footer-t,
.footer-btn {
text-align: center;
}
.erwei p {
font-weight: bold;
}
</style>
</head>
<body>
<div id="header">
<a href="###" target="_blank">新闻</a>
<a href="###" target="_blank">hao123</a>
<a href="###" target="_blank">地图</a>
<a href="###" target="_blank">视频</a>
<a href="###" target="_blank">贴吧</a>
<a href="#" class="no-weight">登录</a>
<a href="#" class="no-weight">设置</a>
</div>
<div id="content">
<div class="top">
<!--src:资源的缩写;alt:如果网速图片显示不出来,就显示文字-->
<img src="https://www.baidu.com/img/bd_logo1.png">
</div>
<div class="btn">
<!--type:定义单行输入的文字;href:链接URL-->
<input type="text">
<a href="###">百度一下</a>
</div>
</div>
<div id="footer">
<div class="erwei">
<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" />
<p>百度</p>
</div>
<div class="footer-t">
<a href="###" target="_blank">把百度设为主页</a>
<a href="###" target="_blank">关于百度</a>
<a href="###" target="_blank">About Baidu</a>
<a href="###" target="_blank">百度推广</a>
</div>
<div class="footer-btn">
©2018 Baidu
<a href="###">使用百度前必读</a>
<a href="###">意见反馈</a> 京ICP证030173号
<img src="img/1.PNG">
<a href="###">京公网安备11000002000001号<img src="img/2.PNG" /></a>
</div>
</div>
</body>
</html>Related recommendations:
About the display of basic controls of the WEB version of Gaode Map
html uses table layout to implement user registration form examples
The above is the detailed content of HTML imitates Baidu homepage. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn