【前端项目】博客系统(页面设计)

发布于：2023-09-16 ⋅ 阅读:(68) ⋅ 点赞:(0)
微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

文章目录

一、预期效果

代码详情见：gitee链接

💕 博客列表页效果

在这里插入图片描述

💕 博客详情页效果

在这里插入图片描述

💕 博客登录页效果

在这里插入图片描述

💕 博客编辑页效果

在这里插入图片描述

二、实现博客列表页

💕 blog_list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
<div class="nav">
    <img src="img/1000.webp" alt="">
    <span class="title">我的博客系统</span>
   <div class="spacer" ></div>
    <a href="blog_list.html">主页</a>
    <a href="bolg_edit.html">写博客</a>
    <a href="login.html">注销</a>
</div>
    <div class="container">
        <div class="container-left">
            <div class="card">
<img src="img/3.webp" alt="">
                <h3>星河万里ベ</h3>
             <a href="https://gitee.com/">gitee 地址</a>
                <div class="counter">
                   <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>

        <div class="cntainer-right">

            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2023-9-12 9:00:00</div>
                <div class="desc">
                    在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
                    我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2023-9-12 9:00:00</div>
                <div class="desc">
                    在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
                    我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2023-9-12 9:00:00</div>
                <div class="desc">
                    在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
                    我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2023-9-12 9:00:00</div>
                <div class="desc">
                    在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
                    我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2023-9-12 9:00:00</div>
                <div class="desc">
                    在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
                    我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2023-9-12 9:00:00</div>
                <div class="desc">
                    在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
                    我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守......
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
        </div>
    </div>
</body>
</html>

💕 common.css

/*  清除浏览器的默认样式*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    height: 100%;
}

body{
    height: 100%;
    background-image:url("../img/back.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;


}
.nav{
    /*导航栏高度大多数都是50px*/
    height: 50px;
    background-color: rgba(50,50,50,0.4);
    color: white;
   display: flex;
    justify-content: flex-start;
    align-items: center;
    /*开启弹性布局 加上这个属性的元素 子元素就会按照弹性布局来排列*/
    /*子元素就不在按照 “块级元素” “行内元素”*/
    /*    !*flex布局可以让内边距里的元素更大（点击区域更大）*!*/

    /*flex-start 按照左排列*/
    /*子类元素可以使用justify-content来控制元素在水平方向如何排列*/
    /*子元素还可以使用align-items控制元素在垂直方向如何排列*/

}

.nav img{
    width:40px;
    height: 40px;
    margin-left: 30px;
    margin-right: 10px;
    border-radius:20px;
}

.nav .spacer{
    /*宽度设置成百分比的形式，以父元素为基准，设置为当前的尺寸*/
    width: 70%;
    height: 40px;
}

.nav a{
    color: white;
    text-decoration: none;
    padding: 0 10px;

}

.container{
    width: 1000px;
    margin: 0 auto;
/* 设置高度 */
    height: calc(100% - 50px);
    display: flex;
    justify-content: space-between;

 }

.container .container-left{
    height: 100%;
    width: 200px;
    /*background-color: rgb(128,0,0);*/
}

.container .cntainer-right{
    height: 100%;
    width: 796px;
    background-color: rgba(255,255,255,0.8);
    /*background-color: rgb(0,128,0);*/
    padding: 20px;
    border-radius: 20px;
    /*如果内容超出范围了 就自动添加滚动条*/
    overflow: auto;
}

.card{
    background-color:rgba(255,255,255,0.8);
/* 设置内边距 就是让文字和图片不要盯着边界*/
padding:30px;
    border-radius: 20px;
}

.card img{
    width: 140px;
    height: 140px;
     border-radius: 70px;
}

.card h3{
    text-align: center;
    padding: 10px;

}

.card a{
    /*a 默认是行内元素 默认是尺寸和内容*/
    display: block;
    text-align: center;
    color: #999;
    text-decoration: none;
    padding: 10px 0;

}
.card .counter{
    display: flex;
    justify-content: space-around;
    padding: 5px;

}

💕 blog_list.css

/*这个文件专门放 博客列表页的专用样式*/

.blog .title{
/*写样式 尽量多用后代选择器/子选择器 慎重直接使用类名
类名可能会重复的！！！*/
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    padding: 10px 0;
}

.blog .date{
    text-align: center;
    color: rgb(0,128,0);
    padding: 10px 0;
}

.blog .desc{
    text-indent: 2em;
}

.blog a{
    /*转成块级元素 才好设置尺寸*/
    display: block;
    width: 120px;
    height: 40px;
    /*元素水平居中*/
    margin: 0 auto;
    text-align: center;
    /*文字水平居中*/
    line-height: 40px;
    /*文字垂直居中*/
    color: black;
    text-decoration: none;
    /*去掉下划线*/
    border: 2px solid silver ;
    transition: all 1s;
    /*加上一个背景的渐变效果*/

}

