WEB之CSS伪类

利用伪类清楚浮动：

代码：
  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>haha</title>
  6. <style>
  7. .left{
  8. float: left;
  9. }
  10. .clearfix:after{
  11. content:'.';
  12. clear: both;
  13. display: block;
  14. visibility: hidden;
  15. height:0;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <divstyle="background-color: red"class="clearfix">
  21. <divclass="left"style="height:100px;background-color: green">1</div>
  22. <divclass="left">2</div>
  23. </div>
  24. </body>
  25. </html>
效果：
 

自定义小尖角：

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title></title>
  6. <style>
  7. .icon{
  8. display:inline-block;
  9. border-top:15px solid transparent;
  10. /*transparent 表示透明*/
  11. border-right:15px solid red;
  12. border-bottom:15px solid transparent;
  13. border-left:15px solid transparent;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <divclass="icon"></div>
  19. </body>
  20. </html>
 

后台管理布局一：

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>后台管理布局一</title>
  6. <style>
  7. /*去掉默认的边框*/
  8. body{
  9. margin:0;
  10. }
  11. /*工具栏样式*/
  12. .pg-header{
  13. height:48px;
  14. background-color:#9a9a9a;
  15. }
  16. /*菜单栏样式*/
  17. .pg-body .body-menu{
  18. position: absolute;
  19. top:48px;
  20. left:0;
  21. bottom:0;
  22. width:200px;
  23. background-color:#1abc9c;
  24. }
  25. /*内容样式*/
  26. .pg-body .body-content{
  27. position: absolute;
  28. top:48px;
  29. left:200px;
  30. right:0;
  31. background-color:#8a6d3b;
  32. /*bottom: 0;*/
  33. /*overflow: auto;*/
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <divclass="pg-header"></div>
  39. <divclass="pg-body">
  40. <divclass="body-menu"></div>
  41. <divclass="body-content">
  42. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  43. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  44. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  45. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  46. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  47. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  48. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  49. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  50. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  51. </div>
  52. </div>
  53. <divclass="pg-footer"></div>
  54. </body>
  55. </html>

后台管理布局二：

  1. <!DOCTYPE html>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>后台管理布局二</title>
  6. <style>
  7. body{
  8. margin:0;
  9. }
  10. .pg-header{
  11. height:48px;
  12. background-color:#2459a2;
  13. }
  14. .pg-body .body-menu{
  15. position: absolute;
  16. top:48px;
  17. left:0;
  18. bottom:0;
  19. width:200px;
  20. background-color: red;
  21. }
  22. .pg-body .body-content{
  23. position: absolute;
  24. top:48px;
  25. left:210px;
  26. right:0;
  27. background-color: green;
  28. bottom:0;
  29. overflow:auto;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <divclass="pg-header"></div>
  35. <divclass="pg-body">
  36. <divclass="body-menu"></div>
  37. <divclass="body-content">
  38. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  39. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  40. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  41. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  42. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  43. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  44. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  45. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  46. xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>xiaoyao<br/>
  47. </div>
  48. </div>
  49. <divclass="pg-footer"></div>
  50. </body>
  51. </html>
从上面两个例子可以体会
bottom: 0;
overflow: auto;
同时使用的效果。