HTML開發部落格之詳情頁設計（二）
內容列
建立一個內容框的DIV，定義id選擇器為blog-content。
<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>
然後對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;
}增加邊框，調整字體的大小顏色，修改後的效果如下圖所示
我們的內容欄就完成了。
