串联内容练习（五）

…………

          创建一个中间导航条的容器

           <div class=“nav-wrapper”>

        创建导航条

                <ul class=“nav clearfix”>

                     <li class=“all-goods-wrapper”>

                         <a cladd=“all-goods” href=“#”>全部商品分类</a>

 创建左侧导航菜单

                           <ul class=“left-menu”>

                                 <li>

                                     <a href=“#”>

                                         手机 电话卡

                                       <i class=“fas fa-angle-right”></i>

                                    </a>

                                </li>

                                 <li>

                                     <a href=“#”>

                                         电视 盒子

                                       <i class=“fas fa-angle-right”></i>

                                    </a>

                                </li>

                                  <li>

                                     <a href=“#”>

                                         笔记本 平板

                                       <i class=“fas fa-angle-right”></i>

                                    </a>

                                </li>

                                <li>

                                     <a href=“#”>

                                         家电 插线板

                                       <i class=“fas fa-angle-right”></i>

                                    </a>

                                </li>

                                 <li>

                                     <a href=“#”>

                                         出行 穿戴

                                       <i class=“fas fa-angle-right”></i>

                                    </a>

                                </li>

                                <li>

                                     <a href=“#”>

                                         智能 路由器

                                       <i class=“fas fa-angle-right”></i>

                                    </a>

                                </li>

                                

                                <li>

                                     <a href=“#”>

                                         电源 配件

                                       <i class=“fas fa-angle-right”></i>

                                    </a>

                                </li>

                                <li>

                                     <a href=“#”>

                                         健康 儿童

                                       <i class=“fas fa-angle-right”></i>

                                    </a>

                                </li>

                                 <li>

                                     <a href=“#”>

                                         耳机 音箱

                                       <i class=“fas fa-angle-right”></i>

                                    </a>

                                </li>

                               <li>

                                     <a href=“#”>

                                         生活 箱包

                                       <i class=“fas fa-angle-right”></i>

                                    </a>

                                </li>

                          </ul>

                   </li>

                    <li class=“show-goods”><a href=“#”>小米手机</a></li>

                    <li class=“show-goods”><a href=“#”>Redmi  红米</a></li>

                    <li class=“show-goods”><a href=“#”>电视</a></li>  

                     <li class=“show-goods”><a href=“#”>笔记本</a></li> 

                    <li class=“show-goods”><a href=“#”>家电</a></li>

                    <li class=“show-goods”><a href=“#”>路由器</a></li>

                     <li class=“show-goods”><a href=“#”>智能硬件</a></li> 

                      <li><a href=“#”>服务</a></li>

                      <li><a href=“#”>社区</a></li>

                   创建一个弹出层

                   <div class=“goods-info”>

                  </div>

                创建搜索框的容器

                 <div class=“search-wapper”>

                       <form class=“search” action=“#”>

                             <input class=“search-inp” type=“text”>

                           <button class=“search-btn”>

                           <i clasd =“fas fa-search”></i>

                           </button>

        </div>