范仁义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>