串联内容练习（三）

主页的样式表

顶部导航条的容器

.topbar-wapper{ 

       设置宽度全屏

         width:100%;

     设置高度和行高

         height:40px;

         line-height:40px;

        设置背景颜色

         background-color:#333;

         }

设置超链接的颜色

.topbar a{

              font-size:12px;

             color:#b0b0b0;

             display:block;

       }

设置超链接移入的效果

.topbar a:hover{

        color:#fff;

     }

设置中间的分割线

.topbar  .line{

      font-size:12px;

      color:#424242;

      margin: 0  8px;

     margin-top: -1px;

}

设置左侧导航栏

.service, .topbar  li{

               float:left;

               }

.app{

       position:relative;

}

设置app下的小三角

li:hover .app::after{

                   content:‘’;

            设置绝对定位

                  position:absolute;

                   display:block;

                   width:0;

                   height:0;

                 设置四个方向的边框

                  border: 8px  solid transparent;

                  去除上边框

                  border-top: none;

                 单独设置下边框的颜色

                 border-bottom-color:#fff;

                 bottom:0;

                 left:0;

                 right:0;

                 margin:auto;

}

li:hover>.app .qrcode{

         display:block;

}

设置下载app的下拉

.app .qrcode{

          display:none;

          position:absolute;

          left:-40px;

          width:124px;

          height:148px;

          line-height:1;

          text-align:center;

          background-color:#fff;

          box-shadow:0 0 10px  rgba（0,0,0,.3）

}设置二维码图片

.app .qrcode img{

           width:90px;

           margin: 17px;

           margin-bottom:10px;

           }

设置二维码中的文字

.app .qrcode  span{

          font-size:14px;

           color:#000;

          }

设置右侧导航栏

.shop-cart, .user-info{

         float:right;

          }

.shop-cart{

        margin-left:26px;

  }

设置购物车的样式

.shop-cart a{

         width:120px;

         background-color:#424242;

         text-align:center;

      }

.shop-cart:hover a{

           background-color:#fff;

          color:#ff6700;

          }

.shop-cart  i{

       margin-right:2px;

    }

导航条的内容基本完善