范仁义css3课程---30、层模型小实例

一、总结

一句话总结：

层模型在日常开发中还是用的比较多的，比如相对定位配合绝对定位来做一些元素的精确定位，比如固定定位做导航和回到顶部的一些按钮等等

二、层模型小实例

博客对应课程的视频位置：30、层模型小实例
https://www.fanrenyi.com/video/10/70

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>层模型小实例</title>
 6     <style>
 7         .img_box{
 8             width: 400px;
 9             height: 300px;
10             border: 1px solid red;
11             margin: 30px auto;
12             position: relative;
13         }
14         .img_item{
15             width: 400px;
16             height: 300px;
17         }
18         .author{
19             position:absolute;
20             left: 10px;
21             top: 10px;
22             background-color: orange;
23         }
24         .lesson_num{
25             position:absolute;
26             right: 10px;
27             top: 10px;
28             background-color: #ff4f81;
29         }
30         .label {
31             display: inline;
32             padding: .2em .6em .3em;
33             font-size: 16px;
34             font-weight: 700;
35             line-height: 1;
36             color: #fff;
37             text-align: center;
38             white-space: nowrap;
39             vertical-align: baseline;
40             border-radius: .25em;
41         }
42     </style>
43 </head>
44 <body>
45 <div class="img_box">
46     <img class="img_item" src="../imgs/aa.gif" alt="">
47     <div class="info_box">
48         <div class="label author">范仁义</div>
49         <div class="label lesson_num">1课时</div>
50     </div>
51 </div>
52 </body>
53 </html>