web前端：HTML+CSS实现百度首页静态显示

题外话，目前刚接触前端，刚看了HTML和CSS学习的基本内容，百度首页的静态显示作为一个简单练手项目巩固知识点。

1.如何实现一个网站页面的编写

通过一些博主的总结，主要可以分为四点：

1. 网站类型 ：网站里有什么东西；

2. 布局（排版） ：明确页面上每一块是什么，比如左上角的区域，右上角的区域，logo区域，下角区域等；

3. 结构 ：用html架构代码，从步骤2可知，将每一块写为一个

   元素，在

   中添加内容；

4. 细节 ：用CSS进行编排。

根据上面的步骤我们就可以完成一个简单的页面显示， 通过HTML代码将所需要的内容添加，在用CSS修改细节和排版 。下面就开始百度首页静态显示的流程吧！！！

Step1 . 百度首页-图片(这是网上截图的，不是我最后的图哈，我自己实现的界面在最后面!)

Step2. 布局（可以分为哪些块）左、右上角导航栏块，logo+搜索栏块，下角块（网站备案区域）

Step3. 结构，用html中

元素实现Step2中的各个块的内容

（1）左上角的导航栏，包含新闻，hao123，地图，视频，贴吧，学术，更多。

如下代码实现：

（2）右上角的导航栏类似，包含天气，设置，登录。

（3）logo加载，直接在百度官网页面下载原logo图片，使用 元素调用，一般在源码文件夹中创建img文件夹，使用相对路径调用。（开始没有加最先的那个点，一直未加载出图片，注意!）

（4）搜索栏，搜索输入框+提交框，采用标签，用于为用户输入创建HTML表单，表单用于向服务器传输数据。

（5）下角区包括两部分，

左下角 包括：设为首页，关于百度，About Baidu等；

右下角 包括@2020Baidu版本号，经营号，备案号等。

经过步骤3，已经将百度页面简单的内容添加进去了，效果如下所示，在Step4中用CSS对样式进行排版。

Srep4. 细节，用CSS进行编排

（1）左上角导航栏

（2）右上角导航栏

(3)logo

(4)搜索栏

（5）下角两边（但是没在左右去，啊啊啊，我哭了! float属性 position属性左右对齐）