成果
支持搜索內容。
步驟
一般來說：
- 使用css+div進行頁面的佈局，css一般是用外聯進行開發
- 使用html進行每一個頁面的填充
注意事項
- id的命名規範：父標籤id_自己的id
- css一般一個選擇器一行，沒有換行
- 設置頁面基礎樣式——設置特定標籤樣式——使用僞類給標籤添加樣式。
css文件
/* 設置頁面基礎設置 */
*{padding: 0px;margin: 0px;}
/* 設置header */
#header{width: 100%;height: 40px;}
#header_nav {float: left;list-style-type: none;position: absolute;right: 90px;top:26px;}
#header_nav a{margin-left: 24px;color: #333;font-size: 13px;font-weight: 30px;}
/* 設置main */
#main{width:100%;height: 290px;text-align: center;}
#img_logo{margin-top: 50px;0px;margin-bottom: 20px;}
input[type=text]{height: 34px;width: 539px;margin-right: 0px;border:solid 1px #4992FF;background-image: url(img/img.png);background-repeat: no-repeat;background-position-x: 500px;}
input[type=submit]{height: 37px;px;width: 100px;font-size: 15px;color: #fff;background-color: #2d78f4;border: solid 0px;letter-spacing: 1px;position: relative;right: 5px;top:2px}
/* 設置tailer */
#tailer{width: 100%;height: 300px;}
/* 使用僞類給標籤加樣式 */
#header_nav a:hover{color:blue;}
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<!--
1，使用css+div進行頁面的佈局
css一般是用外聯進行開發
2，使用html進行每一個頁面的填充
-->
<link rel="stylesheet" type="text/css" href="baidu.css"/>
<link href="./img/logo.ico" rel="shortcut icon"/>
</head>
<body>
<!-- 頭部 -->
<div id="header">
<!-- 命名規範，父標籤id_id -->
<li id="header_nav">
<a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_1">抗擊肺炎</a>
<a href="http://news.baidu.com/">新聞</a>
<a href="https://www.hao123.com/">hao123</a>
<a href="https://map.baidu.com/@13265880.8,4373425.72,12z">地圖</a>
<a href="http://v.baidu.com/">視頻</a>
<a href="https://tieba.baidu.com/index.html">貼吧</a>
<a href="http://xueshu.baidu.com/">學術</a>
<a href="">登錄</a>
<a href="">設置</a>
</li>
</div>
<!-- 主體 -->
<div id="main">
<form action="https://www.baidu.com/s" method="get">
<img id="img_logo" src="img/bd_logo1.png" width="270px" height="129px"><br>
<input type="text" name="wd" id="" value="" />
<input type="submit" name="" id="" value="百度一下" />
</form>
</div>
<!-- 底部 -->
<div id="tailer">
<img src="img/bottom.png" align="center">
</div>
</body>
</html>