이 글의 내용은 HTML로 Baidu 홈페이지를 만드는 방법에 관한 것입니다. 코드는 무엇입니까? 특정 참조 가치가 있습니다. 도움이 필요한 친구가 참조할 수 있기를 바랍니다.
바이두 홈페이지를 만들 때 분할을 위해 p를 사용하는 것 외에도 블록의 위치도 제어해야 합니다. 일반적으로
p의 크기는 너비와 높이에 각각 해당합니다.
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로 Baidu 홈페이지를 만드는 방법은 무엇입니까? 코드는 무엇입니까?" > </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로 Baidu 홈페이지를 만드는 방법은 무엇입니까? 코드는 무엇입니까?" > </p> </p> </body> </html>
HTML 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.
위 내용은 HTML로 Baidu 홈페이지를 만드는 방법은 무엇입니까? 코드는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!