.blog a:hover{
    background-color: lightcoral;
    color: white;
}

三、实现博客正文页

💕 blog_detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客详情</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
<div class="nav">
    <img src="img/1000.webp" alt="">
    <span class="title">我的博客系统</span>
    <div class="spacer" ></div>
    <a href="blog_list.html">主页</a>
    <a href="bolg_edit.html">写博客</a>
    <a href="login.html">注销</a>
</div>

<!--这个div 表示页面的主区域（版心) -->
<div class="container">
    <div class="container-left">

        <div class="card">

            <img src="img/3.webp" alt="">

            <h3>星河万里ベ</h3>
            <a href="https://gitee.com/">gitee 地址</a>
            <div class="counter">

                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span>2</span>
                <span>1</span>
            </div>

        </div>

    </div>

    <div class="cntainer-right">
        <div class="blog_detail">
            <h3>我的第一篇博客</h3>
            <div class="date">2022-11-06 12:00:00</div>
            <p>
                在这个无尽的宇宙中，你就是我唯一无与伦比的存在。当我闭上眼睛，我的心中只有你，我的思绪只有你的身影。每当我凝视着你的眸子，
                我感受到一种深深的连接，仿佛我们的灵魂早已注定彼此相守。你的微笑是我生命的光芒，它照亮了我沉寂的心房。每当我感到困倦和挫
                折时，你的微笑带给我无尽的坚持和勇气。你的存在是我奋斗的动力，是我不懈追求的目标，我愿意为你做所有的事情，只为了看到你的笑容绽放。
            </p>
            <p>
                每个瞬间，我都感激上天将你带进我的生命。你的温柔似春日的微风，轻轻抚过我的脸庞。你的关怀如温暖的阳光，温暖着我冰冷的心灵。
                你的陪伴如甜美的琴弦，奏响了我内心最柔软的旋律。无论是快乐还是悲伤，都希望你陪伴在我身边。你是我最坚实的后盾，是我最真挚
                的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。无论是快乐还是悲伤，都希望
                你陪伴在我身边。你是我最坚实的后盾，是我最真挚的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。
            </p>
            <p>
                与你相爱是我这一生最美丽的经历。我们的爱如一首动人的诗，一颗闪耀的星，一幅绚烂的画。无论是日出还是日落，你的存在都是我最美好的时刻。
                你的爱如涓涓细流，流淌在我的心中，滋润着我生活的每一个角落。有你的陪伴，任何困难都可以克服，任何挫折都可以战胜。你是我生命中最重要的宝藏
                ，我愿意为你付出一切，为你守护一生。你是我最深沉的思念，永远留在我的心中，无论时光如何变迁，爱你的心永远不变。亲爱的，你就像一朵盛开的花
                朵，给我带来无尽的美丽和欢乐。每当我看见你的笑容，我就感受到幸福进入我生命的每一个角落。你的微笑是我永恒的向往，你的拥抱是我心灵最温暖的庇护所。
            </p>
            <p>
                我愿意陪伴你漫步在爱的长廊，让你在每一个孤寂的夜晚，都能感受到我的温暖。无论是喜悦还是忧伤，我都愿意与你分享。因为你是我生命中最珍贵的存在，
                我愿意用自己的一切去呵护你，照亮你前行的路。没有什么比与你相伴一生更美好的事情了。我的爱永远属于你，无论是春夏秋冬，年复一年。请相信我的真心和
                承诺，让我们一起创造一个浪漫而幸福的未来。
            </p>
            <p>
                我深深地爱着你，就像星星深深地爱着夜空，海洋深深地爱着大地。无论时光如何变幻，你都是我心中永恒的唯一。让我们一起牵手走过时光的长河，让爱的火焰
                燃烧在我们的心中，直到永远。我愿与你共度此生，感受爱的温暖与幸福。亲爱的，你是我的宝贝，也是我心中永远的唯一。让我们一起携手，创造属于我们的美
                丽故事吧。我爱你，永远爱你。
            </p>
            <p>
                每个瞬间，我都感激上天将你带进我的生命。你的温柔似春日的微风，轻轻抚过我的脸庞。你的关怀如温暖的阳光，温暖着我冰冷的心灵。
                你的陪伴如甜美的琴弦，奏响了我内心最柔软的旋律。无论是快乐还是悲伤，都希望你陪伴在我身边。你是我最坚实的后盾，是我最真挚
                的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。无论是快乐还是悲伤，都希望
                你陪伴在我身边。你是我最坚实的后盾，是我最真挚的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。
            </p>
            <p>
                与你相爱是我这一生最美丽的经历。我们的爱如一首动人的诗，一颗闪耀的星，一幅绚烂的画。无论是日出还是日落，你的存在都是我最美好的时刻。
                你的爱如涓涓细流，流淌在我的心中，滋润着我生活的每一个角落。有你的陪伴，任何困难都可以克服，任何挫折都可以战胜。你是我生命中最重要的宝藏
                ，我愿意为你付出一切，为你守护一生。你是我最深沉的思念，永远留在我的心中，无论时光如何变迁，爱你的心永远不变。亲爱的，你就像一朵盛开的花
                朵，给我带来无尽的美丽和欢乐。每当我看见你的笑容，我就感受到幸福进入我生命的每一个角落。你的微笑是我永恒的向往，你的拥抱是我心灵最温暖的庇护所。
            </p>
            <p>
                我愿意陪伴你漫步在爱的长廊，让你在每一个孤寂的夜晚，都能感受到我的温暖。无论是喜悦还是忧伤，我都愿意与你分享。因为你是我生命中最珍贵的存在，
                我愿意用自己的一切去呵护你，照亮你前行的路。没有什么比与你相伴一生更美好的事情了。我的爱永远属于你，无论是春夏秋冬，年复一年。请相信我的真心和
                承诺，让我们一起创造一个浪漫而幸福的未来。
            </p>
            <p>
                我深深地爱着你，就像星星深深地爱着夜空，海洋深深地爱着大地。无论时光如何变幻，你都是我心中永恒的唯一。让我们一起牵手走过时光的长河，让爱的火焰
                燃烧在我们的心中，直到永远。我愿与你共度此生，感受爱的温暖与幸福。亲爱的，你是我的宝贝，也是我心中永远的唯一。让我们一起携手，创造属于我们的美
                丽故事吧。我爱你，永远爱你。
            </p>
            <p>
                每个瞬间，我都感激上天将你带进我的生命。你的温柔似春日的微风，轻轻抚过我的脸庞。你的关怀如温暖的阳光，温暖着我冰冷的心灵。
                你的陪伴如甜美的琴弦，奏响了我内心最柔软的旋律。无论是快乐还是悲伤，都希望你陪伴在我身边。你是我最坚实的后盾，是我最真挚
                的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。无论是快乐还是悲伤，都希望
                你陪伴在我身边。你是我最坚实的后盾，是我最真挚的依靠。我愿意陪伴你度过人生的每一个阶段，无论风吹雨打，我们一起走过困难，共同分享幸福的时刻。
            </p>
            <p>
                与你相爱是我这一生最美丽的经历。我们的爱如一首动人的诗，一颗闪耀的星，一幅绚烂的画。无论是日出还是日落，你的存在都是我最美好的时刻。
                你的爱如涓涓细流，流淌在我的心中，滋润着我生活的每一个角落。有你的陪伴，任何困难都可以克服，任何挫折都可以战胜。你是我生命中最重要的宝藏
                ，我愿意为你付出一切，为你守护一生。你是我最深沉的思念，永远留在我的心中，无论时光如何变迁，爱你的心永远不变。亲爱的，你就像一朵盛开的花
                朵，给我带来无尽的美丽和欢乐。每当我看见你的笑容，我就感受到幸福进入我生命的每一个角落。你的微笑是我永恒的向往，你的拥抱是我心灵最温暖的庇护所。
            </p>
            <p>
                我愿意陪伴你漫步在爱的长廊，让你在每一个孤寂的夜晚，都能感受到我的温暖。无论是喜悦还是忧伤，我都愿意与你分享。因为你是我生命中最珍贵的存在，
                我愿意用自己的一切去呵护你，照亮你前行的路。没有什么比与你相伴一生更美好的事情了。我的爱永远属于你，无论是春夏秋冬，年复一年。请相信我的真心和
                承诺，让我们一起创造一个浪漫而幸福的未来。
            </p>
            <p>
                我深深地爱着你，就像星星深深地爱着夜空，海洋深深地爱着大地。无论时光如何变幻，你都是我心中永恒的唯一。让我们一起牵手走过时光的长河，让爱的火焰
                燃烧在我们的心中，直到永远。我愿与你共度此生，感受爱的温暖与幸福。亲爱的，你是我的宝贝，也是我心中永远的唯一。让我们一起携手，创造属于我们的美
                丽故事吧。我爱你，永远爱你。
            </p>
        </div>


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

