本篇文章给大家带来的内容是关于HTML如何制作百度首页?代码是什么,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
制作百度首页时候,除了要用到p进行分块,还需要对快的位置进行控制,一般有
对p进行规范大小width,height分别对应宽度高度
margin:有对p进行定位有margin-top,margin-left,margin-right,margin-buttom
float-left:吧p元素进行从左到右排列
了解这些简单的操作之后,就可以自己动手做出一个简单百度页面了,例如:
立即学习“前端免费学习笔记(深入)”;
上面的页面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"><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="HTML如何制作百度首页?代码是什么" ></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="HTML如何制作百度首页?代码是什么" ></p></p></body></html>
免责声明:本站内容仅用于学习参考,信息和图片素材来源于互联网,如内容侵权与违规,请联系我们进行删除,我们将在三个工作日内处理。联系邮箱:chuangshanghai#qq.com(把#换成@)