学成在线---header部分
1.建立一个文件夹 : 包括index.html style.css images
2.确定版心 .w 作为公共类 方便引用
3.header 直接量 量学成在线logo部分的宽度 作为头部宽度 然后设定一个上下magrin
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.w {
width: 1200px;
margin: auto;
}
.header {
height: 42px;
margin: 30px auto;
/* background-color: pink; */
}
4.header---logo部分
<div class="logo">
<img src="../STUDY/images/logo.png" alt="">
</div>
.header .logo {
float: left;
width: 198px;
height: 42px;
}
5.header--nav部分
注意:a一般在ul的li里面 hover 边框时要给a 加高度(把a转换成块元素)否则下边框会紧贴着a
nav li a直接给高度 不需要给宽度 因为每个a字数不一样 用padding量a之间的距离撑开就好
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
.header .nav {
float: left;
height: 42px;
margin-left: 60px;
}
.header ul li {
float: left;
padding: 0 5px;
}
.header .nav ul li a {
display: block;
height: 42px;
line-height: 42px;
padding: 0 16px;
font-size: 18px;
color: #050505;
}
.header .nav ul li :hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
6.header---search
<div class="search">
<input type="text" class="txt" value="请输入关键字">
<button class="btn"></button>
</div>
.header .search {
float: left;
width: 412px;
height: 42px;
margin-left: 60px;
background-color: #00a4ff;
}
.search .txt {
float: left;
width: 345px;
height: 40px;
padding-left: 15px;
border: 1px solid #00a4ff;
border-right: 0;
font-size: 14px;
color: #bfbfbf;
outline: none;
}
.search .btn {
float: left;
width: 50px;
height: 42px;
border: none;
background-image: url(../STUDY/images/btn.png);
}
7.header---user
<div class="user">
<img src="../STUDY/images/user.png" alt="">
</div>
.header .user {
float: right;
width: 120px;
height: 38px;
margin-right: 20px;
padding-top: 6px;
}