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

文章目录


一、预期效果

代码详情见:gitee链接

💕 博客列表页效果

💕 博客详情页效果

💕 博客登录页效果

💕 博客编辑页效果


二、实现博客列表页

💕 blog_list.html

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

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

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

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

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

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

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
html 复制代码
<!--引入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
javascript 复制代码
var editor = editormd("editor",{
        width:"100%",
        height:"calc(100% - 50px)",
        markdown:"# hello world",
        path:"editor.md/lib/"
    });

💕 bolg_edit.html

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

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%;
}

相关推荐
M_emory_6 分钟前
解决 git clone 出现:Failed to connect to 127.0.0.1 port 1080: Connection refused 错误
前端·vue.js·git
Ciito9 分钟前
vue项目使用eslint+prettier管理项目格式化
前端·javascript·vue.js
成都被卷死的程序员42 分钟前
响应式网页设计--html
前端·html
fighting ~1 小时前
react17安装html-react-parser运行报错记录
javascript·react.js·html
老码沉思录1 小时前
React Native 全栈开发实战班 - 列表与滚动视图
javascript·react native·react.js
abments1 小时前
JavaScript逆向爬虫教程-------基础篇之常用的编码与加密介绍(python和js实现)
javascript·爬虫·python
mon_star°1 小时前
将答题成绩排行榜数据通过前端生成excel的方式实现导出下载功能
前端·excel
Zrf21913184551 小时前
前端笔试中oj算法题的解法模版
前端·readline·oj算法
老码沉思录1 小时前
React Native 全栈开发实战班 - 状态管理入门(Context API)
javascript·react native·react.js
文军的烹饪实验室2 小时前
ValueError: Circular reference detected
开发语言·前端·javascript