页面

做这个页面首先要分析他有几个部分，我的分析得给他一个大的“div”，再给他三个小的div。
所以就是三各部分。
先给他一个div把上面的logo和icon给他敲出来。

上面是logo和icon的div样式，p标签里的四个“&nbsp”是为了把他们隔开而这个”&nbsp；“就是空格，img标签是可以导入图片的，我给他img标签也是为了好写css样式因为在html里把图片导入进去就不用在css里导入了,看下面的样式就直接写了一个“icon img”然后再给他个右内边距5个像素。


这是input是搜索框的意思这个text是你输入什么就是什么，就像这样。

Placeholder“”，在她的双引号内输入什么就什么，我输入了“搜索你想要查询的项目”。

看下css样式

给了搜索框的宽（725）、高（39）和行高（39）行高是为了前面的icon可以居中，
border-radius：10px；是圆角的效果border:none;这是去边框。


那个颜色值是 HSL 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
y4和y8是因为右边的不需要边距撑开他所有给他右边距-1.

这是文字和图片的样式被我收起的样式是和第一个一样的子不过类名不一样而已。