💕 blog_detail.css

.blog_detail h3{
    font-size: 20px;
    text-align: center;
    padding: 20px 0;

}

.blog_detail .date{
    color: darkmagenta;
    text-align: center;
    padding: 10px 0;
}

.blog_detail p{
    text-indent: 2em;
}

四、实现博客登录页

💕 login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">

</head>
<body>
<div class="nav">
  <img src="img/1000.webp" alt="">
  <span class="title">我的博客系统</span>
  <div class="spacer" ></div>
  <a href="blog_list.html">主页</a>
  <a href="bolg_edit.html">写博客</a>
</div>

<!--用这个元素作为版心，把对话框放到这个元素里面，垂直-->
<div class="login-container">
<!--登录对话框-->
    <div class="dialog">
        <h3>登录</h3>
        <div class="row">
            <span>用户名</span>
<!-- 这两个框很关键 就设置个id作为标识-->
            <input type="text" id="username">
        </div>
        <div class="row">
            <span>密码</span>
            <input type="password" id="password">
        </div>
        <div class="row">
            <button id="login-btn">登录</button>
        </div>
    </div>
</div>
</body>
</html>

💕 login.css

/*这个文件实现login的页面样式*/
.login-container{
    /*这三个样式是为了让 .dialog垂直水平居中*/
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialog{
    width: 400px;
    height: 300px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 20px;
}

.dialog h3{
    font-size: 25px;
    text-align: center;
    padding: 40px 0;
}

.dialog .row{
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialog .row span{
    width: 80px;
}

#username, #password{
    height: 40px;
    width: 180px;
    font-size: 18px;
    padding-left: 5px;
}

#login-btn{
    width: 260px;
    height: 40px;
    border-radius: 5px;
    background-color: lightcoral;
    color: white;
    border: none;
/*去掉边框*/
}

