Maison >interface Web >tutoriel HTML >Comment créer une page d'accueil Baidu avec HTML ? quel est le code
Comment créer une page d'accueil Baidu avec HTML ? quel est le code
- 云罗郡主avant
- 2018-10-20 14:17:4733127parcourir
Le contenu de cet article explique comment créer une page d'accueil Baidu avec HTML ? Quel est le code ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
Lors de la création de la page d'accueil de Baidu, en plus d'utiliser p pour la segmentation, vous devez également contrôler la position du bloc. Généralement,
normaliser la taille de p, la largeur et la hauteur correspondent respectivement. à la largeur et à la hauteur
margin : il y a margin-top, margin-left, margin-right, margin-bottom pour le positionnement p
float-left : p les éléments sont disposés de gauche à à droite
Après avoir compris ces opérations simples, vous pouvez créer vous-même une simple page Baidu, par exemple :
Le code html de la page ci-dessus est le suivant suit :
<html>
<head>
<title>百度一下，你就知道</title>
<link href="baidu.ico" rel="shortcut icon" type="ico图标路径"/>
<style>
.p_head{
width:100%;
height:150px;
margin-top:0px;
}
.p_mid{
width:100%;
height:130px;
margin-top:0px;
}
.p_body{
width:100%;
height:200px;
margin-top:0px;
}
.p_base{
width:100%;
height:60px;
float:left;
margin-top:0px;
}
.p_based{
width:100%;
height:100%;
float:left;
margin-top:0px;
}
.p_head1{
width:540px;
height:24px;
float:right;
margin-top:25px;
}
.p_head2{
width:50px;
height:24px;
float:left;
line-height:24px;
text-align:center;
}
.p_mid1{
width:270px;
height:130px;
float:left;
margin-left:39%;
}
.p_body1{
width:600px;
height:36px;
background-color:#999;
float:left;
margin-left:32%;
}
.p_base1{
width:60px;
height:60px;
margin:0 auto;
float:left;
margin-top:5%;
}
</style>
</head>
<body style="margin:0 auto">
<p class="p_head" >
<p class="p_head1">
<p class="p_head2" ><font size="1" ><ins>新闻 </ins></font></p>
<p class="p_head2" ><font size="1" ><ins>hao123</ins> </font></ins></p>
<p class="p_head2" ><font size="1" ><ins>地图 </ins></font></p>
<p class="p_head2" ><font size="1" ><ins>资源 </ins></font></p>
<p class="p_head2" ><font size="1" ><ins>视频 </ins></font></p>
<p class="p_head2" ><font size="1" ><ins>贴吧 </ins></font></p>
<p class="p_head2" ><font size="1" ><ins>学术 </ins></font></p>
<p class="p_head2" ><font size="1" ><ins>登录 </ins></font></p>
<p class="p_head2" ><font size="1" ><ins>设置 </ins></font></p>
<p class="p_head2" style="width:70px;background-color:#38f" ><font size="1" color="white" >更多产品</font></p>
</p>
</p>
<p class="p_mid" >
<p class="p_mid1" >
<a href="https://www.baidu.com/s?wd=%E7%BD%91%E7%BB%9C%E8%A1%A8%E6%83%85%E7%AC%A6%E5%8F%B7%E8%AF%9E%E7%94%9F&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" target="_blank">
<img height=130 style="max-width:90%"https://www.baidu.com/img/bd_logo1.png?where=super" title="百度一下你就知道"/ alt="Comment créer une page d'accueil Baidu avec HTML ? quel est le code" >
</a>
</p>
</p>
<p class="p_body" >
<p class="p_body1" >
<form action="https://www.baidu.com/s" method="get" >
<input style="width:500px;height:36px;"type="text"/><input id="gender" name="gender" type="submit" value="百度一下"style="width:100px;height:36px;"/>
</form>
</p>
</p>
<p class="p_base" >
<p class="p_base1" style="margin-left:48%;">
<img height=60 style="max-width:90%"https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" title="我是一个二维码"/ alt="Comment créer une page d'accueil Baidu avec HTML ? quel est le code" >
</p>
</p>
</body>
</html>Ce qui précède explique comment créer une page d'accueil Baidu en HTML ? Une introduction complète à ce qu'est le code. Si vous souhaitez en savoir plus sur les tutoriels vidéo HTML, veuillez faire attention au site Web PHP chinois.
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!