简单博客页面布局

    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样式文件

    /*首页样式*/

/*通用样式*/
body{
    margin: 0;
    background-color: #eeeeee;
}
a{
    text-decoration: none;
}
ul{
    list-style-type: none;
    padding-left: 0;
}
/*左侧样式*/
.blog-left{
    float:left;
    width: 20%;
    height: 100%;
    position: fixed;
    background-color: #4e4e4e;
}
.blog-avater{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 5px solid white;
    margin: 20px auto;
    overflow: hidden;
}
.blog-avater img{
    max-width: 100%;
}
.blog-title,.blog-decription{
    font-size: 20px;
    color: cornflowerblue;
    text-align: center;
}
.blog-link,.blog-language{
    font-size: 50px;
}
.blog-link a,.blog-language a{
    color: crimson;
}
.blog-link a:hover,.blog-language a:hover{
    color: white;
}
.blog-link ul,.blog-language ul{
    text-align: center;
    margin-top: 100px;
}
/*右侧样式*/
.blog-right{
    float: right;
    width: 80%;
    height: 1000px;
}
.blog-article{
    background-color: white;
    margin: 10px 40px 10px 10px;
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
.title{
    font-size: 30px;
    margin-left: 20px;

}
.date{
    float: right;
    margin: 20px 20px;
    font-weight: bolder;
}
.blog-article-title{
    border-left: 5px red solid;
}
.blog-article-decription{
    margin-left: 30px;
    font-size: 20px;
    border-bottom: black solid 2px;
}
.blog-article-bottom{
    padding-left: 30px;
    padding-bottom: 20px;
    padding-top: 10px;
}