博客系统-前端页面-day02

一口一个大饼

已于 2023-04-04 15:12:52 修改

阅读量74

点赞数 1

分类专栏：博客系统 HTML CSS 文章标签：前端 html css

于 2023-04-04 15:06:34 首次发布

本文链接：https://blog.csdn.net/weixin_58480821/article/details/129952984

版权

CSS 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

博客系统

5 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML和CSS构建一个Java实战项目的博客系统列表页。主要内容包括设置导航栏、版心、个人信息栏和内容详情栏，以及应用CSS进行样式设计。文章提供了代码示例，并提到了引入CSS文件、创建滚动条和处理长内容显示的注意事项。

摘要由CSDN通过智能技术生成

前言

本文主要介绍博客系统的列表页具体编码实现

实现列表页

列表页.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <!--引入css文件-->
    <link rel="stylesheet" href="D:\C语言资料\java\博客系统\css\导航栏.css">
    <link rel="stylesheet" href="D:\C语言资料\java\博客系统\css\列表页.css">
</head>
<body>
    <!--设置导航栏-->
    <div class = "nav">
        <img src="../博客系统/吴磊啊隼.png" alt = "">
        <!--引入头像图片-->
        <span class="title">大饼的博客系统</span>
        <span class="spacer"></span>
        <a href="博客详情页.html">详情</a>
        <a href="博客编辑页.html">编辑</a>
        <a href="博客登陆页.html">登陆</a>
    </div>
    
    <!--设置版心-->
    <div class="container">
        <!--设置左边栏（个人信息栏）-->
        <div class = "container-left">
            <!--用户头像-->
            <div class = "card">
                <img src="D:\C语言资料\java\博客系统\博客系统\头像.jpg" alt="">
                <h1>一口一个大饼</h1>
                <a href="https://gitee.com/">gitee地址</a>
                <div class="counter">
                    <span>关注</span>
                    <span>粉丝</span>
                </div>
                <div class="counter">
                    <span>34</span>
                    <span>59</span>
                </div>
            </div>

        </div>
        <!--设置右边栏（内容详情栏）-->
        <div class = "container-right">
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-3-16</div>
                <div class="dest">
                    生命的艺术在于成长。Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci et sapiente saepe, beatae nostrum officiis ut quod pariatur minus tempore repudiandae reprehenderit doloribus optio esse mollitia, vero quam, nulla voluptates!<br>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias facilis labore assumenda soluta? Fugit labore ea, blanditiis quia tempore ad vero delectus facilis, iste ullam optio facere sit dignissimos placeat?
                </div>
                <a href = "#" class="detail">查看全文&gt;&gt;</a>
            </div>
            <div class="blog">
                <div class="title">我的第二篇博客</div>
                <div class="date">2022-3-16</div>
                <div class="dest">
                    生命的艺术在于成长。Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci et sapiente saepe, beatae nostrum officiis ut quod pariatur minus tempore repudiandae reprehenderit doloribus optio esse mollitia, vero quam, nulla voluptates!<br>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias facilis labore assumenda soluta? Fugit labore ea, blanditiis quia tempore ad vero delectus facilis, iste ullam optio facere sit dignissimos placeat?
                </div>
                <a href = "#" class="detail">查看全文&gt;&gt;</a>
            </div>
            <div class="blog">
                <div class="title">我的第三篇博客</div>
                <div class="date">2022-4-03</div>
                <div class="dest">
                    生命的艺术在于成长。Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci et sapiente saepe, beatae nostrum officiis ut quod pariatur minus tempore repudiandae reprehenderit doloribus optio esse mollitia, vero quam, nulla voluptates!<br>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias facilis labore assumenda soluta? Fugit labore ea, blanditiis quia tempore ad vero delectus facilis, iste ullam optio facere sit dignissimos placeat?
                </div>
                <a href = "#" class="detail">查看全文&gt;&gt;</a>
            </div>
            <div class="blog">
                <div class="title">我的第四篇博客</div>
                <div class="date">2022-4-17</div>
                <div class="dest">
                    生命的艺术在于成长。Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci et sapiente saepe, beatae nostrum officiis ut quod pariatur minus tempore repudiandae reprehenderit doloribus optio esse mollitia, vero quam, nulla voluptates!<br>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias facilis labore assumenda soluta? Fugit labore ea, blanditiis quia tempore ad vero delectus facilis, iste ullam optio facere sit dignissimos placeat?
                </div>
                <a href = "#" class="detail">查看全文&gt;&gt;</a>
            </div>
            <div class="blog">
                <div class="title">我的第三五篇博客</div>
                <div class="date">2022-5-26</div>
                <div class="dest">
                    生命的艺术在于成长。Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci et sapiente saepe, beatae nostrum officiis ut quod pariatur minus tempore repudiandae reprehenderit doloribus optio esse mollitia, vero quam, nulla voluptates!<br>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias facilis labore assumenda soluta? Fugit labore ea, blanditiis quia tempore ad vero delectus facilis, iste ullam optio facere sit dignissimos placeat?
                </div>
                <a href = "#" class="detail">查看全文&gt;&gt;</a>
            </div>

        </div>
    </div>
</body>
</html>

导航栏.css

