慕课网首页仿写—搜索栏制作

html代码

<div class="wrap">    <div class="logo">        <div class="logo_left">            <img src="images/logo.jpg" />        </div>        <div class="logo_right">            <img src="images/tel.jpg" />24小时服务热线：<span class="tel">123-456-7890</span>        </div>    </div>    <!--logo结束-->    <div class="nav">        <div class="nav_left">        </div>        <!--nav_left结束-->        <div class="nav_mid">            <div class="nav_mid_left">                <ul>                    <li>首页</li>                    <li>关于慕课</li>                    <li>新闻动态</li>                    <li>课程中心</li>                    <li>在线课程</li>                    <li>人才招聘</li>                </ul>            </div>        <!--nav_mid结束-->            <div class="nav_mid_right">            <form action="" method="post">                <input type="text" class="search_text" />            </form>            </div>        <!--nav_mid_right结束-->        </div>        <!--nav_mid结束-->        <div class="nav_right">        </div>        <!--nav_right结束-->    </div>    <!--nav结束--></div><!--wrap结束-->

css代码

.nav{    height: 40px;}.nav_left{    width:10px;/*页面设计要求10px*/    background:url(../images/nav_left.jpg);    background-repeat:no-repeat;    /*上面两句可以简写成：background:url(../images/nav_left.jpg) no-repeat;    这个图片长度正好10px，所以不用横向拉伸了*/    float:left;    height:40px;}.nav_mid{    width:980px;    background:url(../images/nav_bg.jpg) repeat-x;/*图片长度只有1px，而设计要求980px，所以横向拉伸*/    float:left;    }.nav_right{    width:10px;    background:url(../images/nav_right.jpg) no-repeat;    float:left;    height:40px;}.nav_mid_left, .nav_mid_right{    float:left;}.nav_mid_left{    width:680px;}.nav_mid_right{    width:300px;}.nav_mid_left li{    font-size:16px;    float:left;    list-style-type:none;    color:#FFF;    font-family:"微软雅黑";    line-height:40px;/*把文字行高设定成盒子高度就能使文字居中*/    width:100px;    text-align:center;}.search_text{    margin-top:5px;    width:190px;    height:25px;    background:url(../images/search.jpg) no-repeat right center;    /*上面一段话等同于    background-image:url(../images/search.jpg);    background-repeat:no-repeat;    background-position:right center;*/    background-color:#FFF;    padding-right:25px;/*图片宽度25px，右填充25px.*/    border:1px solid #FFF;/*边框1px，直线，白色*/}

盒子模型个之间距离的属性不熟悉
background插入图片和background—image插入图片之间的区别
对各标签属性不熟悉

解决办法：继续仿写，注意常用标签，对需要后续跟进的标签进行适当的额外锻炼。