Implementierungscode für den CSS-Suspension-Effekt-Schatten-CSS-Tutorial-php.cn

Implementierungscode für den CSS-Suspension-Effekt-Schatten

小云云

Freigeben： 2018-03-26 09:23:52

Original

2854 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen und Beispiele für Methoden zum Erzielen schwebender Effektschatten in CSS vorgestellt. Ich hoffe, er kann Ihnen helfen. Werfen wir zunächst einen Blick auf die Renderings.

Zu erreichendes Rendering:

Zu implementierender Code:

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

Nach dem Login kopieren

Gesamt Code der Seite:

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen:

JS-Implementierung der Bildzentrierung und des Floating-Effekt-Beispielaustauschs

Das obige ist der detaillierte Inhalt vonImplementierungscode für den CSS-Suspension-Effekt-Schatten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!