简单博客页面布局

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