HTML开发博客之详情页设计(...LOGIN

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;
}

增加边框,调整字体的大小颜色,修改后的效果如下图所示

QQ截图20161101163044.png

我们的内容栏目就完成了。

下一节
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交重置代码
章节课件