当前位置：Gxlcms > html代码 > HTML如何制作百度首页？代码是什么

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

时间：2021-07-01 10:21:17 帮助过：80人阅读

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

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

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

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

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

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

20181020125908318.png

上面的页面html代码如下：

  1.  
  2.  <html>
  3. <head>
  4. <title>百度一下，你就知道</title>
  5. <link href="baidu.ico" rel="shortcut icon" type="ico图标路径"/>
  6. <style>
  7. .p_head{
  8. width:100%;
  9. height:150px;
  10. margin-top:0px;
  11. }
  12. .p_mid{
  13. width:100%;
  14. height:130px;
  15. margin-top:0px;
  16. }
  17. .p_body{
  18. width:100%;
  19. height:200px;
  20. margin-top:0px;
  21. }
  22. .p_base{
  23. width:100%;
  24. height:60px;
  25. float:left;
  26. margin-top:0px;
  27. }
  28. .p_based{
  29. width:100%;
  30. height:100%;
  31. float:left;
  32. margin-top:0px;
  33. }
  34. .p_head1{
  35. width:540px;
  36. height:24px;
  37. float:right;
  38. margin-top:25px;
  39. }
  40. .p_head2{
  41. width:50px;
  42. height:24px;
  43. float:left;
  44. line-height:24px;
  45. text-align:center;
  46. }
  47. .p_mid1{
  48. width:270px;
  49. height:130px;
  50. float:left;
  51. margin-left:39%;
  52. }
  53. .p_body1{
  54. width:600px;
  55. height:36px;
  56. background-color:#999;
  57. float:left;
  58. margin-left:32%;
  59. }
  60. .p_base1{
  61. width:60px;
  62. height:60px;
  63. margin:0 auto;
  64. float:left;
  65. margin-top:5%;
  66. }
  67.  
  68. </style>
  69. </head>
  70. <body style="margin:0 auto">
  71. <p class="p_head" >
  72. <p class="p_head1">
  73. <p class="p_head2" ><font size="1" ><ins>新闻 </ins></font></p>               
  74. <p class="p_head2" ><font size="1" ><ins>hao123</ins> </font></ins></p> 
  75. <p class="p_head2" ><font size="1" ><ins>地图 </ins></font></p> 
  76. <p class="p_head2" ><font size="1" ><ins>资源 </ins></font></p> 
  77. <p class="p_head2" ><font size="1" ><ins>视频 </ins></font></p> 
  78. <p class="p_head2" ><font size="1" ><ins>贴吧 </ins></font></p> 
  79. <p class="p_head2" ><font size="1" ><ins>学术 </ins></font></p> 
  80. <p class="p_head2" ><font size="1" ><ins>登录 </ins></font></p> 
  81. <p class="p_head2" ><font size="1" ><ins>设置 </ins></font></p>
  82. <p class="p_head2" style="width:70px;background-color:#38f" ><font size="1" color="white" >更多产品</font></p> 
  83. </p>
  84. </p>
  85.  
  86. <p class="p_mid" >
  87. <p class="p_mid1" >
  88. <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">
  89. <img  height=130 width=270 src="https://www.baidu.com/img/bd_logo1.png?where=super" title="百度一下你就知道"/>
  90. </a>
  91.  
  92. </p>
  93. </p>
  94.  
  95. <p class="p_body" >
  96. <p class="p_body1" >
  97. <form action="https://www.baidu.com/s"  method="get"  >
  98. <input style="width:500px;height:36px;"type="text"/><input id="gender" name="gender" type="submit"  value="百度一下"style="width:100px;height:36px;"/>
  99. </form>
  100. </p>
  101. </p>
  102. <p class="p_base" >
  103. <p class="p_base1" style="margin-left:48%;">
  104. <img  height=60 width=60 src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" title="我是一个二维码"/>
  105. </p>
  106. </p>
  107. </body>
  108. </html>

以上就是对HTML如何制作百度首页？代码是什么的全部介绍，如果您想了解更多有关HTML视频教程，请关注PHP中文网。

以上就是HTML如何制作百度首页？代码是什么的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！