前端--CSS练习--blog页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
<!--左边开始-->
<div class="left">
    <!--头像开始-->
    <div class="user_img">
        <img src="logo.jpeg" alt="">
    </div>
    <!--头像结束-->
    <!--博客用户名-->
    <div class="username">
        username
    </div>
    <!--博客用户名结束-->
    <!--简介start-->
    <div class="userinfo">
        userinfouserinfouserinfouserinfouserinfo
    </div>
    <!--简介end-->
    <!--links start-->
    <div class="links">
        <ul>
            <li><a href="#">link1</a></li>
            <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
        </ul>
    </div>
    <!--links end-->
    <!--tags start-->
    <div class="tags">
        <ul>
            <li><a href="#">tags1</a></li>
            <li><a href="#">tags2</a></li>
            <li><a href="#">tags3</a></li>
        </ul>
    </div>
    <!--tags end-->
</div>
<!--左边结束-->

<!--右边开始-->
<div class="right">
    <div class="article_lists">
        <div class="article">
            <div class="article_title">
                <h3 class="article_h3">海燕</h3>
                <span class="float_span">2018-03-07</span>
            </div>
            <div class="article_info">
                在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.
                <p></p>
            </div>
            <div class="article_tags">
                #HTML #CSS
            </div>
        </div>
        <div class="article">
            <div class="article_title">
                <h3 class="article_h3">海燕</h3>
                <span class="float_span">2018-03-07</span>
            </div>
            <div class="article_info">
                在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.
                <p></p>
            </div>
            <div class="article_tags">
                #HTML #CSS
            </div>
        </div>
        <div class="article">
            <div class="article_title">
                <h3 class="article_h3">海燕</h3>
                <span class="float_span">2018-03-07</span>
            </div>
            <div class="article_info">
                在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.
                <p></p>
            </div>
            <div class="article_tags">
                #HTML #CSS
            </div>
        </div>
        <div class="article">
            <div class="article_title">
                <h3 class="article_h3">海燕</h3>
                <span class="float_span">2018-03-07</span>
            </div>
            <div class="article_info">
                在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.
                <p></p>
            </div>
            <div class="article_tags">
                #HTML #CSS
            </div>
        </div>
        <div class="article">
            <div class="article_title">
                <h3 class="article_h3">海燕</h3>
                <span class="float_span">2018-03-07</span>
            </div>
            <div class="article_info">
                在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.
                <p></p>
            </div>
            <div class="article_tags">
                #HTML #CSS
            </div>
        </div>
    </div>
</div>
<!--右边结束-->
</body>
</html>

HTML代码

/*定义全局属性*/
body{
    margin: 0;
    padding: 0;
}
/*左边样式*/
.left{
    width: 20%;
    height: 100%;
    background-color: #4d4d4d;
    color:white;
    position: fixed;
    float:left;
    padding-top:20px ;
}
/* 左边DIV下的子DIV只要超过div宽度的文字会自动换行word-break: break-all; word-wrap: break-word;*/
.left>div{
    word-break: break-all;
    word-wrap: break-word;
}
/*用户头像圆形边框设置*/
.user_img{;
    margin: 0 auto;
    width:150px;
    height:150px;
    border:3px white solid;
    border-radius: 50%;
    overflow: hidden;
}
/*用户图片缩放*/
.user_img img{
    max-width: 100%;
}
/*用户名属性设置*/
.username{
    text-align: center;
    font-size: 30px;

}
/*用户简介信息设置*/
.userinfo{
    width:80%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    border:1px white solid;

}
/*给超链接去下划线，改变字体颜色*/
div ul li a {
    text-decoration: none;
    color: #888;
}
div ul li a:hover{
    color:red;
}

/*设置links 中的ul的属性 */
.links{
    padding: 30px 0px;
}
ul{
    list-style: none;
}

/*右边div的设置*/
.right{
    width: 80%;
    float:right;
    color:black;
    background:#eeeeee ;
}
/* 右边DIV下的子DIV只要超过div宽度的文字会自动换行word-break: break-all; word-wrap: break-word;*/
.right>div{
    word-break: break-all;
    word-wrap: break-word;
}
/*设置文章列表属性*/
.article_lists{
    padding:20px;
    margin-right: 10%;
}
/*设置文章属性*/
.article{
    width:90%;
    background-color: white;
    margin-bottom: 20px;
}
/*设置文章标题属性*/
.article_title{
    border-left: red 3px solid;
    padding: 10px;
}
/* span 向右浮动后，发现 和H3错行了*/
/*
解决办法：
1、让H3也浮动起来，但是h3浮动后，发现无法撑起外面的div
2、直接让h3的显示方式改为既可以为行内标签页可以为块级标签，接着发现又错行了；
3、于是让外层div做一个padding操作将 span标签挤下来；
*/
.article_h3{
    display: inline-block;
    margin: 0;
    padding: 0;
}

.float_span{
    float: right;
}
/*设置文章内容属性*/
.article_info{
    width: 90%;
    margin: 10px 20px;
    padding: 2px;
    border-bottom: 1px rgb(238, 238, 238) solid;
}
/* 设置文章表属性*/
.article_tags{
    padding: 10px;
}

CSS样式

posted on 2019-07-03 01:54 Jerry-Wang 阅读(392) 评论(0) 收藏举报