京东上侧引导条（含下拉窗口）

最新推荐文章于 2024-05-08 18:28:38 发布

DDD何

最新推荐文章于 2024-05-08 18:28:38 发布

阅读量98

点赞数

文章标签： html css3

本文链接：https://blog.csdn.net/a15800585396/article/details/118672811

版权

京东网页样式

成果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东</title>
   <link rel="stylesheet" href="./reset.css">
   <link rel="stylesheet" href="../summer7/fa/css/all.css">
    <style>
 @font-face {
  font-family: 'iconfont';  /* Project id 2665067 */
  src: url('//at.alicdn.com/t/font_2665067_yeteqkufc48.woff2?t=1625926852312') format('woff2'),
       url('//at.alicdn.com/t/font_2665067_yeteqkufc48.woff?t=1625926852312') format('woff'),
       url('//at.alicdn.com/t/font_2665067_yeteqkufc48.ttf?t=1625926852312') format('truetype');
}
       ul{
            height: 30px;
            background-color: rgba(96, 96, 96, 0.3);

        }
    
    
        .zuo a::before{
           
            content: '\e62b';
            font-family: 'iconfont';
            color: red;
            font-size:15px;
        }
        .zuo{
             float:left;
             position: relative;
           

             z-index:1;
             margin-left: 80px;
        }
        .you{
            float: right;
          
        }
        li a{
            display: block;
            text-decoration: none;
            color:grey;
            font-size: 12px;
            line-height: 30px;
            text-align:center;
            padding-right: 20px ;
            font-family:'宋体',monospace;
           
            
            
            margin-left: 30px;
        
        }
        li a:hover{
            color: red;
        }
    
        ul .you:nth-child(2) a{
        margin-right: 70px;
      }
      ul .you:nth-child(8) a{
        color: red;
      }
      ul .you:nth-child(16) a{
          color: red;
      }
      ul .you:nth-child(17) a{
         margin-right: -40px;
         width: 70px;
      }
      ul .you:nth-child(8) a::after,ul .you:nth-child(12) a::after, ul .you:nth-child(6) a::after,ul .you:nth-child(4) a::after
      {
        content:'\e681';
        font-family: 'iconfont';
        color: gray;
       
    }
   li:nth-last-of-type(4):hover,li:nth-of-type(1):hover, li:nth-of-type(4):hover, li:nth-of-type(3):hover,li:nth-of-type(5):hover {
       border:1px solid white;
       border-bottom: none;
       padding-bottom: 0px;
    background-color: white;
   }
   
    span{
        
        float: right;
        color:gray;
        font-size:5px;
            line-height: 30px;
    }
    div{
        /* display: none; */
        display: none;
        width: 320px;
        height: 439px;
        background-color: white;
        border: 1px black solid;
        border-top: gray;
        position:absolute;
      
        left: -1px;
        top:29px;
        
       
        
    }

    div span{
        color:transparent;
    }
   .zuo:hover div{
       display: block;
       
    }

    </style>
    
</head>

<body>
   <ul>
       <li class="zuo">
        <a class="sh" href="#"> 上海</a>
        <div>上海 北京</div>
        
       </li>
     
       
       <li class="you">
        <a href="#">手机京东</a>
       
          </li>
          <span>|</span>
       <li class="you">
        <a href="#">网站导航</a>
      
       </li>
       <span>|</span>
       <li class="you">
        <a href="#">客户服务</a>
          </li>
          <span>|</span>
       <li class="you">
        <a href="#">企业采购</a>
         </li>
         <span>|</span>
       <li class="you">
        <a href="#">京东会员</a>
       </li>
       <span>|</span>
       <li class="you">
        <a href="#">我的京东</a>
    </li>
    <span>|</span>
       <li class="you">
        <a href="#">我的订单</a> 
     </li>
     <span>|</span>
       <li class="you">
        <a href="#">免费注册</a>
           </li>
           
       <li class="you">
        <a href="#"> 你好,请登录</a>
     </li>
    </ul>
</body>
</html>

DDD何

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
京东上侧引导条（含下拉窗口）

京东网页样式成果：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g..
复制链接

扫一扫