CSS小练习

合集 - 前端炒米粉(25)
1.前端基础之前端知识引入2.前端基础之HTTP协议介绍3.前端基础之HTML基础4.前端基础之HTML进阶5.前端基础之CSS基础6.前端基础之CSS选择器7.前端基础之CSS基本属性8.前端基础之CSS浮动和定位方式
9.CSS小练习
10.前端基础之JavaScript引入11.前端基础之JavaScript的数据类型12.前端基础之JavaScript数组13.前端基础之JavaScript运算符14.前端基础之JavaScript流程控制15.前端基础之JavaScript函数16.前端基础之JavaScript对象17.前端基础之JavaScriptDOM和BOM18.前端基础之原生js事件绑定案例19.前端基础之jQuery引入20.前端基础之jQuery基础21.前端基础之jQuery进阶22.前端基础之jQuery事件23.前端基础之jQuery重要补充24.前端框架之Bootstrap25.前端补充：url编码
收起

使用CSS搭建网站文章首页

blog.css

/*通用样式*/
body {
    /* 去除自带的8px */
    margin: 0;
    background-color: #eeeeee;
}
a {
    /* 去除a标签下的下划线 */
    text-decoration: none;
}
ul {
    /* list-style-type : 去除ul标签对应的黑色圆点 */
    list-style-type: none;
    padding-left: 0;  /* 去除ul自带的边框距离 */
}
 
/*左侧样式*/
.blog-left {
    float: left;  /* 让整个标签一直浮动在左侧 */
    width: 20%;   /* 占据总页面宽度的 20% */
    height: 100%;   /* 占据总页面高度的 100% */
    position: fixed;   /* 固定位置模式 */
    background-color: #4e4e4e;   /* 给一个背景色 */
}
 
/* 头像版块 */
.blog-img {
    height: 150px;  /* 指定高度 */
    width: 150px;   /* 指定宽度 */
    border-radius: 50%;    /* 指定圆形 */
    border: 5px solid white;   /* 指定边框格式 */
    margin: 20px auto;   /* 上下距离 20px 左右 居中 */
    overflow: hidden;   /* 将图片塞到圆圈里 */
}
 
/* 附上上面的条件，让图片占据圆内的 100% */
.blog-img img {
    max-width: 100%;
}
 
/* 调整标题的字体相关属性 */
.blog-title,.blog-info {
    color: darkgrey;   /* 设置字体颜色 */
    font-size: 16px;    /* 设置字体大小 */
    text-align: center;   /* 设置文字居中 */
}
 
/* 调整 blog-link/blog-tag 相关链接的设置 */
.blog-link,.blog-tag {
    font-size: 20px;
}
 
/* 对blog-link下的a标签链接进行设置 */
.blog-link a,.blog-tag a {
    color: darkgrey;   /* 修改默认颜色 */
}
 
.blog-link a:hover,.blog-tag a:hover {
    color: white;  /* 修改鼠标悬浮颜色 */
}
 
.blog-link ul,.blog-tag ul {
    text-align: center;  /* 让ul列表下的文本居中 */
    margin-top: 80px;  /* 让文本中间距离加大 */
}
 
 
/*右侧样式*/
.blog-right {
    float: right;
     /* 让整个版块内容浮动在右侧 */
    width: 80%;
    /* 占据宽度的80% */
    height: 1000px;
    /* 最大高度 1000px  */
}
 
/* 修改文章字体的背景色 */
.article {
    background-color: white;  /* 设置文本背景色为白色 */
    margin: 18px 40px 10px 10px;   /* 这是文本框距离边框的距离 */
    box-shadow: 8px 8px 8px rgba(0,0,0,0.5);   /* 为文本框增加阴影 */
}
 
/* 修改文本框内的文本设置 */
.title {
    font-size: 24px;  /* 设置主题文字的大小 */
} 
 
/* 修改文本框内的日期 */
.date {
    float: right;    /* 浮动在右侧 */
    margin: 20px 20px;  /* 设置日期距离边框的距离 */
    font-weight: bolder;   /* 设置字体加粗 */
}
 
/* 设置文本框左侧的小边框设置 */
.article-title {
    border-left: 8px solid red;  /* 设置小边框的颜色深度(只有左侧边框) */
    text-indent: 16px;  /* 设置小边框距离文本的距离 */
}
 
/* 修改article-body 下的内容 */
.article-body {
    font-size: 18px;  /* 设置文本内容字体大小 */
    text-indent: 30px;  /* 设置文本缩进 */
    /*border-bottom: 1px solid black;  !*水平分割线*!*/
    /*!* 在内容底部 + 一条黑色的线 *!*/
    /* 或者在文本底部 + hr */
}
 
