526互联

【7.0】前端基础之CSS案例

发布时间 2023-07-04 17:54:16作者: Chimengmeng

【7.0】前端基础之CSS案例

在设计页面的时候先用div划分页面，再去填充数据，再去填充样式

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CnBlogs</title>
    <link rel="stylesheet" href="01%20blog-css.css">
</head>
<body>

<div class="blog-left">
    <div class="blog-avatar-img">
        <img src="头像猫.jpg" alt="">
    </div>
    <div class="blog-username">
        Chimengmeng
    </div>
    <div class="blog-info">
        天涯何处无芳草
    </div>
    <div class="blog-link">
        <ul>
            <li><a href="">关于我</a></li>
            <li><a href="">微信</a></li>
            <li><a href="">QQ</a></li>
        </ul>
    </div>
    <div class="blog-bottom">
        <ul>
            <li><a href="">#python</a></li>
            <li><a href="">#Java</a></li>
            <li><a href="">#GoLand</a></li>
        </ul>
    </div>
</div>
<div class="blog-right">
    <div class="article">
        <div class="article-title">
            <span class="title">如何报道富婆</span>
            <span class="datetime">2023-03-06</span>
        </div>
        <div class="article-body">
            <p>天涯何处无芳草，何必单恋一根草！</p>
        </div>
        <hr>
        <div class="article-bottom">
            <span>#Python&nbsp;</span>
            <span>#JavaScript</span>
        </div>
    </div>

    <div class="article">
        <div class="article-title">
            <span class="title">如何报道富婆</span>
            <span class="datetime">2023-03-06</span>
        </div>
        <div class="article-body">
            <p>天涯何处无芳草，何必单恋一根草！</p>
        </div>
        <hr>
        <div class="article-bottom">
            <span>#Python&nbsp;</span>
            <span>#JavaScript</span>
        </div>
    </div>

    <div class="article">
        <div class="article-title">
            <span class="title">如何报道富婆</span>
            <span class="datetime">2023-03-06</span>
        </div>
        <div class="article-body">
            <p>天涯何处无芳草，何必单恋一根草！</p>
        </div>
        <hr>
        <div class="article-bottom">
            <span>#Python&nbsp;</span>
            <span>#JavaScript</span>
        </div>
    </div>

    <div class="article">
        <div class="article-title">
            <span class="title">如何报道富婆</span>
            <span class="datetime">2023-03-06</span>
        </div>
        <div class="article-body">
            <p>天涯何处无芳草，何必单恋一根草！</p>
        </div>
        <hr>
        <div class="article-bottom">
            <span>#Python&nbsp;</span>
            <span>#JavaScript</span>
        </div>
    </div>

    <div class="article">
        <div class="article-title">
            <span class="title">如何报道富婆</span>
            <span class="datetime">2023-03-06</span>
        </div>
        <div class="article-body">
            <p>天涯何处无芳草，何必单恋一根草！</p>
        </div>
        <hr>
        <div class="article-bottom">
            <span>#Python&nbsp;</span>
            <span>#JavaScript</span>
        </div>
    </div>

    <div class="article">
        <div class="article-title">
            <span class="title">如何报道富婆</span>
            <span class="datetime">2023-03-06</span>
        </div>
        <div class="article-body">
            <p>天涯何处无芳草，何必单恋一根草！</p>
        </div>
        <hr>
        <div class="article-bottom">
            <span>#Python&nbsp;</span>
            <span>#JavaScript</span>
        </div>
    </div>
</div>

</body>
</html>

CSS

/* 这是对博客园首页的装饰代码 */


/*---------------------------------------------------*/
/* 通用样式 */
body {
    margin: 0;
    /* 去除上下距离 */
    background-color: #4e4e4e;
    /* 设置背景为浅色 */
}

a {
    text-decoration: none; /* 去除a标签下的下划线 */
}

ul {
    list-style-type: none;
    /* 去除ul列表前的点 */

    padding-left: 0;
    /* 去除ul自带的边框距离 */
}


/*---------------------------------------------------*/
/*  左侧样式 */
/* 整个左半部分，大板块 */
.blog-left {
    float: left;
    /* 让整个标签一直浮动在左侧 */
    width: 20%;
    /* 占据总页面宽度的 20% */
    height: 100%;
    /* 占据总页面高度的 100% */
    position: fixed;
    /* 固定位置模式 */
    background-color: darkslateblue;
    /* 给一个背景色 */
}

/* 头像版块 */
.blog-avatar-img {
    height: 100px;
    /* 指定高度 */
    width: 100px;
    /* 制定宽度 */
    border-radius: 50%;
    /* 制定圆形 */
    border: 3px solid white;
    /* 制定边框格式 */
    margin: 20px auto;
    /* 上下距离 20px 左右 居中 */
    overflow: hidden;
    /* 将图片塞到圆圈里 */
}

/* 附上上面的条件，让图片占据圆内的 100% */
.blog-avatar-img img {
    max-width: 100%;
    /* 占据圆内的100% */
}

/* 调整标题的字体相关属性 */
.blog-username, .blog-info {
    color: deeppink;
    /* 设置字体颜色 */
    font-size: 18px;
    /* 设置字体大小 */
    text-align: center;
    /* 设置文字居中 */
}

/* 调整 blog-link/blog-bottom 相关链接的设置 */
.blog-link, .blog-bottom {
    font-size: 20px;
}

/* 对blog-link下的a标签链接进行设置 */

.blog-link a, .blog-bottom a {
    color: darkgray; /* 修改默认颜色 */
}

.blog-link a:hover, .blog-bottom a:hover {
    color: white; /* 修改鼠标悬浮颜色 */
}

.blog-link ul, .blog-bottom ul {
    text-align: center; /* 让ul列表下的文本居中 */
    margin-top: 100px; /* 让文本中间距离加大 */


}

/*---------------------------------------------------*/
/* 右侧样式 */
.blog-right {
    float: right;
    /* 让整个版块内容浮动在右侧 */
    width: 80%;
    /* 占据宽度的80% */
    height: 1000px;
    /* 最大高度 1000px  */

}

/* 修改文章字体的背景色 */
.article {
    background-color: white;
    /* 设置文本背景色为白色 */
    margin: 10px 20px 10px 10px;
    /* 这是文本框距离边框的距离 */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    /* 为文本框增加阴影 */
}

/* 设置文本框左侧的小边框设置 */
.article-title {
    border-left: 5px solid red;
    /* 设置小边框的颜色深度(只有左侧边框) */
    text-indent: 16px;
    /* 设置小边框距离文本的距离 */
}


/* 修改文本框内的文本设置 */
.title {
    font-size: 24px;
    /* 设置主题文字的大小 */
    margin-top: 10px;
}

/* 修改文本框内的日期 */
.datetime {
    float: right;
    /* 浮动在右侧 */
    margin: 10px 20px 10px 10px;
    /* 设置日期距离边框的距离 */
    font-weight: bold;
    /* 设置字体加粗 */
}

/* 修改article-body 下的内容 */
.article-body {
    font-size: 18px;
    /* 设置文本内容字体大小 */
    text-indent: 28px;
    /* 设置文本缩进 */
    /*border-bottom: 1px solid black;*/
    /*!* 在内容底部 + 一条黑色的线 *!*/
    /* 或者在文本底部 + hr */
}

/* 修改文章底部的内容 */
.article-bottom {
    padding-left: 30px;
    padding-bottom: 10px;
    /* 调整文本距离边框的距离 */
}