Code d'implémentation de l'ombre de l'effet de suspension CSS-tutoriel CSS-php.cn

Code d'implémentation de l'ombre de l'effet de suspension CSS

小云云

Libérer： 2018-03-26 09:23:52

original

2856 Les gens l'ont consulté

Cet article présente principalement des informations pertinentes et des exemples de méthodes pour obtenir des ombres à effet flottant en CSS. J'espère qu'il pourra vous aider. Jetons d'abord un coup d'œil aux rendus.

Rendu à réaliser :

Code à implémenter :

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

Copier après la connexion

Entier Code de la 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>
        <p class="container">
            <p class="search">
                <p class="search_left"><img src="img/back.png" /></p>
                <p class="search_input"><input type="text" placeholder="输入商铺名称，车位号，服务设施"></p>
                <p class="search_right"><img src="img/scale_search.png" alt="放大" /></p>
            </p>
        </p>

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

        <p 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>
        </p>
        
        <p class="words">车牌找车</p>
        <p class="servers">
            <ul>
                <li><img src="img/car.png" alt="车牌找车" /></li>
                
            </ul>
        </p>
    </body>

</html>

Copier après la connexion

Recommandations associées :

Implémentation JS du centrage d'image et du partage d'exemples d'effets flottants

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!