首先看效果图
要求鼠标滑过“首页”黑色变红,鼠标滑过收录变小手且样式改变
1、用一个css3中<header>标签获得头部区域。
结构如下、header 里面加了个div,这是个意外,习惯了。。。下次改正
<header>
<div class="header_body">
<ul class="header_body_lift">
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>关于我</span></a></li>
<li><form>
<input>
</form>
</li>
</ul>
<ul>
<li><button>创作</button></li>
<li><button>收录</button></li>
</ul>
</div>
</header>
2、<header>CSS样式:
header{
width: 100%;
height: 3em;
border-bottom: 1px solid red;
position: fixed;
background-color: white;
}
.header_body{
margin: auto;
width: 85%;
height: 100%;
}
3、设置<ul>标签、以及<li>标签样式。
(1)左边
<ul class="header_body_lift">
<li class="tab active"><a href="#"><span class="menu_text">首页</span></a></li>
<li class="tab"><a href="#"><span class="menu_text">关于我</span></a></li>
<li class="search">
<form>
<input class="search-input">
</form>
</li>
</ul>
CSS样式:
.header_body_lift{
height: 100%;
float: left;
}
.header_body_lift > li{
float: left;
display: block;
height: 100%;
}
.header_body_lift > .tab{
margin-right: 1.5em;
height: 100%;
}
.header_body_lift >li > a{
width: 100%;
height: 100%;
display: block;
text-align: center;
line-height: 3em;
text-decoration:none;
color: #000000;
}
.search-input{
border-radius:2em;
width: 10em;
height:2.5em;
margin: 4% auto;
border: 0px;
background-color: #eee;
outline: 0;
padding-left: 1em;
}
.header_body_lift > .active > a:hover{
color: #ea6f5a;
}
.header_body_lift > .menu_text{
font-size: 1.2em;
}
鼠标经过边红色:
.header_body_lift > .active > a:hover{
color: #ea6f5a;
}
(3)右边
鼠标滑过变成小手:用一句CSS放在所在容器样式里(
cursor:pointer;
)
<ul class="header_body_right">
<li><button class="record">创作</button></li>
<li><button>收录</button></li>
</ul>
CSS样式:
.header_body_right {
height: 100%;
}
.header_body_right > li {
float: right;
display: block;
height: 100%;
margin-left: 1em;
}
.header_body_right > li > button{
border-radius:2em;
border: 1px solid #ea6f5a;
background-color: white;
height: 80%;
width: 6em;
margin: 5% auto;
font-size: 1em;
outline: 0;
cursor:pointer;
}
.header_body_right > li > button:hover{
background-color: #ea6f5a;
color: white;
}
.header_body_right > li > .record{
background-color: #ea6f5a;
color: white;
}
.header_body_right > li > .record:hover{
border: 1px solid #ea6f5a;
background-color: white;
color: #ea6f5a;
4、“创作”按钮滑动特效使用transition
css样式修改为:
.header_body_right > li > button{
border-radius:2em;
border: 1px solid #ea6f5a;
background-color: white;
height: 80%;
width: 6em;
margin: 5% auto;
font-size: 1em;
outline: 0;
cursor:pointer;
}
.header_body_right > li > button:hover{
background-color: #FFE4E1;
color: #000000;
transition:0.5s;
}
.header_body_right > li > .record{
background-color: #ea6f5a;
color: white;
}
.header_body_right > li > .record:hover{
border: 1px solid #ea6f5a;
background-color: #FFE4E1;
color: #000000;
}
效果:
有一个渐入、渐出效果。