作百度首页时候，除了要用到p进行分块，还需要对快的位置进行控制，一般有
对p进行规范大小width，height分别对应宽度高度
margin：有对p进行定位有margin-top,margin-left,margin-right,margin-buttom
float-left:吧p元素进行从左到右排列
了解这些简单的操作之后，就可以自己动手做出一个简单百度页面了，例如：
20181020125908318.png
上面的页面html代码如下：
<html>
<head>
<title>百度一下，你就知道</title>
<linkhref="baidu.ico"rel="shortcuticon"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:0auto;
float:left;
margin-top:5%;
}
</style>
</head>
<bodystyle="margin:0auto">
<pclass="p_head">
<pclass="p_head1">
<pclass="p_head2"><fontsize="1"><ins>新闻</ins></font></p>
<pclass="p_head2"><fontsize="1"><ins>hao123</ins></font></ins></p>
<pclass="p_head2"><fontsize="1"><ins>地图</ins></font></p>
<pclass="p_head2"><fontsize="1"><ins>资源</ins></font></p>
<pclass="p_head2"><fontsize="1"><ins>视频</ins></font></p>
<pclass="p_head2"><fontsize="1"><ins>贴吧</ins></font></p>
<pclass="p_head2"><fontsize="1"><ins>学术</ins></font></p>
<pclass="p_head2"><fontsize="1"><ins>登录</ins></font></p>
<pclass="p_head2"><fontsize="1"><ins>设置</ins></font></p>
<pclass="p_head2"style="width:70px;background-color:#38f"><fontsize="1"color="white">更多产品</font></p>
</p>
</p>
<pclass="p_mid">
<pclass="p_mid1">
<ahref="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">
<imgheight=130width=270src="https://www.baidu.com/img/bd_logo1.png?where=super"title="百度一下你就知道"/>
</a>
</p>
</p>
<pclass="p_body">
<pclass="p_body1">
<formaction="https://www.baidu.com/s"method="get">
<inputstyle="width:500px;height:36px;"type="text"/><inputid="gender"name="gender"type="submit"value="百度一下"style="width:100px;height:36px;"/>
</form>
</p>
</p>
<pclass="p_base">
<pclass="p_base1"style="margin-left:48%;">
<imgheight=60width=60src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png"title="我是一个二维码"/>
</p>
</p>
</body>
</html>
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54454.shtml