/*表示清除默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 设置背景图片*/
html,body{
    height: 100%;
    /*设置html高度相对于父元素浏览器窗口来说是100%
    即设置浏览器背景和浏览器窗口一样高 */
}
body{
    background-image: url("../博客系统/种地吧撒肥料.jpeg");
    background-repeat: no-repeat;/* 背景图片仅显示一次*/
    background-size: cover;
    /*缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，
    cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）*/
    background-position: center center;
    /*为每一个背景图片设置初始位置m关键字 center，用来居中背景图片 */
    
}
/*设置上方导航栏 */
.nav{
    width: 100%;/* 子元素等于父元素的宽度，即nav元素宽度等于body宽度*/
    height: 50px;/* 设置nav元素高度为50px*/
    background-color: rgba(154, 173, 197, 0.3);
    /* 设置元素的背景颜色和透明度*/
    color: #fff;/* 设置元素颜色*/
    display: flex;/*弹性布局 */
    justify-content: flex-start;/*设置元素从左侧开始排列*/
    align-items: center;/* 居中对齐弹性盒的各项元素*/
}
/* 设置头像图片 */
.nav img{
    width: 40px;/*设置nav中img元素宽度为40px */
    height: 40px;/*设置nav中img元素高度为40px */
    margin-left: 30px;/* 设置元素左外边距30px*/
    margin-right: 10px;/*设置元素右外边距 10px*/
    border-radius: 50%;/* 设置元素的外边框圆角，50%是设置为圆形*/
}
/* 设置外链接按钮*/
.nav .spacer{
    width: 70%;/*设置nav中spacer元素宽度为父元素的70% */
}
/* 设置导航栏中按钮*/
.nav a{
    color: #fff;/* 设置元素颜色*/
    text-decoration: none;
    /* 表示强调标记和强调标记的前景色设置为默认值*/
    padding: 0 13px;
    /* 控制元素所有四条边的内边距区域 上边下边=0 | 左边右边-13px*/
}

/* 设置下方区域 */
.container{
    height: calc(100% - 50px);/* 设置元素高度为父元素100%-导航栏50px*/
    width: 1300px;
    margin: 0 auto;/* 上下边距和左右距离*/
    display: flex;/*弹性布局 */
    justify-content: space-between;
     /* 项目在主轴上的对齐方式:两端对齐，项目之间的间隔都相等 */
    align-items: center;/* 居中对齐弹性盒的各项元素*/
}
/* 设置下方左侧区域 */
.container .container-left{

    height: 100%;
    width: 300px;
    
}
/* 设置下方右侧区域 */
.container .container-right{
    height: 100%;
    width: 940px;
    background-color: rgba(231, 234, 239, 0.7);/* 设置背景以及透明度*/
    border-radius: 10px;/* 设置元素的外边框圆角*/
    overflow: auto;/* 如果溢出就自动加上滚动条*/
}
/* 设置下方左侧区域中用户信息框 */
.card{
    background-color: rgba(231, 234, 239, 0.7);
    border-radius: 10px;/* 设置元素的外边框圆角*/
    padding: 30px;
}
/* 设置下方左侧区域中头像图片样式 */
.card img{
    width: 100px;
    height: 100px;
    border-radius: 50%;/* 设置元素的外边框圆角*/
}
/* 设置下方左侧区域中用户名字样式 */
.card h1{
    text-align: center;
    /* 属性规定元素中的文本的水平对齐方式，center：中间 */
    font-size: 7px;
    padding: 10px;
    
}
/* 设置下方左侧区域中gitee链接样式 */
.card a{
    display: block;/*设置为块级元素*/
    text-align: center;
    /* 属性规定元素中的文本的水平对齐方式，center：中间 */
    color: #2c8eac;
    text-decoration: none;/* 表示强调标记和强调标记的前景色设置为默认值*/
    padding: 10px;
    font-size: 7px;
}
/* 设置下方左侧区域中关注与粉丝样式 */
.card .counter{
    padding: 10px;
    font-size: 5px;
    display: flex;/*弹性布局 */
    justify-content: space-around;/* 水平方向排列开*/
}

列表页.css

.blog .title{
    text-align: center;/* 文字居中*/
    font-size: 25px;
    padding: 10px;
    font-weight: 700;
}
.blog .date{
    text-align: center;
    font-size: 10px;
    padding: 10px;
}
.dest{
    text-indent: 2em;
    text-align: left;
    font-size: 15px;
    padding: 10px;
    overflow: auto;/* 如果文字溢出便用滚动条显示剩余内容*/
    text-overflow:ellipsis; /*多余文本用省略号表示 */
}
.blog{
    
    border-radius: 10px;
    padding: 30px;
}
.blog a{
    display: block;/*弹性布局 */
    width: 120px;
    height: 40px;
    line-height: 40px;
    color: black;
    text-align: center;/* 使得其文本内容居中对齐 */
    text-decoration: none;/* 表示强调标记和强调标记的前景色设置为默认值 */
    margin:10px auto 0 auto;/* 设置容器的外边距，上外边距为0，下外边距为10px，左右外边距自动*/
    border: 2px solid black;/* 设置所有的边框属性，边框粗细为2px、样式为实心的、颜色为黑色的边框*/
    transition: all 0.3s;/* 过渡时间0.3s */
    border-radius: 10px;/* 边框圆角 */
    
}
.blog a:hover{
    background-color: rgb(144, 180, 203);/* 设置背景颜色 */
    color: rgb(19, 169, 169);/* 设置元素颜色 */
}

编写列表页注意事项：
1、引入.css文件时注意路径不要写错，建议写成相对路径
2、建立.css文件时先单独建立一个和.html文件等级相同的文件夹然后将所有的.css文件放在里面
3、引入查看全文用<a href = "#" class="detail">查看全文>></a>
4、设置完之后可能会出现列表部分内容分太长超出页面，导致页面bug，此时我们可以在列表部分中单独加入滑动条。
5、具体语法在HTML专栏都中有介绍

所有文件：（文件建立可参考）
在这里插入图片描述