简单博客页面布局

    html代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>博客页面</title>
    6. <link rel="stylesheet" href="样式文件.css">
    7. </head>
    8. <body>
    9. <div class="blog-left">
    10. <div class="blog-avater">
    11. <img src="头像.jpg" alt="">
    12. </div>
    13. <div class="blog-title">
    14. <p>老色胚的博客</p>
    15. </div>
    16. <div class="blog-decription">
    17. <p>老司机开车呜呜呜~</p>
    18. </div>
    19. <div class="blog-link">
    20. <ul>
    21. <li><a href="">关于我</a></li>
    22. <li><a href="">微博</a></li>
    23. <li><a href="">微信公众号</a></li>
    24. </ul>
    25. </div>
    26. <div class="blog-language">
    27. <ul>
    28. <li><a href="">python</a></li>
    29. <li><a href="">java</a></li>
    30. <li><a href="">php</a></li>
    31. </ul>
    32. </div>
    33. </div>
    34. <div class="blog-right">
    35. <div class="blog-article">
    36. <div class="blog-article-title">
    37. <span class="title">开车的重要性</span>
    38. <span class="date">2021-1-9</span>
    39. </div>
    40. <div class="blog-article-decription">
    41. <p>不知不觉就开车</p>
    42. </div>
    43. <div class="blog-article-bottom">
    44. <span>java &nbsp;</span>
    45. <span>python</span>
    46. </div>
    47. </div>
    48. <div class="blog-article">
    49. <div class="blog-article-title">
    50. <span class="title">开车的重要性</span>
    51. <span class="date">2021-1-9</span>
    52. </div>
    53. <div class="blog-article-decription">
    54. <p>不知不觉就开车</p>
    55. </div>
    56. <div class="blog-article-bottom">
    57. <span>java &nbsp;</span>
    58. <span>python</span>
    59. </div>
    60. </div>
    61. <div class="blog-article">
    62. <div class="blog-article-title">
    63. <span class="title">开车的重要性</span>
    64. <span class="date">2021-1-9</span>
    65. </div>
    66. <div class="blog-article-decription">
    67. <p>不知不觉就开车</p>
    68. </div>
    69. <div class="blog-article-bottom">
    70. <span>java &nbsp;</span>
    71. <span>python</span>
    72. </div>
    73. </div>
    74. <div class="blog-article">
    75. <div class="blog-article-title">
    76. <span class="title">开车的重要性</span>
    77. <span class="date">2021-1-9</span>
    78. </div>
    79. <div class="blog-article-decription">
    80. <p>不知不觉就开车</p>
    81. </div>
    82. <div class="blog-article-bottom">
    83. <span>java &nbsp;</span>
    84. <span>python</span>
    85. </div>
    86. </div>
    87. <div class="blog-article">
    88. <div class="blog-article-title">
    89. <span class="title">开车的重要性</span>
    90. <span class="date">2021-1-9</span>
    91. </div>
    92. <div class="blog-article-decription">
    93. <p>不知不觉就开车</p>
    94. </div>
    95. <div class="blog-article-bottom">
    96. <span>java &nbsp;</span>
    97. <span>python</span>
    98. </div>
    99. </div>
    100. <div class="blog-article">
    101. <div class="blog-article-title">
    102. <span class="title">开车的重要性</span>
    103. <span class="date">2021-1-9</span>
    104. </div>
    105. <div class="blog-article-decription">
    106. <p>不知不觉就开车</p>
    107. </div>
    108. <div class="blog-article-bottom">
    109. <span>java &nbsp;</span>
    110. <span>python</span>
    111. </div>
    112. </div>
    113. <div class="blog-article">
    114. <div class="blog-article-title">
    115. <span class="title">开车的重要性</span>
    116. <span class="date">2021-1-9</span>
    117. </div>
    118. <div class="blog-article-decription">
    119. <p>不知不觉就开车</p>
    120. </div>
    121. <div class="blog-article-bottom">
    122. <span>java &nbsp;</span>
    123. <span>python</span>
    124. </div>
    125. </div>
    126. </div>
    127. </body>
    128. </html>

    css样式文件

    1. /*首页样式*/
    2. /*通用样式*/
    3. body{
    4. margin: 0;
    5. background-color: #eeeeee;
    6. }
    7. a{
    8. text-decoration: none;
    9. }
    10. ul{
    11. list-style-type: none;
    12. padding-left: 0;
    13. }
    14. /*左侧样式*/
    15. .blog-left{
    16. float:left;
    17. width: 20%;
    18. height: 100%;
    19. position: fixed;
    20. background-color: #4e4e4e;
    21. }
    22. .blog-avater{
    23. width: 200px;
    24. height: 200px;
    25. border-radius: 50%;
    26. border: 5px solid white;
    27. margin: 20px auto;
    28. overflow: hidden;
    29. }
    30. .blog-avater img{
    31. max-width: 100%;
    32. }
    33. .blog-title,.blog-decription{
    34. font-size: 20px;
    35. color: cornflowerblue;
    36. text-align: center;
    37. }
    38. .blog-link,.blog-language{
    39. font-size: 50px;
    40. }
    41. .blog-link a,.blog-language a{
    42. color: crimson;
    43. }
    44. .blog-link a:hover,.blog-language a:hover{
    45. color: white;
    46. }
    47. .blog-link ul,.blog-language ul{
    48. text-align: center;
    49. margin-top: 100px;
    50. }
    51. /*右侧样式*/
    52. .blog-right{
    53. float: right;
    54. width: 80%;
    55. height: 1000px;
    56. }
    57. .blog-article{
    58. background-color: white;
    59. margin: 10px 40px 10px 10px;
    60. box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
    61. }
    62. .title{
    63. font-size: 30px;
    64. margin-left: 20px;
    65. }
    66. .date{
    67. float: right;
    68. margin: 20px 20px;
    69. font-weight: bolder;
    70. }
    71. .blog-article-title{
    72. border-left: 5px red solid;
    73. }
    74. .blog-article-decription{
    75. margin-left: 30px;
    76. font-size: 20px;
    77. border-bottom: black solid 2px;
    78. }
    79. .blog-article-bottom{
    80. padding-left: 30px;
    81. padding-bottom: 20px;
    82. padding-top: 10px;
    83. }