HTML是網頁制作必備的一項技能,在網頁制作中,網頁布局是非常重要的一環。本文將向大家展示百度網頁布局的HTML代碼。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度一下,你就知道!</title> <style> /* CSS代碼 */ body { margin: 0; padding: 0; } #header { height: 80px; background-color: #3385FF; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } #logo { width: 80px; height: 80px; background-image: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png); background-size: contain; background-repeat: no-repeat; } #search { margin-left: 20px; width: 500px; height: 32px; border: none; border-radius: 20px; outline: none; padding: 0 10px; font-size: 16px; } #btn-search { width: 40px; height: 32px; border: none; border-radius: 20px; background-color: #FEFEFE; cursor: pointer; font-size: 12px; } </style> </head> <body> <div id="header"> <div id="logo"></div> <form id="search-form"> <input id="search" type="text" placeholder="請輸入搜索內容"> <input id="btn-search" type="button" value="搜索"> </form> </div> </body> </html>
以上是百度網頁布局的HTML代碼,通過學習其中的CSS代碼可以了解到如何使用flex布局、邊距、尺寸、背景圖、圓角、字體大小等屬性來實現網頁的布局。
下一篇jquery4大彈框