明人不说暗话领红包就是支持,领了之后别忘了使用哦!也可以直接领取打赏我!就喜欢听收款的声音!
Q群交流302208680
8888人支持!!!

悬浮图片之上效果实现

其实很简单,就是一个margin-top的问题,但是需要relative的定位方式才能悬在上面。

html部分

<!-- 简介 -->
<div class="intro">
    &nbsp; <!-- 避免margin-top无效 -->
    <div class="intro-container">
        <div class="intro-item">
            <div class="intro-item-icon">
                <img src="/Index/Index/image/innovate/chuangxin.png" alt="">
            </div>
            <div class="intro-item-title">
                草帽的创新
            </div>
            <div class="intro-item-content">
                聚集国内外优秀人才, 聚焦新技术及产品研究, 以开放互联的理念, 驱动企业创新发展。
            </div>
        </div>
        <div class="intro-item">
            <div class="intro-item-icon">
                <img src="/Index/Index/image/innovate/shixianchuangxin.png" alt="">
            </div>
            <div class="intro-item-title">
                实现怎样的创新
            </div>
            <div class="intro-item-content">
                服务全国品牌用户,实现多语言、全球化、全渠道、理想的电商自运营;打造数据标准化,服务标准化的云计算平台,为云生态平台提供坚实的基础。
            </div>
        </div>
        <div class="intro-item">
            <div class="intro-item-icon">
                <img src="/Index/Index/image/innovate/chuangxinbuju.png" alt="">
            </div>
            <div class="intro-item-title">
                创新布局
            </div>
            <div class="intro-item-content">
                战略布局基础云计算、电商云生态,科技大脑、大数据平台四大科技创新方向,为实现草帽电商创新愿景不懈努力。
            </div>
        </div>
    </div>
</div>

css

.intro {
    height: 430px;
    background-color: #FFFFFF;
    .intro-container {
        position: relative; /* 可以让内容悬浮在图片之上 static是position的默认属性,元素会按正常的文档流进行排序,不会受到top,bottom,left,right的影响。 */
        margin:0 auto;
        margin-top:-150px;
        width: 1200px;
        height: 400px;
        //border: 1px solid red;
        display: flex;
        justify-content: space-between; /* 横向中间自动空间 */
        .intro-item {
            width: 380px;
            height: 400px;
            background-color: #FFFFFF;
            box-shadow:0px 13px 32px 0px rgba(0, 0, 0, 0.1);
            .intro-item-icon {
                margin:0 auto;
                margin-top:80px;
                width: 32px;
                height: 32px;
                //background-color: red;
            }
            .intro-item-title {
                font-size: 24px;
                font-weight: bold;
                color:#222222;
                text-align: center;
                margin-top:24px;
            }
            .intro-item-content {
                width: 300px;
                margin: 0 auto;
                margin-top:26px;
                font-size: 18px;
                line-height: 36px;
                color: #666666;
            }
        }
    }
}
posted @ 2020-01-08 17:21  TBHacker  阅读(...)  评论(...编辑  收藏
返回顶部