范仁义css3课程---12、盒子模型小实例

一、总结

一句话总结：

如果我们看到想要的样式，可以在谷歌浏览器中，检查元素，可以得到元素的html代码和元素的样式，这样就可以很方便快捷的学习和做出一样的样式

1、如何学习（做出）看到的好看的样式？

在谷歌浏览器中，检查元素，可以得到元素的html代码和元素的样式，这样就可以很方便快捷的学习和做出一样的样式

二、盒子模型小实例

博客对应课程的视频位置：12、盒子模型小实例
https://www.fanrenyi.com/video/10/43

做我网站页面上的这样一个小实例

1、如何学习（做出）看到的好看的样式？

在谷歌浏览器中，检查元素，可以得到元素的html代码和元素的样式，这样就可以很方便快捷的学习和做出一样的样式

三、课程代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>盒子模型小实例</title>
 6     <link rel="stylesheet" href="css/font-awesome.min.css">
 7     <style>
 8         body{
 9             background-color: #f8f9fa;
10         }
11         .box1{
12             box-shadow: 7px 7px 10px 0 rgba(76, 110, 245, .1);
13             text-align: center;
14             padding: 15px;
15             background-color: #fff;
16             margin: 30px;
17         }
18         .fry_card_icon{
19             color: #ff4f81;
20             text-align: center;
21             font-size: 30px;
22             margin-bottom: 10px;
23         }
24         .fry_card_title{
25             font-size: 20px;
26             font-weight: 600;
27             color: #333;
28             letter-spacing: 1px;
29             margin-bottom: 10px;
30         }
31         .fry_card_content{
32             font-size: 15px;
33             color: #777;
34             margin-bottom: 5px;
35         }
36 
37     </style>
38 </head>
39 <body>
40 <div class="box1">
41     <span class="fa fa-building fa-fw fry_card_icon" style=""></span>
42     <div class="fry_card_title" style="">课程</div>
43     <p class="fry_card_content" style="">大量精品编程课程</p>
44 </div>
45 </body>
46 </html>