Maison > Article > interface Web > HTML imite la page d'accueil de Baidu
HTML imite la page d'accueil de Baidu
- 不言original
- 2018-07-17 17:43:083047parcourir
Cet article présente principalement l'imitation HTML de la page d'accueil de Baidu, qui a une certaine valeur de référence. Maintenant, je la partage avec tout le monde. Les amis dans le besoin peuvent s'y référer
<!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>Recommandations associées :
À propos de l'affichage des contrôles de base de la version WEB AMAP
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn