结业项目-个人博客页面（2）

最新推荐文章于 2024-06-16 00:46:49 发布

Ivy_ZW

最新推荐文章于 2024-06-16 00:46:49 发布

阅读量1.7k

点赞数

分类专栏： html css 文章标签： html css

本文链接：https://blog.csdn.net/Ivy_ZW/article/details/70662382

版权

html 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

第二部分

博客页面中某篇文章点进去后的详情。

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结业</title>
    <link rel="stylesheet" type="text/css" href="content.css">
</head>
<body>
    <div id="header">
        <div id="header_content">
            <div class="logo">
                <a href=""><img src="images/logo.PNG"></a>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">浏览</a></li>
                    <li><a href="">关于我</a></li>
                    <li><a href="">留言</a></li>
                    <li><a href="">更多</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="t">
    </div>
    <div id="content">
        <div class="left">
            <h2>CSS盒子模型</h2>
            <h4>2017-4-24&nbsp;&nbsp;张2V</h4>
            <div class="main">
                <p>&nbsp;&nbsp;CSS盒子模型(Box Model)规定了元素框处理元素内容、内边距、边框和外边距的方式。</p>
                <img src="images/box.gif">
                <p>&nbsp;&nbsp;元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。</p>
                <p><span>注意：</span>背景应用于由内容和内边距、边框组成的区域。</p>
            </div>  
        </div>
        <div class="right">
            <div class="recent">
                <h3>最新文章</h3>
                <hr>
                <ul>
                    <li><a href=""><span>随手记</span></a></li>
                    <hr>
                    <li><a href=""><span>小白结业作业</span></a></li>
                    <hr>
                    <li><a href=""><span>思考</span></a></li>
                    <hr>
                </ul>
            </div>
            <div class="t"></div>
            <div class="clasify">
                <h3>分类目录</h3>
                <hr>
                <ul>
                    <li><a href=""><span>JavaScript（2）</span></a></li>
                    <li><a href=""><span>JQuery（1）</span></a></li>
                    <li><a href=""><span>HTML（3）</span></a></li>
                    <li><a href=""><span>随笔（2）</span></a></li>
                    <li><a href=""><span>CSS（4）</span></a></li>
                    <li><a href=""><span>前端杂记（2）</span></a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

CSS代码如下：

body{
    /*默认是有边距的，所以要清除*/
    padding: 0;
    margin:0;
    /*text-align: center;ie*/
}
.t{
    height: 18px;
    width: 100%;
    float: left;
}
a{
    text-decoration: none;
}
 #header{
    width: 100%;
    height: 100px;
    background-color: #262626;
}
#header_content{
    margin: 0 auto;
    width:900px;
}
#header_content .logo{
    padding:5px 0px 5px 0px;
}
#heder_content img{
    width: 280px;
    height: 80px;
}
.logo, .menu{
    float: left;
}
#header a{
    color: #CCC;
    font-size: 18px;
}
#header a:hover{
    color: white;
}
.menu{
    margin-top: 10px;
}
.menu>ul{
    display: inline-block;
    padding-left: 30px;
    list-style: none;
}
.menu>ul>li{
    display: inline-block;
    float: left;
    padding-left: 30px;
    line-height: 45px;
}
#content{
    width: 960px;
    margin: 0 auto;
    background: red;
}
#content .left{
    width: 62%;
    float: left;
    box-shadow: 3px 3px 3px 3px #CCC;
}
.left .main{
    padding: 0px 8px 5px 8px;
}
.left h2{
    padding-left: 10px;
}
.left h4{
    padding-left: 20px;
    color: #585858;
}
.left span{
    color: orange;
}
#content .right{
    width: 32%;
    float: right;
}
.right .recent{
    box-shadow: 3px 3px 3px 3px #CCC;
    padding-top:6px;
}
.right a:linked{
    color: #585858;
}
.right a:visited{
    color: #585858;
}
.right a:hover{
    color: black;
}
.right h3{
    text-align: center;
}
.right ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.right ul>li{
    margin-left: 16px;
}
.right .clasify ul>li{
    list-style: none;
    width: 130px;
    float: left;
    padding-bottom: 5px;
}
.right .clasify{
    box-shadow: 3px 3px 3px 3px #CCC;
    float: right;
    margin-top: 5px;
}