要实现的效果图：

图片.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. MATLAB 最优化计算 （二）

    matlab 程序设计 1, for start:increment:end  若默认步长为1,则为 for start:end ———— end while  condition ————  end ...

  2. Netty系列之Netty编解码框架分析

    1. 背景 1.1. 编解码技术 通常我们也习惯将编码(Encode)称为序列化(serialization),它将对象序列化为字节数组,用于网络传输.数据持久化或者其它用途. 反之,解码(Decod ...

  3. C/C++(指针数组)

    指针数组 指针数组的本质是数组,数组指针的本质是指针 一个数组中的各个元素都是字符指针,即为字符指针数组,或者指针数组. int arr[] = {1,2,23,45,6};//整形数组 char c ...

  4. JavaScript笔记（5）

    1.return 跳出当前函数 返回一个结果 <script> //return可以跳出当前函数 所以return写在函数的最后一行 function out() { return fun ...

  5. HDU 4107 Gangster

    Gangster Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 4 ...

  6. 开机显示 invalid partition table

    解决方法:进入你的BIOS, 然后设置你装系统的盘(SSD,或者磁盘)为第一启动位置处即可. 具体可参考文章电脑开机出现Invalid Partition Table怎么修复?解决

  7. Android线程池(二)——ThreadPoolExecutor及其拒绝策略RejectedExecutionHandler使用演示样例

    MainActivity例如以下: package cc.vv; import java.util.concurrent.LinkedBlockingQueue; import java.util.c ...

  8. ContentValues的使用

    什么是 ContentValues类? ContentValues类和 Hashtable比较类似,它也是负责存储一些名值对,但是它存储的名值对当中的名是一个String类型,而值都是基本类型. 插入 ...

  9. Android线程间通讯的几种方式

    1.runOnUiThread(Runnable)              在子线程中直接使用该方法,可以更新UI runOnUiThread(new Runnable(){//更新UI       ...

  10. js面向对象3-继承

    一.了解继承  首先我们一起了解下js中继承,其实继承就是后辈继承前辈的属性和方法. 二.继承的方法 从父类继承属性和方法 这是对象冒充的方法,模仿java的继承方法.实现的原理是,通过改变父类的执行 ...