day69-CSS-blog示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blog-test</title>
    <link rel="stylesheet" href="blog-test.css">
</head>
<body>
    <!--左边栏开始-->
    <div class="left">
        <!--头像开始-->
        <div class="header-img">
            <img src="4.jpg" alt="">
        </div>
        <!--头像结束-->
        <!--微博名开始-->
        <div class="blog-name">PSDF的微博</div>
        <!--微博名结束-->
        <!--微博信息开始-->
        <div class="blog-info">这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下</div>
        <!--微博信息结束-->
        <!--链接区开始-->
        <div class="blog-links">
            <ul type="none"> <!--取消列表前面的圆点-->
                <li><a href="">关于我</a></li>
                <li><a href="">微博</a></li>
                <li><a href="">公众号</a></li>
            </ul>
        </div>
        <!--链接区结束-->
        <!--分类区开始-->
        <div class="blog-tags">
            <ul type="none">
                <li><a href="">JS</a></li>
                <li><a href="">CSS</a></li>
                <li><a href="">HTML</a></li>
            </ul>
        </div>
        <!--分类区结束-->
    </div>
    <!--左边栏结束-->

    <!--右边栏开始-->
    <div class="right">
        <!--文章列表开始-->
        <div class="article-list">
            <!--文章开始,几篇文章都一样，复制就行-->
            <div class="article">
                <!--文章标题开始-->
                <div class="article-title">
                    <h1 class="article-name">海燕</h1>
                    <span class="article-date">2020-2-29</span>
                </div>
                <!--文章标题结束-->

                <!--文章内容开始-->
                <div class="article-info">在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div>
                <!--文章内容结束-->

                <!--文章标签开始-->
                <div class="article-tag">#HTML #CSS</div>
                <!--文章标签结束-->
            </div>
            <!--文章结束-->
        </div>
        <!--文章列表结束-->
    </div>
    <!--右边栏开始-->
</body>
</html>

--------------------------------------------------------------------------


/*公用样式*/
*{
    font-family:".PingFang SC","Microsoft YaHei";
    font-size:14px;
    margin:0;
    padding:0;
}
/*左边栏开始*/
/*左边栏背景*/
.left{
    width:20%;
    height:100%;
    background:rgb(78,78,78);
    position:fixed;/*左边栏固定*/
    left:0;
    top:0;
}
/*头像*/
.header-img{
    width:128px;
    height:98px;
    border:1px green solid;
    border-radius:100%;/*圆框*/
    overflow:hidden;/*图片溢出边框，要隐藏*/
    margin:0 auto;/*外边框居中*/
    margin-top:15px;
}
/*头像图片*/
.header-img img{
    max-width:100%;/*图片100%嵌套在父标签的边框里面*/
}
/*微博名*/
.blog-name{
    font-size:28px;
    text-align:center;/*文本居中*/
    color:white;
    margin-top:30px;
}
/*微博信息*/
.blog-info{
    width:200px;
    height:100px;
    margin:0 auto;
    margin-top:30px;
    border:3px green solid;
    text-align:center;
    color:white;
    overflow:auto;/*文本溢出边框，边框右边生成滚动条*/
}
/*链接区和分类区 分在一组，设置相同的样式*/
.blog-links a,
.blog-tags a
{
    color:white;
    text-decoration:none;/*去掉a标签的文本下划线*/
}
.blog-links,
.blog-tags
{
    text-align:center;
    margin-top:50px;
}
/*列表与列表之间间隔10px*/
.blog-links li,
.blog-tags li
{
    margin-top:10px;
}
.blog-tags a:before/*内容前面加#，注意伪元素是用冒号:*/
{
    content:"#"
}
/*左边栏结束*/

/*右边栏开始*/
.right{
    width:80%;
    height:1500px;
    background-color:rgb(238,238,238);
    float:right;/*右边栏需要向右浮动*/
}
/*文章开始*/
/*文章列表*/
    .article-list{
        margin:30px 10%;/*上下外边框30px，左右外边框占右边栏的10%*/
    }
    /*文章*/
        .article{
            height:200px;
            background-color:white;
            margin-top:30px;
        }
        /*文章标题*/
        .article-title{
            padding:15px;
            border-left:3px red solid;
        }
            /*文章名字*/
            .article-name{
                font-size:30px;
                display:inline;/*h1变为行内元素，日期才能在同一行向右浮动*/

            }
            /*文章日期*/
            .article-date{
                float:right;/*日期向右浮动*/
            }
        /*文章内容*/
        .article-info{
            padding:15px;
        }
        /*文章标签*/
        .article-tag{
            margin-top:15px;
            padding:15px;
            border-top:1px #eeeeee solid;
        }
猜你喜欢
