css implements the shadow of the floating effect

Renderings to be achieved:

picture.png

Implemented code:

-webkit-box-shadow:0px 3px 3px #c8c8c8 ;
-moz-box-shadow:0px 3px 3px #c8c8c8 ;
box-shadow:0px 3px 3px #c8c8c8 ;

Code for the entire page:

<!DOCTYPE html >
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
        
        <style>
            .search {
                height: 46px;
                border: 1px solid #F0F1F1;
                border-radius: 25px;
                margin: 0 20px;
                
-webkit-box-shadow:0px 3px 3px #c8c8c8 ;
-moz-box-shadow:0px 3px 3px #c8c8c8 ;
box-shadow:0px 3px 3px #c8c8c8 ;
            }
            
            .search_left {
                float: left;
                margin: 5px 7px 5px 11px;
                width: 35px;
                height: 34px;
                border-radius: 50px;
                background: red;
                text-align: center;
                line-height: 42px;
            }
            
            .search_left img {
                width: 60%;
                height: 60%;
            }
            
            .search_input {
                float: left;
            }
            
            .search_input input {
                border: none;
                height: 30px;
                margin-top: 5px;
            }
            
            .search_right {
                float: right;
                width: 20px;
                height: 20px;
                margin: 9px 17px 5px 10px;
            }
            
            .search_right img {
                width: 100%;
                height: 100%;
            }
            
            .words {
                color: #D1D1D1;
                font-size: 12px;
                margin-top: 21px;
                margin-left: 30px;
            }
            
            .servers {
                overflow: auto;
            }
            
            .servers ul {
                overflow: auto;
                padding-left: 16px;
            }
            
            .servers ul li {
                list-style: none;
                background: #f6f6f9;
                float: left;
                width: 47px;
                height: 47px;
                text-align: center;
                margin: 5px 10px;
            }
            
            .servers ul li img {
                width: 60%;
                height: 60%;
                margin-top: 9px;
            }
        </style>
        <title>高校地图</title>
    </head>

    <body>
        <div class="container">
            <div class="search">
                <div class="search_left"><img src="img/back.png" /></div>
                <div class="search_input"><input type="text" placeholder="输入商铺名称，车位号，服务设施"></div>
                <div class="search_right"><img src="img/scale_search.png" alt="放大" /></div>
            </div>
        </div>

        <div class="words">常用服务设置...</div>

        <div class="servers">
            <ul>
                <li><img src="img/stairs.png" alt="手扶电梯" /></li>
                <li><img src="img/stairs2.png" alt="手扶电梯" /></li>
                <li><img src="img/sex.png" alt="手扶电梯" /></li>
                <li><img src="img/entris.png" alt="手扶电梯" /></li>
                <li><img src="img/exiy.png" alt="手扶电梯" /></li>
                <li><img src="img/moner.png" alt="手扶电梯" /></li>
            </ul>
        </div>
        
        <div class="words">车牌找车</div>
        <div class="servers">
            <ul>
                <li><img src="img/car.png" alt="车牌找车" /></li>
                
            </ul>
        </div>
    </body>

</html>

Welfare at the end of the sentence:

Welfare 1: A collection of 100G resources such as front-end, Java, product manager, WeChat applet, Python, etc. is released: https://www.jianshu.com/p/e8197d4d9880
Welfare 2: Wechat applet introduction and a full set of detailed video tutorials

Author of the original text: Girl Qi Che
Original link: https://www.jianshu.com/u/05f416aefbe1
It is not easy to create, please inform us if you reprint it

The front-end girl born in the 90s, loves programming, loves operation, and loves tossing.
Insist on summarizing the technical problems encountered in the work, insist on recording what you think and see in the work, and welcome everyone to discuss and exchange.

css implements the shadow of the floating effect

Welfare at the end of the sentence:

Guess you like