要实现的效果图：

图片.png

实现的代码：

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

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

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

整个页面的代码：

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

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等100G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880
福利二：微信小程序入门与实战全套详细视频教程


原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

css实现悬浮效果的阴影的更多相关文章

  1. css 实现悬浮效果

    <!DOCTYPE html><html><head>  <meta charset="UTF-8">    <title&g ...

  2. 纯CSS实现的右侧底部简洁悬浮效果

    我们见过很多页面右侧浮动效果,最早有QQ联系面板,对联广告等,大多数都是基于Javascript实现的动态效果,今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果. HTML 我们希望悬浮效 ...

  3. [css]演示：纯CSS实现的右侧底部简洁悬浮效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  4. html通过css,js实现div悬浮效果总汇，如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  5. 利用target的特性，可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  6. 使用Three.js实现神奇的3D文字悬浮效果

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在 Three.js Journey 课程示例中,提供了一个使用 Thre ...

  7. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  8. 第七十六节，css颜色和透明度,盒子阴影和轮廓,光标样式

    css颜色和透明度,盒子阴影和轮廓,光标样式 学习要点: 1.颜色和透明度 2.盒子阴影和轮廓 3.光标样式 一．颜色和透明度 颜色我们之前其实已经用的很多了,比如字体颜色.背景颜色.边框颜色.但除了 ...

  9. 【动画消消乐】HTML+CSS 白云飘动效果 072

    前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出-   自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...

随机推荐

  1. groups---输出指定用户所在组的组成员，

    groups命令   groups命令在标准输入输出上输出指定用户所在组的组成员,每个用户属于/etc/passwd中指定的一个组和在/etc/group中指定的其他组. 语法 groups(选项)( ...

  2. POJ——T 2406 Power Strings

    http://poj.org/problem?id=2406 Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 50627   ...

  3. HDU 3487(Play with Chain-Splay)[template:Splay]

    Play with Chain Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  4. Problem C: Celebrity Split

    题目描写叙述 Problem C: Celebrity Split Jack and Jill have decided to separate and divide their property e ...

  5. JavaScript的子集和超集

    1.JavaScript子集 JavaScript子集的定义大部分都是出于安全考虑,仅仅有使用这门语言的一个安全的子集编写脚本,才干让代码运行得更安全.更稳定.比方怎样更安全地运行一段由不可信第三方提 ...

  6. ip地址个数的计算

    一个IP地址,却关联太多的知识 二进制与 8 比特 电脑中显示出来的数字是 10 进制的,键盘的每一个键都由一个 8 位的二进制编码,所以 1 字节等于 8 比特.对数字而言,1 的二进制是 0000 ...

  7. softInputMode- 软件盘的设置

    今天遇到一个问题,就是软件盘弹出来以后,会把之前的布局界面整个的挤到屏幕的外面,而且按下返回建以后,这个软件盘占据的空间会留下一个黑色的背景.在网上查找了很多的方法,刚开始都是说,如下方法 <a ...

  8. 1.22 Python基础知识 - 正则表达式

    Python正则表达式 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re ...

  9. golang filepath.Walk遍历指定目录下的所有文件

    package main import ( "fmt" "os" "path/filepath" ) func walkFunc(path ...

  10. 关于Promise详解

    异步回调 回调地狱 在需要多个操作的时候,会导致多个回调函数嵌套,导致代码不够直观,就是常说的回调地狱 并行结果 如果几个异步操作之间并没有前后顺序之分,但需要等多个异步操作都完成后才能执行后续的任务 ...