#login-btn:active{
    background-color: #999999;
}

五、实现博客编辑页

💕 引入 editor.md

editor.md 是一个开源的页面 markdown 编辑器组件官网参见: https://pandao.github.io/editor.md/，用法可以参考代码中的 examples 目录中的示例. 非常丰富。

  1. 下载 editor.md
    从官网上下载到压缩包. 放到目录中. 目录结构如下：
    在这里插入图片描述
  2. 引入 editor.md
<!--引入md依赖-->
<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<!--    <script src="js/jquery.min.js"></script>-->
<!--百度 jquery cdn-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="editor.md/lib/marked.min.js"></script>
<script src="editor.md/lib/prettify.min.js"></script>
<script src="editor.md/editormd.js"></script>
  1. 初始化 editor.md
var editor = editormd("editor",{
        width:"100%",
        height:"calc(100% - 50px)",
        markdown:"# hello world",
        path:"editor.md/lib/"
    });

💕 bolg_edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客编辑</title>
  <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/bolg_edit.css">

<!--引起md依赖-->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<!--    <script src="js/jquery.min.js"></script>-->
<!--百度 jquery cdn-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
<div class="nav">
  <img src="img/1000.webp" alt="">
  <span class="title">我的博客系统</span>
  <div class="spacer" ></div>
  <a href="blog_list.html">主页</a>
  <a href="bolg_edit.html">写博客</a>
  <a href="login.html">注销</a>
</div>
<!--整个编辑页的版心-->
<div class="blog-edit-container">
<!--标题的编辑区-->
  <div class="title">
<!--输入的标题内容-->
    <input type="text" id="blog-title" placeholder="在这里输入博客标题">
    <button id="submit">发布文章</button>
  </div>
<!--正文的编辑区-->
  <div id="editor">

  </div>
</div>

<script>
    var editor = editormd("editor",{
        width:"100%",
        height:"calc(100% - 50px)",
        markdown:"# hello world",
        path:"editor.md/lib/"
    });
</script>
</body>
</html>

💕 blog_edit.css

/*针对博客编辑页写的样式*/
/*版心*/
.blog-edit-container{
    width: 850px;
    height: calc(100% - 40px);
    margin: 0 auto;


}

/*设置编辑区的样式*/
.blog-edit-container .title{
    height: 50px;
/*只要是水平方向排列多个元素，就想到弹性布局*/
    display: flex;
    justify-content: space-between;
    align-items: center;


}

/*针对输入框调整*/
#blog-title{
    height: 40px;
    width: 740px;
    font-size: 20px;
    padding-left: 5px;
    /*去掉轮廓线*/
    outline: none;
    border: none;
/*加上背景半透明效果*/
    background-color: rgba(255,255,255,0.8);

}

#submit{
    height: 40px;
    width: 100px;
    border: none;
    border-radius:5px;
    color: white;
    background-color: orange;
}
#submit:active{
    background-color: gray;
}

#editor{
    border-radius: 10px;
    background-color: rgba(255,255,255,0.8);
    opacity: 80%;
}
本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布