要实现的效果图：

图片.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. 【Swing】一点基础操作

    之前实训的老师不推荐swing就没有学...然而学校老师又是另一种态度...加上学长作比赛用swing...学一下吧 1.将窗体放在中间 jdk1.4之后setLocationRelativeTo(o ...

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

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

  3. 【t038】&&【u214】金字塔

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 小X来到一个雄奇的金字塔挖宝,但是这是一座被诅咒的金字塔,小X必须马上逃离这里,否则小X就会被埋在金字 ...

  4. opencv中的Java库

    opencv中有一个用Java编写的库,opencv2.4.4以上,在opencv解压包里路径:opencv/build/java/opencv.jar,再依据用户计算机位数选择,假设是32位计算机, ...

  5. HDU1023 Train Problem II【Catalan数】

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1023 题目大意: 一列N节的火车以严格的顺序到一个站里.问出来的时候有多少种顺序. 解题思路: 典型 ...

  6. launcher- 第三方应用图标替换

    有时候我们感觉第三方应用的icon不美观,或者跟我们主题风格不一致,这时候我们希望换成我们想要的icon,那我们可以这么做(以更换QQ应用icon为例): 1.首先我们当然要根据自己的需要做一张替换i ...

  7. Exploring Micro-frameworks: Spring Boot--转载

    原文地址:http://www.infoq.com/articles/microframeworks1-spring-boot Spring Boot is a brand new framework ...

  8. Java学习笔记三.2

    5.继承 //Java中所有对象都显式/隐式的继承子Object类 class fu{ fu(){ System.out.println("fu..."+getNum()); sh ...

  9. 关于EJB--实体Bean的BMP和CMP选择

    EJB有两种主要类型BMP(Bean managed persistence )和CMP(Container managed persistence ),这两种类型各有优缺点. BMP是在Bean中完 ...

  10. 移动mm 话费支付接入过程（ane）

    下面记录移动mm 话费支付接入的过程 1.强联网.弱联网差别.sdk是否有区分?用户体验部分由什么不同和差异? 差别在于强联网是网络通道(wifi/gprs/3g),弱联网是走短信通道,用户层面差异在 ...