zoukankan      html  css  js  c++  java
  • 绝对定位给图片四角加上图片修饰

    emm这个题目写的很抽象

    素材:

    就是把两个小图加在大图的两个角,作为修饰

    思路: 把大图放在盒子里,给盒子相对定位,给小图绝对定位。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>绝对定位--图片修饰</title>
        <style>
        div {
            width: 310px;
            height: 190px;
            border: 1px solid lightgray;
            padding: 10px;
            position: relative;
        }
        .top {
            position: absolute;
            top: 0;
            left:0;
        }
        .bottom {
            position: absolute;
            bottom: 0;
            right:0;
        }
        </style>
    </head>
    <body>
        <div>
            <img src="top_tu.gif" class="top">
            <img src="adv.jpg" alt="ad">
            <img src="br.gif" class="bottom">
        </div>
    </body>
    </html>

    效果图:

  • 相关阅读:
    day66
    1
    day65
    BeautifulSoup
    day60
    day59
    day49
    day48
    [S5PV210] PWM
    [S5PV210] Clock
  • 原文地址:https://www.cnblogs.com/sandraryan/p/10868688.html
Copyright © 2011-2022 走看看