博客页面

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>

    <link rel="stylesheet" href="css-f2.css">

</head>
<body>
<!--左边框    -->
<div class="left">
    <div class="c_img">
        <img src="guoqi.png">
    </div>
    <div class="info">
        <h2>哪吒的闹海记录</h2>
    </div>
    <div class="links">
        <ul type="none">
            <li>
                <a href="">关于我</a>
            </li>
            <li>
                <a href="">微博</a>
            </li>
            <li>
                <a href="">公众号</a>
            </li>
        </ul>
    </div>
    <div class="shuxing">
        <ul>
            <li>#Java</li>
            <li>#Python</li>
            <li>#CSS</li>
            <li>#HTML</li>
            <li>#Golang</li>
        </ul>
    </div>
</div>

<!--有边框-->
<div class="right">
    <div class="textinfo">
        <div class="title">
        <span class="name">海燕</span>
        <span class="data">2021-12-28</span>
        </div>
        <div class="text">在苍茫的大海上，狂风卷着乌云，在乌云和大海之间，有只海燕像一只黑色的闪电，在高傲的飞翔</div>
        <div class="biaoqian">#HTML #CSS</div>
    </div>
    <div class="textinfo">
        <div class="title">
        <span class="name">海燕</span>
        <span class="data">2021-12-28</span>
        </div>
        <div class="text">在苍茫的大海上，狂风卷着乌云，在乌云和大海之间，有只海燕像一只黑色的闪电，在高傲的飞翔</div>
        <div class="biaoqian">#HTML #CSS</div>
    </div>
    <div class="textinfo">
        <div class="title">
        <span class="name">海燕</span>
        <span class="data">2021-12-28</span>
        </div>
        <div class="text">在苍茫的大海上，狂风卷着乌云，在乌云和大海之间，有只海燕像一只黑色的闪电，在高傲的飞翔</div>
        <div class="biaoqian">#HTML #CSS</div>
    </div>
    <div class="textinfo">
        <div class="title">
        <span class="name">海燕</span>
        <span class="data">2021-12-28</span>
        </div>
        <div class="text">在苍茫的大海上，狂风卷着乌云，在乌云和大海之间，有只海燕像一只黑色的闪电，在高傲的飞翔</div>
        <div class="biaoqian">#HTML #CSS</div>
    </div>
    <div class="textinfo">
        <div class="title">
        <span class="name">海燕</span>
        <span class="data">2021-12-28</span>
        </div>
        <div class="text">在苍茫的大海上，狂风卷着乌云，在乌云和大海之间，有只海燕像一只黑色的闪电，在高傲的飞翔</div>
        <div class="biaoqian">#HTML #CSS</div>
    </div>

</div>
</body>
</html>
View Code
* {
    margin: 0;
    padding: 0;
}
/*左边*/
.left {
    background-color: dimgrey;
    width: 20%;
    height: 1400px;
    float: left;
}
div img {
    width: 150px;
    height: 150px;
    border: black solid 2px;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
    margin: 10px;
    left: 33%;
}
.info {
   text-align: center;
}
.links {
    text-align: center;
    margin: 30px;

}
.shuxing {
    text-align: center;
    tex

}
/*右边*/
.right {
    background-color: blanchedalmond;
    width: 80%;
    height: 1400px;
    float: left;
}
.textinfo {
    margin: 20px;
    padding: 5px;
    background-color: aliceblue;
}
.title {
    border-left: green solid 2px;

}
.name{
     margin: 5px;
     float: left;
}

.data {
    float: right;
}
.title:after {
    content: "";
    display: block;
    clear: both;
}
.text{
    margin: 10px;
}
.biaoqian {
    margin: 10px;
    padding-top: 20px;
}
View Code

 

posted @ 2021-12-28 17:05  huxl1  阅读(26)  评论(0)  编辑  收藏  举报