十天学会HTML+CSS(第八天)：表单

今天学习目标是小米商城的表单

第一步：添加表单

找到导航右半部分<div class="nav-right"></div>，添加form表单，表单里一个输入款、一个按钮。

        <div class="nav-right">
            <form class="nav-search">
                <input type="text" placeholder="耳机">
                <button>提交</button>
            </form>
        </div>

第二步：从外向内添加样式

基础样式非常简单，分别添加宽高即可。看效果。

.nav-search{
    margin-top:20px;
}
.nav-search input{
    width: 245px;
    height: 50px;
}
.nav-search button{
    width: 50px;
    height: 50px;
}

接下来还需要美化一下：

1、添加左浮动，让输入框和按钮连在一起；改变边框颜色；提示文字“耳机”往里面去一点好看。

.nav-search input{
    width: 245px;
    height: 50px;
    float:left;
    border: 1px solid #ccc;
    padding:15px;
}

2、按钮添加同样的边框；改变下背景颜色

.nav-search button{
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    background-color: #fff;
}

3、将按钮的文本“提交”删除，添加一张背景图。

.nav-search button{
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    background-color: #fff;
    background-image: url(../images/fangdajing.png); /*背景图*/
    background-repeat: no-repeat;  /*禁止重复*/
    background-position: center;  /*居中*/
    background-size: 50%;  /*调整背景图大小*/
}

第三步：看视频教程