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

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

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

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

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

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

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

上面的页面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 width=270 src="https://www.baidu.com/img/bd_logo1.png?where=super" title="百度一下你就知道"/>    </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 width=60 src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" title="我是一个二维码"/>     </p>  </p>     </body> </html>
标签
DT素材网

DT素材网

207

0

0

( 此人很懒并没有留下什么~~ )