CSS学习笔记第19天--阴影图片

网站建设 · 2020-11-08
3.2.4 阴影图片g3TIT米工网
页面设计过程,第1步构建页面结构
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .pic{
        position:relative;
        background:#CCC;
        margin-right:50px;
        float:left;
    }
    .pic div{
        position:relative;
        border:1px solid #333;
        background:#FFF;
        padding:3px;
    }
    .right{
        top:-6px;
        right:-6px;
    }
    .left{
        top:-6px;
        right:-6px;
    }
    </style>
</head>
<body>
<div class="pic">
    <div class="left"><img src="images/2.jpg" border=0 alt="pic"></div>
</div>
<div class="pic">
    <div class="right"><img src="images/1.jpg" border=0 alt="pic" /></div>
</div>
</body>
</html>