zoukankan      html  css  js  c++  java
  • 关于使用栅格系统加图片定位展示商品

    栅格+定位使图片高于文档流

    用来展示图片不规则的定位,仅供参考!(row和col-4是参考bootstrap栅格系统做的)

    html:

    <div class="ui container">
            <div class="row r1">
                <div class="col-4 col-md-4 c1">
                    <div class="pt">
                        <img src="images/图层 2.png" alt="">
                    </div>
                </div>
                <div class="col-4 col-md-4 c2"></div>
            </div>
            <div class="row">
                <div class="col-4 col-md-4 c2"></div>
                <div class="col-4 col-md-4 c1">
                    <div class="pt">
                        <img src="images/图层 2.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    

      

    css

    body {
                background-color: #e6e9eb;
            }
    
            .ui {
                margin-top: 100px;
            }
    
            .row {
                height: 400px;
                margin-top: 1px;
                margin-bottom: 140px;
                background-color: #FFF;
            }
    
            .c1 {
                position: relative;
                height: 20vw;
            }
    
            .c2 {
                height: 20vw;
                background-color: blue;
            }
    
            .pt {
                position: absolute;
                left: 0;
                bottom: 30px;
                padding-left: 20px;
                padding-bottom: 20px;
                height: 100%;
                 90%;
    
            }
    

      

    二:栅格布局,左侧图片,右侧li列表,鼠标悬停宽度增加,颜色改变,伸缩

    html代码

    <div class="row">
            <div class="col-5">
                <div class="ig">
                    <img src="images/图层 22.png" alt="">
                </div>
            </div>
            <div class="col-3">
                <ul>
                    <li>第一个实例</li>
                    <li><a href="">第二个实例</a></li>
                    <li>第三个实例</li>
                </ul>
            </div>
        </div>
    

      css代码

    ul li {
                float: right;
                 35vw;
                height: 10vw;
                line-height: 10vw;
                text-align: center;
                border: 2px solid #000;
                background-color: darkblue;
                vertical-align: middle;
            }
            .ig {
                text-align: right;
            }
            ul li a {
                display: inline-block;
                 100%;
                height: 100%;
                vertical-align: middle;
            }
            ul li:hover {
                 40vw;
                background-color: #fff;
            }
    

      

    效果图:

    栅格分两列,左列图片,右列文字描述

  • 相关阅读:
    python学习笔记- day10-4【问题:为什么python的多线程不能利用多核CPU?】
    python学习笔记-day10-3【日志模块logging】
    python学习笔记-day10-2【多进程,多线程】
    python学习笔记-day10-01-【 类的扩展: 重写父类,新式类与经典的区别】
    day12-HTML基础之DOM操作
    day12-HTML基础之CSS
    HTTP原理
    day12-HTML
    day11-Jenkins
    day11-python学习笔记(二十六)yaml,ddt
  • 原文地址:https://www.cnblogs.com/chalkbox/p/12616482.html
Copyright © 2011-2022 走看看