HTML如何制作百度首页？代码是什么

本篇文章给大家带来的内容是关于HTML如何制作百度首页？代码是什么，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）

制作百度首页时候，除了要用到p进行分块，还需要对快的位置进行控制，一般有

对p进行规范大小width，height分别对应宽度高度

margin：有对p进行定位有margin-top,margin-left,margin-right,margin-buttom

float-left:吧p元素进行从左到右排列

了解这些简单的操作之后，就可以自己动手做出一个简单百度页面了，例如：

http://r.m.baidu/3ii99ns (二维码自动识别)

上面的页面html代码如下：

<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">





<ins>新闻 </ins>

<ins>hao123</ins> </ins>

<ins>地图 </ins>

<ins>资源 </ins>

<ins>视频 </ins>

<ins>贴吧 </ins>

<ins>学术 </ins>

<ins>登录 </ins>

<ins>设置 </ins>

更多产品









<a href="https://www.baidu/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 width=270 src="https://www.baidu/img/bd_logo1.png?where=super" title="百度一下你就知道"/>

</a>









<form action="https://www.baidu/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>









<img height=60 width=60 src="https://ss1.bdstatic/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" title="我是一个二维码"/>





</body>

</html>