页面布局整体思路：
- 确定页面的版心（可视区），测量可知。
- 分析页面中的行模块，以及每个行模块中的列模块。
- 一行中列模块常用浮动布局，先确定每个列的大小，之后确定列的位置。
- 制作HTML结构。遵循先有结构，后有样式的原则。
效果图如下：
- 1号是版心盒子header 1200*42的盒子水平居中对齐
- 版心盒子内包含2号盒子logo
- 版心盒子内包含3号盒子nav文字导航栏
- 版心盒子内包含4号盒子search搜索框
- 版心盒子内包含5号盒子user个人信息
- 注意4个盒子都必须是浮动
导航栏注意点：
- nav文字导航栏不直接用链接a，而是用无序列表<li>包含链接（li+a），再在a中写文本
- li+a语义更清晰，更有条例
- 如果直接用a，搜索引擎容易识别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权风险），从而影响网站排名。
- 让导航栏一行显示，给li加浮动。因为a本身是行内元素，可以一行显示，但li是块级元素，影响了a。
- nav文字导航栏不指定宽度，而给链接a指定左右padding撑开盒子
- 因为每个链接的文字个数不同。
- 将来可以继续添加文字。
把CSS布局页面引入HTML中，代码如下
<link rel="stylesheet" href="style.css">index.html
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" type="text/css" href="css/style.css"/><title>头部导航条</title></head>
<body>
<!-- 页面头部部分 --><header><nav><!-- logo部分 --><div class="logo"><img src="img/logo_03.png"></div><!-- 导航栏部分 --><div class="navbar"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 个人中心部分 --><div class="personal"><a href="#">个人中心<img src="img/ling_03.png"></a><a href="#"><img src="img/tou_03.png">qq-leishui</a></div><!-- 搜索框部分 --><div class="search"><form action=""><input type="text" placeholder="请输入关键词" ><!-- placeholder 占位符 内容输入自动清除默认值 --><input type="submit" value="" ></form></div></nav></header>
</body>
</html>style.css
* {margin: 0;padding: 0; /*清除内外边距*/}ul {list-style: none; /*去掉列表样式小点*/}a {color: #050505;text-decoration: none; /*取消下划线*/}input {border: 0; /*所有表单边框为0*/box-sizing: border-box; /*css3盒子模型 border 和 padding 都包含在 width 里 */}/*css初始化结束*//*页面头部部分*/body {background-color: #f3f5f7; /*整个页面的背景色*/}header {height: 100px;/* background-color: #A5A5A5; */overflow: hidden; /*防止外边距合并的问题*/}nav {width: 1366px;height: 42px;/*background-color: purple;*/margin: 26px auto; /*盒子居中对齐*/}.logo {float: left;}.navbar {float: left;height: 42px;line-height: 42px; /*这个行高给父亲，行高会继承*/margin-left: 50px;}.navbar li {float: left; /*让首页 课程 职业规划 一行显示*/}.navbar li a {padding: 0 8px; /*上下 0 左右 8像素*/display: block; /*a是行内元素，给高需要装换块级*/height: 42px;}.navbar li a:hover {border-bottom: 2px solid #00a4ff; /*鼠标放入底边框*/}/*搜索框部分*/.search {width: 410px; /*360 50 */height: 38px;border: 1px solid #00a4ff;float: right;}.search input[type=text] { /*属性选择器 type为text文本框*/width: 360px;height: 38px;padding-left: 20px;float: left;}.search input[type=submit] { /*属性选择器 type为submit文本框*/width: 50px;height: 38px;float: left;background: #00a4ff url(../img/search_07.png) center center no-repeat;}/*搜索框部分结束*//*个人中心开始*/.personal {float: right;height: 42px;line-height: 42px; /*这个行高给父亲，行高会继承*/margin: 0 15px 0 35px; /*上 0 右 15 下 0 左 35*/}.personal img {margin: 0 8px;}引用到的图片：
