HTML页面顶部制作、按钮制作及transition滑过按钮特效

首先看效果图

 要求鼠标滑过“首页”黑色变红，鼠标滑过收录变小手且样式改变

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;
    }

效果：

有一个渐入、渐出效果。