博客园小页面css完 

骨架-----------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="cnblog.css">
</head>
<body>
<div class="left_style">
    <div class="photo">
<!--        <img src="2.jpg" alt="">-->
    </div>
    <div class="name">涛哥的博客</div>
    <div class="name">这个人很帅什么都没有留下</div>
    <div>
        <ul class="list_style">
            <li><a href="">关于我</a></li>
            <li><a href="">微博</a></li>
            <li><a href="">微信公众号</a></li></ul>
    </div>
    <div>
          <ul class="list_style">
            <li>python</li>
            <li>java</li>
            <li>go</li></ul>
    </div>
    </div>

<div class="right_style">
    <div class="texe_info">
        <div class="texe_title">
            <span class="txt1">重金八万</span><span class="txt2">2021年5月8日</span></div>
        <div class="texe_party1"><p>拒绝还价</p></div>
        <hr>
        <div class="texe_party2"><span>#python &nbsp&nbsp #javascript</span></div></div>
</div>

</body>
</html>
css-----------------------------------------------------------

.left_style{
    height: 100%;
    width: 20%;
    float: left;
    background-color: rgb(78,78,78);
    position:fixed;
    /*top: 0;*/
}
a{
  text-decoration: none;/*文字装饰*/
    color: aqua;
}
a:hover{color: white;

}
.list_style{
    list-style-type: none;
    color:rgb(145,145,145);
    padding: 0;
    margin:100px;
    font-size: 20px;


}
body{margin: 0}
.photo{
    width: 200px;
    height: 200px;
    background-color: blue;
    border-radius: 50%;
    border: 3px white solid;
    background-image: url("2.jpg") ; /*不会溢出*/
    /*overflow: hidden;*/

    margin: auto auto;
}

.name{
    font-size: 20px;
    color: honeydew;
    text-align: center;
    margin: 15px;

}


.right_style{
    height: 1000px;
    width: 80%;
    float: right;
    background-color: #eeeeee;
}
.texe_info{background-color: aliceblue;
    height: 150px;

    margin: 20px 40px 10px 10px;
    box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
    text-indent: 1em;
}
.txt2{float: right;
    padding: 10px 10px;
    font-weight: bolder;
}
.txt1{font-size: 30px;

    font-weight: bolder;

}
.text_party1{
     font-weight: bolder;
}
.texe_party2{padding: 10px 1px;
     font-weight: bolder;
}
.texe_title{
    border-left: red solid 5px;}

 

posted @ 2021-05-08 22:44  欧阳锦涛  阅读(41)  评论(0)    收藏  举报
TOP 底部