写一个京东最顶部的导航条

效果图 如下:
在这里插入图片描述
下拉框的效果:
写一个京东最顶部的导航条_第1张图片
鼠标移入以后会有一个框显示出来

结构代码

    
    "en">
    
        "UTF-8">
        "viewport" content="width=device-width, initial-scale=1.0">
        京东顶部的导航条
        
        "stylesheet" href="./css/reset.css">
        
        "stylesheet" href="./css/all.css">

        
    
    
        
        
"out_wapper clear">
"inner_wapper">
"location">
"current-city"> "fas fa fa-map-marker-alt" style="color: #F10215;"> "#">北京
"city_list">

这个实例需要注意的是 当使用绝对定位的时候 子元素会脱离父元素(脱离文档流)需要解决高度塌陷问题

/*直接利用伪元素来解决这个问题  那个元素塌陷就添加到那个元素上*/
.clear::after,
            .clear::before{
                content: '';
                display: table;
                clear: both;
            }
            

下拉框效果需要注意的是 一定是绑定他们的父元素

还有一个省略号的效果
在这里插入图片描述
先吧这个行内元素变成一个块元素 向右浮动
省略号效果代码直接写上就OK

.list .free{
                color: #F10215;
                width: 40px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: block;
                float: right;
                padding: 0 5px;  
            }
            /*4 5 6 7 行是主要代码*/

你可能感兴趣的:(html,css,html,css3)