
制作百度首页时候,除了要用到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 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> 总结 以上是内存溢出为你收集整理的HTML如何制作百度首页?代码是什么全部内容,希望文章能够帮你解决HTML如何制作百度首页?代码是什么所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)