[附相应图片]HTML+CSS学成网首页制作基础案例之 头部导航条（logo、导航栏、搜索框）

页面布局整体思路：

1. 确定页面的版心（可视区），测量可知。
2. 分析页面中的行模块，以及每个行模块中的列模块。
3. 一行中列模块常用浮动布局，先确定每个列的大小，之后确定列的位置。
4. 制作HTML结构。遵循先有结构，后有样式的原则。 

效果图如下：

• 1号是版心盒子header 1200*42的盒子水平居中对齐
• 版心盒子内包含2号盒子logo
•  版心盒子内包含3号盒子nav文字导航栏
• 版心盒子内包含4号盒子search搜索框
• 版心盒子内包含5号盒子user个人信息
• 注意4个盒子都必须是浮动

导航栏注意点：

• nav文字导航栏不直接用链接a，而是用无序列表<li>包含链接（li+a），再在a中写文本

1. li+a语义更清晰，更有条例
2. 如果直接用a，搜索引擎容易识别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权风险），从而影响网站排名。
3. 让导航栏一行显示，给li加浮动。因为a本身是行内元素，可以一行显示，但li是块级元素，影响了a。

• nav文字导航栏不指定宽度&#x