练习:(bb)blog

最新推荐文章于 2024-05-05 10:00:19 发布

weixin_39660404

最新推荐文章于 2024-05-05 10:00:19 发布

阅读量105

点赞数

分类专栏：练习

本文链接：https://blog.csdn.net/weixin_39660404/article/details/104676174

版权

练习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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="avatar">
        <img src="zhuzhu.png" alt="">
    </div>

    <div class="blog-title">
        <h3>猪猪的Blog</h3>
    </div>

    <div class="info">
        <p>下辈子我们一起变成一朵云,</p>
        <p>醒了就晒晒太阳,</p>
        <p>睡了就沐浴月光,</p>
        <p>啥都不想.</p>
    </div>

    <div class="tag-list">
        <span>&nbsp&nbsp可爱的我和我可爱的世界</span>
        <ul>
            <li><a href="">可爱多的日常自恋</a></li>
            <li><a href="">可爱多的家庭照片</a></li>
            <li><a href="">可爱多的联系方式
                <hr>家有猛虎 拒绝撩骚</a></li>
        </ul>
    </div>

    <div class="ability">
        <span>&nbsp&nbsp&nbsp我有超能力&nbsp&nbsp>>></span>
        <ul>
            <li><a href="">上天入地 做饭我行</a></li>
            <li><a href="">千般武艺 打球稳赢</a></li>
            <li><a href="">花见花开 超级可爱</a></li>
        </ul>

        
    </div>


</div>
<!--页面的左侧 结束-->

<!--页面的右侧 开始-->
<div class="right">
<!--    文章列表-->
    <div class="article-list">

        <span>每日一诵</span>
<!--        文章-->
        <div class="article">
            <div class="article-head">
                <a class="article-title" href="">余生是你~</a>
                <span class="article-time">2019-08-13</span>
            </div>
            <div class="article-body">请每天早上八点背诵那一夜的承诺书:) 有益于身心健康,家庭和睦,不客气.</div>
            <div class="article-foot">
                <span>标签:一日一诵</span>
            </div>
        </div>


         <span>琴棋书画</span>
<!--        文章-->
        <div class="article">
            <div class="article-head">
                <a class="article-title" href="">诗词歌赋~</a>
                <span class="article-time">2019-08-13</span>
            </div>
            <div class="article-body">有一美人兮，见之不忘。
                        一日不见兮，思之如狂。
                        凤飞翱翔兮，四海求凰。
                        无奈佳人兮，不在东墙。
                        将琴代语兮，聊写衷肠。
                        何日见许兮，慰我彷徨。
                        愿言配德兮，携手相将。
                        不得於飞兮，使我沦亡。
                        凤兮凤兮归故乡，遨游四海求其凰。
            </div>
            <div class="article-foot">
                <span>标签:嘴炮日常</span>
            </div>
        </div>


         <span>吃喝玩乐</span>
<!--        文章-->
        <div class="article">
            <div class="article-head">
                <a class="article-title" href="">我又饿了~</a>
                <span class="article-time">2019-08-13</span>
            </div>
            <div class="article-body">
                材料: 鸡蛋3个，西红柿150克，植物油4汤匙，盐适量，糖1汤匙
                做法:
                1、将西红柿洗净后用沸水烫一下，去皮、去蒂，切片待用。
                2、将鸡蛋打入碗中，加盐，用筷子充分搅打均匀待用。
                3、炒锅放油3汤匙烧热，将鸡蛋放入锅中炒熟盛出待用。
                4、将剩余的油烧热，下西红柿片煸炒，放盐、糖炒片刻，倒入鸡蛋翻炒几下出锅即成。
                小诀窍
                1）炒制此菜时，要旺火速成。
                2）鸡蛋中加水淀粉可以使鸡蛋口感更爽滑。
                3）西红柿炒鸡蛋不用放鸡精或者味精，因为西红柿炒鸡蛋是吃一个“鲜”字，而西红柿炒鸡蛋的时候就有形成鲜味的物质析出，不需要再放提鲜的味精或者鸡精。这也是做这道菜的时候不放葱姜蒜的原因。
            </div>
            <div class="article-foot">
                <span>标签:吃货世界</span>
            </div>
        </div>

          <span>考拉宝宝</span>
