zoukankan      html  css  js  c++  java
  • css: position为relative位置调整使用

    父元素为块级元素,子元素inline-block,因为行高而对不整齐调整位置

    <div class="box-scan inline">
                                <span>扫描到手机</span>
                                <div class="scan-to-mobile clearfix">
                                    <span class="top-arrow">
                                        <span></span>
                                    </span>
                                    <div class="scan-to-mobile-desc fl">
                                        <p class="title">扫描到手机 新闻随时看</p>
                                        <p>
                                            <span class="desc">扫一扫,用手机看文本<br>更加方便分享给朋友</span>
                                            <i></i>
                                        </p>
                                    </div>
                                    <div class="scan-to-mobile-qrcode fr">
                                        <img src="../images/consult_qrcode.png" alt="" width="118px" height="118px">
                                    </div>
                                </div>
                            </div>

    css:

    .box-scan {
        position: relative;
        cursor: pointer;
    }
    
    .box-scan .scan-to-mobile {
        display: none;
        position: absolute;
        top: 30px;
        right: 0;
        width: 400px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 20px;
        background-color: #fff;
    }
    
    .box-scan .scan-to-mobile .top-arrow {
        position: absolute;
        right: 26px;
        top: -16px;
        border-style: solid;
        border-color: transparent transparent #ddd transparent;
        border-width: 8px;
    }
    
    .box-scan .scan-to-mobile .top-arrow span {
        position: absolute;
        left: -8px;
        top: -7px;
        border-style: solid;
        border-color: transparent transparent #fff transparent;
        border-width: 8px;
    }
    
    .box-scan .scan-to-mobile .scan-to-mobile-desc .title {
        font: 18px/30px 'Microsoft Yaahei';
        color: #ff9900;
        margin-bottom: 20px;
        text-align: left;
    }
    .box-scan .scan-to-mobile .scan-to-mobile-desc .desc {
        display: inline-block;
        line-height: 24px;
        text-align: left;
    }
    .box-scan .scan-to-mobile .scan-to-mobile-desc i {
        position: relative;
        top: 5px;
        display: inline-block;
        width: 63px;
        height: 43px;
        background: url("../images/computer_mobile_icon.png");
    }
    .box-scan .scan-to-mobile .scan-to-mobile-qrcode {
        width: 118px;
        height: 118px;
        overflow: hidden;
    }
  • 相关阅读:
    jenkins 常用插件和配置项介绍和使用
    spring 3 mvc hello world + mavern +jetty
    七牛是如何搞定每天500亿条日志的 转
    Mysql 索引 转载
    互联网运营:一场怡红院中的战争 转
    hadoop-2.7.0
    flume
    Storm0.9.4安装
    Ubuntu里面的安装命令总结
    Apache Kafka 分布式消息队列中间件安装与配置 转载
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/13175794.html
Copyright © 2011-2022 走看看