练习之京东顶部导航条

一、初次尝试

　　1. 自己编写的代码以及效果图：

　　　　　　

　　    <link rel="stylesheet" href="C:\data\计算机学习\index3.html\02.CSS\reset.css.css">
   　　 <link rel="stylesheet" href="C:\data\计算机学习\index3.html\02.CSS\iconfont\iconfont.css">
   
    <style>
      .b a{
        font-size: 12px;
        color: #999999;
      }

      .b a:hover{
          color: #f10215;
      }

      .b{
          background-color: #E3E4E5;
          height: 30px;
          line-height: 30px;
          width: 100%;
      }
      .b1{
          float: left;
          margin-right: 17px;
          padding-left: 17px;
          color: rgba(0, 0, 0, .2);
          font-size: 3px;
      }
      .b2,.b3,.b4,.b5,.b6,.b7,.b8{
          float: left;
          margin-right: 17px;
          color: rgba(0, 0, 0, .2);
          font-size: 3px;

      }

      a{
          float: left;
          display: block;
      }

      .a0{
          margin-right: 330px;
          margin-left: 150px;
      }
      .a0::before{
        content: '\e677';
        font-size: 10px;
        font-family: 'iconfont';
        color: #f10215;
      }
      .a1{
          margin-right: 5px;
      }
     
      .a3 ,.a4, .a5, .a6, .a7, .a8, .a9{
          margin-right: 17px;
      }
      .a4::after{
          content: '\e665';
          font-size: 1px;
          font-family: 'iconfont';
      }
      .a6::after{
          content: '\e665';
          font-size: 5px;
          font-family: 'iconfont';
          color: #999999;
      }
      .a7::after{
          content: '\e665';
          font-size: 5px;
          font-family: 'iconfont';
      }
      .a8::after{
          content: '\e665';
          font-size: 5px;
          font-family: 'iconfont';
      }
    </style>
 
</head>
 
 
<body>
 
        　<div class="b">
            <a href="#" class="a0">新疆</a>
            <a href="#" class="a1">你好,请登录</a>
            <a href="#" class="a2" style="color: #f10215; font-size: 12px;">免费注册</a>
            <div class="b1">|</div>
            <a href="#" class=a3>我的订单</a>
            <div class="b2">|</div>
            <a href="#" class="a4">我的京东</a>
            <div class="b3">|</div>
            <a href="#" class="a5">京东会员</a>
            <div class="b4">|</div>
            <a href="#" class="a6" style="color: #f10215; font-size:12px;">企业采购</a>
            <div class="b5">|</div>
            <a href="#" class="a7">客户服务</a>
            <div class="b6">|</div>
            <a href="#" class="a8">网站导航</a>
            <div class="b7">|</div>
            <a href="#" class="a9">手机京东</a>
            <div class="b8">|</div>
            <a href="#" class="a10">网络无障碍</a>
        </div>
     
</body>
</html>
 

 

 二、问题

　　1. 这样的格式很乱，没有多少逻辑；

　　2. 不容易设置下拉框

posted @ 2022-04-04 13:59  故渊ccx  阅读(112)  评论(0)    收藏  举报