学成在线header内容大概思路（5）

高度应该是42px的像素的。一点一点测量出来。 

 html代码如下：

	<!-- header头部模块开始 -->
	<div class="header w">
		<!-- logo -->
		<div class="logo">
			<img src="images/logo.png" alt="">
		</div>
		<!-- nav -->
		<div class="nav">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">课程</a></li>
				<li><a href="#">职业规划</a></li>
			</ul>
		</div>
		<!-- search -->
		<div class="search">
			<input type="text" value="输入关键词">
			<button></button>
		</div>
		<!-- user -->
		<div class="user">
			<img src="images/user.jpg" alt="">
			lilei-hanmm
		</div>
	</div>
	<!-- header头部模块结束 -->

css代码如下：

/*header start*/
.header {
	height: 42px;
	/*background-color: pink;*/
	margin: 30px auto;
}
.logo {
	float: left;
	margin-right: 60px;
}
.nav {
	float: left;
}
.nav ul li {
	float: left;
}
.nav ul li a {
	display: block;
	height: 40px;
	padding: 0 10px;
	margin-right: 20px;
	line-height: 40px;
	font-size: 18px;
	color: #050505;
	text-decoration: none;
}
/*鼠标经过链接 才有底边框*/
.nav ul li a:hover {
	border-bottom: 2px solid #00a4ff;
}
.search {
	float: left;
	margin-left: 70px;
}
.search input {
	float: left;
	width: 340px;
	height: 40px;
	border: 1px solid #00a4ff;
	border-right: 0;
	padding-left: 20px;
	color: #ccc;
}
.search button {
	float: left;
	width: 50px;
	height: 42px;
	background: url(images/btn.png);
}
.user {
	float: left;
	height: 42px;
	line-height: 42px;
	margin-left: 30px;
	font-size: 14px;
	color: #666;
}

具体步骤和分析如下：

首页等这几个字的大小和颜色可以取一下的； 

经过首页，课程，职业规划这几个字时，需要有蓝色下划线和蓝色字体，提前先除去a元素它的默认格式 

 

理应是可以装下的，可是按钮脱离了。原因是，行内块元素之间有默认宽度， 我们只有加入浮动之后才能解决这个问题吧。