HTML開(kāi)發(fā)博客之詳情頁(yè)設(shè)計(jì)（二）
內(nèi)容欄
創(chuàng)建一個(gè)內(nèi)容框的DIV，定義id選擇器為blog-content。
<div id="blog-content"> <p class="siztitle">測(cè)試標(biāo)題測(cè)試標(biāo)題測(cè)試標(biāo)題測(cè)試標(biāo)題測(cè)試標(biāo)題</p> <p style="margin-top: 50px;color: gray" ><img src="/upload/course/000/000/004/58170f99f2430105.png" >測(cè)試<img src="/upload/course/000/000/004/58170fbda3f34844.png" style="margin-left: 20px">2016/10/31</p> <p class="rev"style="color:gray;">簡(jiǎn)介</p> <p class="content">測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容測(cè)試內(nèi)容</p> </div>
然后對(duì)css樣式進(jìn)行調(diào)整。
#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;
}增加邊框，調(diào)整字體的大小顏色，修改后的效果如下圖所示
我們的內(nèi)容欄目就完成了。