/* 修改文章底部的内容 */
.article-bottom {
    padding-left: 30px;
    padding-bottom: 10px;
    /* 调整文本距离边框的距离 */
}

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客园</title>
    <link rel="stylesheet" href="blog.css">
</head>
<body>
    <div class="blog-left">
        <div class="blog-img">
          <img src="1.png" alt="">
        </div>
        <div class="blog-title">
            <p>权浩爹的博客</p>
        </div>
        <div class="blog-info">
            <p>什么都没留下</p>
        </div>
        <div class="blog-link">
          <ul>
            <li><a href="">关于我</a></li>
            <li><a href="">微博</a></li>
            <li><a href="">微信公众号</a></li>
          </ul>
        </div>
        <div class="blog-tag">
          <ul>
            <li><a href="">#python</a></li>
            <li><a href="">#java</a></li>
            <li><a href="">#golang</a></li>
          </ul>
        </div>
    </div>
    <div class="blog-right">
        <div class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2024/1/1</span>
            </div>
            <div class="article-body">
                <p>一直开车一直爽</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#python&nbsp;&nbsp;&nbsp;</span>
                <span>#JavaScript&nbsp;&nbsp;&nbsp;</span>
            </div>
        </div>
        <div class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2024/1/1</span>
            </div>
            <div class="article-body">
                <p>一直开车一直爽</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#python&nbsp;&nbsp;&nbsp;</span>
                <span>#JavaScript&nbsp;&nbsp;&nbsp;</span>
            </div>
        </div>
        <div class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2024/1/1</span>
            </div>
            <div class="article-body">
                <p>一直开车一直爽</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#python&nbsp;&nbsp;&nbsp;</span>
                <span>#JavaScript&nbsp;&nbsp;&nbsp;</span>
            </div>
        </div>
        <div class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2024/1/1</span>
            </div>
            <div class="article-body">
                <p>一直开车一直爽</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#python&nbsp;&nbsp;&nbsp;</span>
                <span>#JavaScript&nbsp;&nbsp;&nbsp;</span>
            </div>
        </div>
        <div class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2024/1/1</span>
            </div>
            <div class="article-body">
                <p>一直开车一直爽</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#python&nbsp;&nbsp;&nbsp;</span>
                <span>#JavaScript&nbsp;&nbsp;&nbsp;</span>
            </div>
        </div>
        <div class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2024/1/1</span>
            </div>
            <div class="article-body">
                <p>一直开车一直爽</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#python&nbsp;&nbsp;&nbsp;</span>
                <span>#JavaScript&nbsp;&nbsp;&nbsp;</span>
            </div>
        </div>
        <div class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2024/1/1</span>
            </div>
            <div class="article-body">
                <p>一直开车一直爽</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#python&nbsp;&nbsp;&nbsp;</span>
                <span>#JavaScript&nbsp;&nbsp;&nbsp;</span>
            </div>
        </div>
        <div class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2024/1/1</span>
            </div>
            <div class="article-body">
                <p>一直开车一直爽</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#python&nbsp;&nbsp;&nbsp;</span>
                <span>#JavaScript&nbsp;&nbsp;&nbsp;</span>
            </div>
        </div>
        <div class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2024/1/1</span>
            </div>
            <div class="article-body">
                <p>一直开车一直爽</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#python&nbsp;&nbsp;&nbsp;</span>
                <span>#JavaScript&nbsp;&nbsp;&nbsp;</span>
            </div>
        </div>
        <div class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2024/1/1</span>
            </div>
            <div class="article-body">
                <p>一直开车一直爽</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#python&nbsp;&nbsp;&nbsp;</span>
                <span>#JavaScript&nbsp;&nbsp;&nbsp;</span>
            </div>
        </div>
        <div class="article">
            <div class="article-title">
                <span class="title">论开车的重要性</span>
                <span class="date">2024/1/1</span>
            </div>
            <div class="article-body">
                <p>一直开车一直爽</p>
            </div>
            <hr>
            <div class="article-bottom">
                <span>#python&nbsp;&nbsp;&nbsp;</span>
                <span>#JavaScript&nbsp;&nbsp;&nbsp;</span>
            </div>
        </div>
    </div>
</body>
</html>
posted @   Xiao0101  阅读(13)  评论(0)  编辑  收藏  举报
相关博文：
· 前端基础之CSS基本属性
· 前端基础之CSS基础
· 【9.0】CSS案例
· 【7.0】前端基础之CSS案例
· CSS速成笔记
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示