<!--        文章-->
        <div class="article">
            <div class="article-head">
                <a class="article-title" href="">不想起名字了~</a>
                <span class="article-time">2019-08-13</span>
            </div>
            <div class="article-body">
                我需要很多很多很多的海绵宝宝裤...~~~~~
            </div>
            <div class="article-foot">
                <span>标签:嘴炮日常</span>
            </div>
        </div>


         <span>考拉宝宝</span>
<!--        文章-->
        <div class="article">
            <div class="article-head">
                <a class="article-title" href="">不想起名字了~</a>
                <span class="article-time">2019-08-13</span>
            </div>
            <div class="article-body">
                我需要很多很多很多的海绵宝宝裤...~~~~~
            </div>
            <div class="article-foot">
                <span>标签:嘴炮日常</span>
            </div>
        </div>

         <span>考拉宝宝</span>
<!--        文章-->
        <div class="article">
            <div class="article-head">
                <a class="article-title" href="">不想起名字了~</a>
                <span class="article-time">2019-08-13</span>
            </div>
            <div class="article-body">
                我需要很多很多很多的海绵宝宝裤...~~~~~
            </div>
            <div class="article-foot">
                <span>标签:嘴炮日常</span>
            </div>
        </div>

    </div>
</div>
<!--页面的右侧 结束-->

</body>

```python
在这里插入代码片





```css
bolg.css
/*blog页面的css样式*/

/*公用的样式*/
body {
    margin: 0;
}

a {
    text-decoration: none;
}

/*左侧 样式区*/
.left {
    float:left;
    background-color:#eeefea ;
    width: 20%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    color: #44881a;
}
/*头像*/

.avatar {
    width: 200px;
    height: 200px;
    border: 4px solid white;
    border-radius: 50%;
    overflow: hidden;
    margin: 40px auto;

}
.avatar>img {
    width: 100%;
    height: 100%;

}

/*博客标题*/
.blog-title,
.info,
.tag-list>ul,
.ability>ul
{
    text-align: center;
}

/*博客签名*/
.info {
    font-size: 14px;
    font-weight: bolder;
    margin: 60px;
}


/*tag 标签*/
.tag-list,.tag-list>span,.ability>span {
    margin: 70px auto;
    color: #816d65;

}
.tag-list>ul,.tag-list>span,.ability>span,.ability>ul {
    list-style-type: none;
    padding: 0;
    margin: 5px;
}
.tag-list a,.ability a,.tag-list>span,.ability>span,.ability>ul{
    color: #816d65;
    font-size: 12px;
    font-weight: bold;
}

.tag-list a:hover,
.ability a:hover
{
    color: wheat;
}
/*右侧 样式区*/
.right {
    float: right;
    background-color: #d9dccd;
    width: 80%;
}

/*文章*/
.article-list {
    padding: 20px 50px 0 20px;

}
.article-list>span {
    font-size: 30px;
    font-weight: bolder;
    color: #398c4c;
}
.article {
    background-color: white;
    margin-bottom: 20px;

}
.article:hover {
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    transform: translate3d(0,-2px,0);
    transition: all .1s linear;
}
.article-head {
    border-left: 4px solid red ;
    height: 40px;

}
.article-title {
    line-height: 40px;
    padding-left:20px;
    color: black;
    font-weight: bold;
    font-size: 20px;
}
.article-time {
    float: right;
    line-height: 40px;
    margin-right:20px  ;
}
.article-body {
    padding: 20px;
    border-bottom: 1px solid grey;
}
.article-foot {
    padding: 10px 20px;
}

weixin_39660404

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习:(bb)blog

猪猪的Blog <div class="avatar"> <img src="zhuzhu.png" alt=""></div><div class="blog-title"> <h3>猪猪的Blog</h3></div><div clas...
复制链接

扫一扫

专栏目录