Heim > Artikel > Web-Frontend > HTML imitiert die Baidu-Homepage
HTML imitiert die Baidu-Homepage
- 不言Original
- 2018-07-17 17:43:083048Durchsuche
In diesem Artikel wird hauptsächlich die HTML-Imitation der Baidu-Homepage vorgestellt, die einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf verweisen
<!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>Verwandte Empfehlungen:
Über die Anzeige der grundlegenden Steuerelemente der AMAP WEB-Version
HTML verwendet Tabellenlayout, um Beispiele für Benutzerregistrierungsformulare zu implementieren
Das obige ist der detaillierte Inhalt vonHTML imitiert die Baidu-Homepage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn