当前位置：网站首页>Xiaobai programmer day 8

Xiaobai programmer day 8

2022-07-25 22:20:00 【Too difficult L】

JD top navigation bar establishment

.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> Jingdong top navigation bar </title>

    <link rel="stylesheet" href="./index.css">

    <style>

        body{

            /* Set the font */

            font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;

           

        }

        /* Solve the problem of high collapse */

        .clearfix::before,

        .clearfix::after{

            content:"";

            display:table;

            clear:both;

        }

        /* Set the style of the external container */

        .top-bar-wrapper{

            /* Set width */

            width: 100%;

            /* Set height */

            height: 30px;

            /* Set the background color */

            background-color:#e3e4e5 ;

            /* Set the bottom border */

            border-bottom:1px solid rgb(221,221,221);

            /* Set row height , Center text vertically */

            line-height: 30px;

        }

       

        /* Set the style of the inner container */

        .top-bar{

            /* A fixed width */

            width: 1190px;

            /* Set horizontal center */

            margin:0 auto;

            position: relative;

        }

        /* Set font color */

        .top-bar a,

        .top-bar span,

        .top-bar i{

            color:#999;

            text-decoration:none;

        }

        /* Set the color of the link */

        .top-bar a:hover,

        .top-bar .highlight{

            color:#f10215;

        }

        /* Set up location */

        .location{

            float: left;

        }

        /* Set city list */

        .location .city-list{

            display: none;

            width: 320px;

            height: 436px;

            background-color: white;

            border:1px solid rgb(204,204,204);

            /* Set absolute positioning , Make it not occupy the position of the page */

            position: absolute;

            box-shadow:0 2px 2px rgba(0,0,0,.2);

            z-index:999;

            top:31px;

        }

       

        /* The right example ,hover Be sure to give the parent element */

        .location:hover .city-list{

            display: block;

           

           

        }

        /* to current-city Set margins */

        .current-city{

            padding:0 10px;

            border:1px solid transparent;

            border-bottom: none;

           

            position: relative;

            z-index: 9999;

        }

        /* Set up current-city The effect of moving the mouse in */

        .location:hover .current-city{

            background-color: white;

            border:1px solid rgb(204,204,204);

            border-bottom: none;

            padding-bottom: 1px;    

        }


 

        /* Set up location Icon Font */

        .location .fas{

            color:#f10215;

        }

        /* Set up shortcut */

        .shortcut{

            float: right;

        }

        /* Set up li */

        .shortcut li{

            float: left;

        }

        /* Set the split line */

        .shortcut .line{

            width: 1px;

            height: 10px;

            background-color: #ccc;

            margin:11px 15px 0;

        }

       

    </style>

</head>

<body>

    <!-- Create an external container -->

    <div class="top-bar-wrapper">

        <!-- Create internal container -->

        <div class="top-bar clearfix">

            <!-- Left menu -->

            <div class="location">

                <div class="current-city">

                    <i class="fas fa-map-marker-alt"></i>

                    <a href="javascript:;"> Hefei </a>

                </div>

                                             

                <!-- Set the drop-down box -->

                <div class="city-list">

                </div>

            </div>

            <!-- Set right menu -->

            <ul class="shortcut clearfix">

                <li>

                    <a href="javascript:;"> Hello , Please log in </a>

                    <a class="highlight" href="javascript:;"> Free registration </a>

                </li>

               

                <!-- Split line settings -->

                <li class="line"></li>

                <li><a href="#"> My order </a></li>

               

                <li class="line"></li>

                <li>

                    <a href="#"> My Jingdong </a>

                    <i class="fas fa-angle-down"></i>

                </li>

                <li class="line"></li>

                <li><a href="#"> Jingdong member </a></li>

                <li class="line"></li>

                <li>

                    <a class="highlight" href="#"> Enterprise procurement </a>

                    <i class="fas fa-angle-down"></i>

                </li>

                <li class="line"></li>

                <li>

                    <span> Customer service </span>  

                    <i class="fas fa-angle-down"></i>

                </li>

                <li class="line"></li>

                <li>

                    <span> Website navigation </span>

                    <i class="fas fa-angle-down"></i>

                </li>

                <li class="line"></li>

                <li>

                    <span> Mobile Jingdong </span>

                </li>

            </ul>

        </div>

    </div>

</body>

</html>

.css

/* Remove default style */

* {

    padding: 0;

    margin: 0;

}

a {

    text-decoration: none;

}

li{

    list-style: none;

}

a:hover {

    color: red !important;

}

/* Set the overall style */

#wrap {

    width: 340px;

    height: 350px;

    /* background-color: pink; */

    border-top: 3px solid  #ccc;

    margin: 50px auto;

}

#wrap >h2{

    line-height: 2;

    display: inline-block;

    border-top: 3px solid red;

    margin-top: -3px;

}

#wrap >h2>a{

    color: black;

}

/* Set pictures */

.pic{

    width: 100%;

    height:165px ;

    overflow: hidden;

}

.pic>img{

    width: 100%;

    height: 100%;

   

}

.pic>img:hover{

    transform: scale(1.1);

}

.pic>img:hover+p{

    transform: scale(1);

}

.pic>p{

    /* background-color: red; */

    /* background-color: rgba(0, 0, 0, .5); */

    color: #fff;

    margin-top: -40px;

    margin-left: 30px;

}

#wrap>ul{

    /* margin-left: 20px; */

    margin-top: 15px;

}

#wrap>ul>li{

    line-height: 2;

    /* The first way to write it */

    /* list-style: square;

    color: #888788; */

    width: 100%;

    white-space: nowrap;

    text-overflow: ellipsis;

    /* background-color: royalblue; */

    overflow: hidden;

}

#wrap>ul>li::before{

    /* The second way */

    content: '';

    display: inline-block;

    width: 5px;

    height: 5px;

    margin-right: 10px;

    background-color:#888788 ;

}

#wrap>ul>li>a{

    color: #888788;

    font-size: 14px;

}

#wrap>ul>li>a:hover{

    color: red;

}

 

原网站

版权声明
本文为[Too difficult L]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190520526069.html

边栏推荐

猜你喜欢

随机推荐