当前位置:主页 > 网站建设 > CSS > 正文

css实现悬浮效果的阴影的方法示例

04-08 CSS

本文介绍了css实现悬浮效果的阴影的方法示例,分享给大家,具体如下:

要实现的效果图:

css实现悬浮效果的阴影的方法示例

实现的代码:

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

整个页面的代码:

lt;!DOCTYPE html gt;
lt;htmlgt;
lt;headgt;
        lt;meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /gt;
        lt;meta name=quot;viewportquot; content=quot;width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0quot; /gt;
        
        lt;stylegt;
            .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;
            }
        lt;/stylegt;
        lt;titlegt;高校地图lt;/titlegt;
    lt;/headgt;

    lt;bodygt;
        lt;div class=quot;containerquot;gt;
            lt;div class=quot;searchquot;gt;
                lt;div class=quot;search_leftquot;gt;lt;img src=quot;img/back.pngquot; /gt;lt;/divgt;
                lt;div class=quot;search_inputquot;gt;lt;input type=quot;textquot; placeholder=quot;输入商铺名称,车位号,服务设施quot;gt;lt;/divgt;
                lt;div class=quot;search_rightquot;gt;lt;img src=quot;img/scale_search.pngquot; alt=quot;放大quot; /gt;lt;/divgt;
            lt;/divgt;
        lt;/divgt;

        lt;div class=quot;wordsquot;gt;常用服务设置...lt;/divgt;

        lt;div class=quot;serversquot;gt;
            lt;ulgt;
                lt;ligt;lt;img src=quot;img/stairs.pngquot; alt=quot;手扶电梯quot; /gt;lt;/ligt;
                lt;ligt;lt;img src=quot;img/stairs2.pngquot; alt=quot;手扶电梯quot; /gt;lt;/ligt;
                lt;ligt;lt;img src=quot;img/sex.pngquot; alt=quot;手扶电梯quot; /gt;lt;/ligt;
                lt;ligt;lt;img src=quot;img/entris.pngquot; alt=quot;手扶电梯quot; /gt;lt;/ligt;
                lt;ligt;lt;img src=quot;img/exiy.pngquot; alt=quot;手扶电梯quot; /gt;lt;/ligt;
                lt;ligt;lt;img src=quot;img/moner.pngquot; alt=quot;手扶电梯quot; /gt;lt;/ligt;
            lt;/ulgt;
        lt;/divgt;
        
        lt;div class=quot;wordsquot;gt;车牌找车lt;/divgt;
        lt;div class=quot;serversquot;gt;
            lt;ulgt;
                lt;ligt;lt;img src=quot;img/car.pngquot; alt=quot;车牌找车quot; /gt;lt;/ligt;
                
            lt;/ulgt;
        lt;/divgt;
    lt;/bodygt;

lt;/htmlgt;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

文章来源: 本文由SEO优化博客-壹帆SEO站长Dglake收集编辑 ,转载请保留链接: http://www.s-e-m.cn/CSS/38618.html

博客主人Dglake
草根站长,潭州教育SEO研究中心学员、黄埔俱乐部纵生会员,目前从事网络营销工作,岗位为推广主管;这是新做的博客网站,主要是分享经验文章.
  • 2353文章总数
  • 5510访问次数
  • 建站天数
  • 热门文章