![[附相应图片]HTML+CSS学成网首页制作基础案例之 头部导航条（logo 导航栏 搜索框）](https://900zi.500zi.com/uploadfile/img/15/596/c57c61df758daeeea09c5459da12b952.jpg)
页面布局整体思路：
确定页面的版心（可视区），测量可知。分析页面中的行模块，以及每个行模块中的列模块。一行中列模块常用浮动布局，先确定每个列的大小，之后确定列的位置。制作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;}
引用到的图片：
