Reka bentuk halaman butiran blog pembangunan HTML (2)

Lajur kandungan

Buat DIV kotak kandungan dan tentukan pemilih id sebagai kandungan blog.

<div id="blog-content">
    <p class="siztitle">测试标题测试标题测试标题测试标题测试标题</p>
    <p style="margin-top: 50px;color: gray" ><img src="/upload/course/000/000/004/58170f99f2430105.png" >测试<img src="/upload/course/000/000/004/58170fbda3f34844.png" style="margin-left: 20px">2016/10/31</p>
    <p class="rev"style="color:gray;">简介</p>
    <p class="content">测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容</p>
</div>

Kemudian laraskan gaya css.

#blog-content{
    width: 940px;
    overflow: hidden;
    padding: 30px;
    background-color: white;
    margin: 0 auto;
    border-top: 2px solid #e2b709;
    margin-top: 30px;
}
.siztitle{
    font-size: 28px;
    text-align: center;
}
#blog-content p{
    color: black;
}
#blog-content img{
    width: 20px;
    margin-right: 10px;
    vertical-align: middle;
}
.rev{
    border-left: 2px solid #e2b709;
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
    padding-left: 10px;
}
.content{
    margin-top: 20px;
    line-height: 28px;
}

Tambah jidar, laraskan saiz dan warna fon, dan kesan yang diubah suai adalah seperti yang ditunjukkan di bawah

Lajur kandungan kami sudah lengkap.