zoukankan      html  css  js  c++  java

  • 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;
    同时使用的效果。
  • 相关阅读:
    【动态规划】数的划分
    【动态规划】开心的小明
    【动态规划】回文字符串
    【动态规划】skiing_深度搜索_动态规划
    【动态规划】最大子串和
    JDBC中 execute 与 executeUpdate的区别
    poj 2449 Remmarguts' Date 求第k短路 Astar算法
    ACM-ICPC 2018 徐州赛区网络预赛 J. Maze Designer 最大生成树 lca
    hdu 2586 How far away ？ 倍增求LCA
    acm模板生成
  • 原文地址：https://www.cnblogs.com/wumingxiaoyao/p/6047424.html
Copyright © 2011-2022 走看看