Maison >interface Web >tutoriel CSS >Code d'implémentation de l'ombre de l'effet de suspension CSS
Code d'implémentation de l'ombre de l'effet de suspension CSS
- 小云云original
- 2018-03-26 09:23:522844parcourir
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 ;
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>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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Taille flexible de la technologie de mise en page adaptative CSS3Article suivant：Taille flexible de la technologie de mise en page adaptative CSS3