个人博客网站前端页面的实现

刺骨的言语ヽ痛彻心扉 2024-05-06 21:25 74阅读 0赞

### 博客网站前端页面的实现    ###

### 博客登录页 ###

**相关代码**

`login.html`

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>博客登录页</title>
        <link rel="stylesheet" href="../css/commom.css">
        <link rel="stylesheet" href="../css/login.css">
    </head>
    <body>
          <div class="nav">
            <img src="../img/logo.png" alt="图片没加载出来">
            <span>我的博客系统</span>
            <span class="space"></span>
            <div>
                <a href="blog_list.html">主页</a>
                <a href="blog_edit.html">写博客</a>
                <a href="http://www.baidu.com/">注销</a>
            </div>
        </div>
        <div class="login_container">
            
            <div class="login_dialog">
                <h3>登录</h3>
                <div class="row">
                    <span>用户名</span>
                    <input class="username" type="text">
                </div>
                <div class="row">
                    <span>密码</span>
                    <input class="password" type="password">
                </div>
                <div class="row">
                   <button>提交</button> 
                </div>
            </div>
        </div>
        
    </body>
    </html>

`login.css`

* {
        
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
    }
    .login_container {
        
        height: calc(100% - 50px);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .login_dialog {
        
        width: 400px;
        height: 400px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 14px;
    }
    h3 {
        
        text-align: center;
        margin-top: 50px;
        margin-bottom: 30px;
        font-size: 25px;
    }
    .row {
        
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80px;
    }
    .row span {
        
        font-size: 20px;
        width: 90px;
    }
    .row input {
        
        height: 40px;
        width: 240px;
        font-size: 20px;
        border-radius: 9px;
        border: none;
    }
    .row button {
        
        background-color: #a3dff1;
        width: 330px;
        height: 40px;
        border-radius: 8px;
        border:none;
    }

#### 页面实现效果 ####

![Snipaste\_2024-03-11\_17-11-56][Snipaste_2024-03-11_17-11-56]

### 博客列表页 ###

**相关代码**

`blog_list.html`

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>博客列表页</title>
        <link rel="stylesheet" href="../css/commom.css">
    </head>
    <body>
        <div class="nav">
            <img src="../img/logo.png" alt="图片没加载出来">
            <span>我的博客系统</span>
            <span class="space"></span>
            <div>
                <a href="blog_list.html">主页</a>
                <a href="blog_edit.html">写博客</a>
                <a href="http://www.baidu.com/">注销</a>
            </div>
        </div>
    
        <div class="container">
            <div class="container-left">
                
                <div class="card">
                    <img src="../img/touxiang.jpg" alt="图片没加载出来">
                    <h3>姐姐</h3>
                    <a href="https://gitee.com/liao-feiyangsss">github地址</a>
                    <div class="counter">
                        <span>文章</span>
                        <span>分类</span>
                    </div>
                    <div class="counter">
                        <span>1</span>
                        <span>2</span>
                    </div>
                </div>
            </div>
            <div class="container-right">
                
                <div class="blog">
                    <div class="title">
                       这是第一篇博客 
                    </div>
                    <div class="date">
                        2024-03-11
                    </div>
                    <div class="desc">
                        <p>
                            山风微微，像月光下晃动的海浪，温和而柔软，停留在时光的背后，变成小时候听过的故事。在遥远的城市，陌生的地方，有他未曾见过的山和海
                        </p>
                    </div>
                    <a class="detail" href="blog_content.html?blogId=5">查看全文>></a>
                </div>
               
    
                <div class="blog">
                    <div class="title">
                       这是第二篇博客 
                    </div>
                    <div class="date">
                        2024-03-13
                    </div>
                    <div class="desc">
                        <p>生活中，不需要太多的刻意，一切顺其自然，或许是最好的结果……如果有一天，你看见整天都在疯狂的人，那绝不是我。因为做一个快乐简单的人，一生简单快乐！</p>
                    </div>
                    <a class="detail" href="blog_content.html?blogId=2">查看全文>></a>
                </div>
              
                <div class="blog">
                    <div class="title">
                       这是第三篇博客 
                    </div>
                    <div class="date">
                        2024-03-15
                    </div>
                    <div class="desc">
                        <p>太阳冉冉升起，清风柔柔吹起。花儿伸伸懒腰，喜鹊唧唧鸣唱。当你睁开眼睛时，世界的美好送给你。清扬的闹铃响起时，我美好的祝福呈现给你。</p>
                    </div>
                    <a class="detail" href="blog_content.html?blogId=3">查看全文>></a>
                </div>
    
                <div class="blog">
                    <div class="title">
                       这是第四篇博客 
                    </div>
                    <div class="date">
                        2024-03-17
                    </div>
                    <div class="desc">
                        <p>如果你认为自己会被击倒，你就会被击倒。如果你认为自己没有希望，你就会没有希望。如果你对自己的生活持消极态度，你的生活就真的会变得很消极。如果你积极对待生活，你就会发现，生活是如此美好。</p>
                    </div>
                    <a class="detail" href="blog_content.html?blogId=4">查看全文>></a>
                </div>
    
                <div class="blog">
                    <div class="title">
                       这是第五篇博客 
                    </div>
                    <div class="date">
                        2024-03-19
                    </div>
                    <div class="desc">
                        <p>每个人都有自己的幸福，仰望别人的幸福时，别人也在仰望你的幸福。难得糊涂，容易幸福；知足常乐，更容易获得幸福。幸福需要感觉，感觉幸福就是幸福。我们拼命地追求幸福，因为幸福就在身边；我们设高的要求，因为我们害怕失望。</p>
                    </div>
                    <a class="detail" href="blog_content.html?blogId=5">查看全文>></a>
                </div>
    
                <div class="blog">
                    <div class="title">
                       这是第六篇博客 
                    </div>
                    <div class="date">
                        2024-03-21
                    </div>
                    <div class="desc">
                        <p>
                            如果难过，就努力抬头望天空吧，望着望着就忘了……它那么大，一定可以包容你的所有委屈。
                        </p>
                    </div>
                    <a class="detail" href="blog_content.html?blogId=5">查看全文>></a>
                </div>
    
                <div class="blog">
                    <div class="title">
                       这是第七篇博客 
                    </div>
                    <div class="date">
                        2024-03-23
                    </div>
                    <div class="desc">
                        <p>
                            记忆像是倒在掌心的水，不论你摊开还是紧握，终究还是会从指缝中一滴一滴流淌干净
                        </p>
                    </div>
                    <a class="detail" href="blog_content.html?blogId=5">查看全文>></a>
    
                </div>
                <div class="blog">
                    <div class="title">
                       这是第八篇博客 
                    </div>
                    <div class="date">
                        2024-03-25
                    </div>
                    <div class="desc">
                        <p>人生就像一座山，重要的不是它的高低，而在于灵秀；人生就像一场雨，重要的不是它的大小，而在于及时。</p>
                    </div>
                    <a class="detail" href="blog_content.html?blogId=1">查看全文>></a>
                </div>
    
            </div>
        </div>
    </body>
    </html>

`common.css`

* {
        
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    html,body {
        
        height: 100%;
        width: 100%;
        background-image: url(../img/background.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .nav {
        
        width: 100%;
        height: 60px;
        background-color:  gray;
        display: flex;
        justify-content: left;
        align-items: center;
        color: white;
    }
    .nav img {
        
        width: 50px;
        height: 50px;
        border-radius: 50%;
        /* margin-top: 4px; */
        margin-left: 4px;
        margin-right: 8px;
    }
    
    
    .nav .space {
        
        width: 75%;
    }
    
    
    .nav a {
        
        color: white;
        text-decoration: none;
        /* margin-left: 10px; */
        margin-right: 15px;
    }
    .nav div {
        
        display: flex;
        justify-content: right;
        align-items: center;
        width: 15%;
    }
    .container {
        
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        height: calc(100% - 50px);
        width: 100%;
    }
    
    .container .container-left {
        
        height: 100%;
        width: 30%;
        background-color: rgba(255,255,255,0.8);
    }
    
    .container .container-right {
        
        height: 100%;
        width: 70%;
        background-color: rgba(255,255,255,0.8);
        overflow: auto;
    }
    .card {
        
        margin-top: 10px;
        width: 60%;
        height: 44%;
        background-color: rgba(255,255,255,0.8);
        margin-left: 200px;
        margin-right: 10px;
        border-radius: 15px;
    }
    .card img {
        
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin-left: 90px;
        margin-top: 35px;
    }
    .card h3 {
        
        text-align: center;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .card a {
        
        display: block;
        text-align: center;
        color: grey;
        text-decoration: none;
        margin-bottom: 20px;
    }
    .card .counter {
        
        display: flex;
        justify-content: space-around;
        margin-top: 22px;
    }
    
    .blog {
        
        width: 100%;
        background-color:rgba(255,255,255,0.8);
        border-radius: 15px;
        margin-top: 12px;
    }
    
    .blog .title {
        
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        padding-top: 20px;
    }
    .blog .date {
        
        color: rgb(47, 213, 255);
        padding-bottom: 10px;
        padding-top: 20px;
        text-align: center;
    }
    .blog .desc {
        
        text-indent: 2em;
        line-height: 30px;
        margin-top: 8px;
    }
    
    .blog .detail {
        
        color: black;
        text-align: center;
        display: block;
        width: 140px;
        height: 30px;
        margin: 10px auto 0px auto;
        border: 2px solid rgb(20, 24, 24);
        line-height: 22px;
        text-decoration: none;
    }
    
    .blog .detail:active {
        
        color: blue;
    }

#### 页面实现效果 ####

![Snipaste\_2024-03-11\_17-11-39][Snipaste_2024-03-11_17-11-39]

### 博客正文页    ###

**相关代码**

`blog_content.html`

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>博客正文页</title>
        <link rel="stylesheet" href="../css/content.css">
    </head>
    
    <body>
        <div class="nav">
            <img src="../img/logo.png" alt="图片没加载出来">
            <span>我的博客系统</span>
            <span class="space"></span>
            <div>
                <a href="blog_list.html">主页</a>
                <a href="blog_edit.html">写博客</a>
                <a href="http://www.baidu.com/">注销</a>
            </div>
        </div>
    
        <div class="container">
            <div class="container-left">
                
                <div class="card">
                    <img src="../img/touxiang.jpg" alt="图片没加载出来">
                    <h3>姐姐</h3>
                    <a href="https://gitee.com/liao-feiyangsss">github地址</a>
                    <div class="counter">
                        <span>文章</span>
                        <span>分类</span>
                    </div>
                    <div class="counter">
                        <span>1</span>
                        <span>2</span>
                    </div>
                </div>
            </div>
            <div class="container-right">
                
                <div class="blog">
                    <div class="title">
                        《春天的早晨》
                    </div>
                    <div class="date">
                        2024-03-11
                    </div>
                    <div class="desc">
                        <p>
                            春天的早晨，是一首充满生机的诗篇。它轻轻地掀开夜幕，洒下一片淡淡的金色，像细沙般温柔地抚摸着沉睡的大地。万物在这温暖的光芒中苏醒，仿佛经过了一个冬天的沉寂，都迫不及待地想要展现出自己最美的姿态。
                        </p>
                        <P>
                            柳树披上了嫩绿的新装，柔软的枝条在微风中摇曳，好似少女的长发，飘逸而动人。河水也被这春色感染，变得碧波荡漾，宛如一面镜子，映照着蓝天白云和岸边的繁花。
                            空气中弥漫着淡淡的花香，那是桃花、杏花和樱花争相绽放的香气，它们交织在一起，形成了一种独特的春天的味道。这种味道让人心旷神怡，仿佛置身于一个梦幻般的仙境。
                            远处的小鸟开始欢快地歌唱，它们的歌声清脆悦耳，仿佛在庆祝春天的到来。小路上，早起的行人踏着轻快的步伐，脸上洋溢着笑容，他们也被这美好的春色所感染，心中充满了希望和期待。
                        </P>
                        <p>
                            春天的早晨，是一首充满希望和生机的诗篇。它让人感受到大自然的神奇和美丽，也让人对未来充满了无限的憧憬和期待。在这美好的时刻，我们仿佛可以感受到整个世界都在为我们而歌唱，为我们而绽放。
                        </p>
                    </div>
                </div>
    </body>
    </html>

`content.css`

* {
        
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    html,body {
        
        height: 100%;
        width: 100%;
        background-image: url(../img/background.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .nav {
        
        width: 100%;
        height: 60px;
        background-color:  gray;
        display: flex;
        justify-content: left;
        align-items: center;
        color: white;
    }
    .nav img {
        
        width: 50px;
        height: 50px;
        border-radius: 50%;
        /* margin-top: 4px; */
        margin-left: 4px;
        margin-right: 8px;
    }
    
    
    .nav .space {
        
        width: 75%;
    }
    
    
    .nav a {
        
        color: white;
        text-decoration: none;
        /* margin-left: 10px; */
        margin-right: 15px;
    }
    .nav div {
        
        display: flex;
        justify-content: right;
        align-items: center;
        width: 15%;
    }
    .container {
        
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        height: calc(100% - 50px);
        width: 100%;
    }
    
    .container .container-left {
        
        height: 100%;
        width: 30%;
        background-color: rgba(255,255,255,0.8);
    }
    
    .container .container-right {
        
        height: 100%;
        width: 70%;
        background-color: rgba(255,255,255,0.8);
        overflow: auto;
    }
    .card {
        
        margin-top: 10px;
        width: 60%;
        height: 44%;
        background-color: rgba(255,255,255,0.8);
        margin-left: 200px;
        margin-right: 10px;
        border-radius: 15px;
    }
    .card img {
        
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin-left: 90px;
        margin-top: 35px;
    }
    .card h3 {
        
        text-align: center;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .card a {
        
        display: block;
        text-align: center;
        color: grey;
        text-decoration: none;
        margin-bottom: 20px;
    }
    .card .counter {
        
        display: flex;
        justify-content: space-around;
        margin-top: 22px;
    }
    
    .blog {
        
        width: 100%;
        background-color:rgba(255,255,255,0.8);
        border-radius: 15px;
        margin-top: 12px;
        height: calc(100% - 30px);
        overflow: auto;
    }
    
    .blog .title {
        
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        padding-top: 20px;
    }
    .blog .date {
        
        color: rgb(47, 213, 255);
        padding-bottom: 10px;
        padding-top: 20px;
        text-align: center;
    }
    .blog .desc {
        
        text-indent: 2em;
        line-height: 30px;
        margin-top: 8px;
    }
    
    .blog .detail {
        
        color: black;
        text-align: center;
        display: block;
        width: 140px;
        height: 30px;
        margin: 10px auto 0px auto;
        border: 2px solid rgb(20, 24, 24);
        line-height: 22px;
        text-decoration: none;
    }

#### 页面实现效果 ####

![Snipaste\_2024-03-11\_17-11-24][Snipaste_2024-03-11_17-11-24]

### 博客编辑页    ###

**相关代码**

`blog_edit.html`

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>博客编辑页</title>
        <link rel="stylesheet" href="../css/commom.css">
        <link rel="stylesheet" href="../css/edit.css">
        <link rel="stylesheet" href="editor.md/css/editormd.min.css"/>
    </head>
    <body>
        <div class="nav">
            <img src="../img/logo.png" alt="图片没加载出来">
            <span>我的博客系统</span>
            <span class="space"></span>
            <div>
                <a href="blog_list.html">主页</a>
                <a href="blog_edit.html">写博客</a>
                <a href="http://www.baidu.com/">注销</a>
            </div>
        </div>
    
        <div class="edit_blog_container">
            <div class="title">
                <input type="text">
                <button>发布文章</button>
            </div>
            <div id="editor">
    
            </div>
        </div>
    </body>
        
        <script src="js/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>
        <script>
            let edit = editormd('editor', {
          
                width:"100%",
                height:"100%",
                markdown:"###开始编写博客",
                path:"./editor.md/lib/"
            }) 
        </script>
    </html>

`edit.css`

.edit_blog_container {
        
        height: calc(100% - 50px);
        width: 100%;
    }
    input {
        
        width: 1000px;
        height: 60px;
        margin-top: 5px;
        border-radius: 8px;
        border: none;
    }
    button {
        
        width: 200px;
        height: 60px;
        margin-top: 5px;
        margin-left: 5px;
        border-radius: 8px;
        background-color: #afefd6;
        border: none;
        color: white;
        font-size: 20px;
        margin-top: 5px;
    }
    
    button:active {
        
        background-color: gray;
    }
    .title {
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #editor {
        
        margin-top: 5px;
    }

#### 页面实现效果 ####

![Snipaste\_2024-03-11\_17-11-09][Snipaste_2024-03-11_17-11-09]

[Snipaste_2024-03-11_17-11-56]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/287439b7d62c4cb99790568bfb96d74f.png
[Snipaste_2024-03-11_17-11-39]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/0e670115ac8e41cc86fdb4d0a1e68c43.png
[Snipaste_2024-03-11_17-11-24]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/6092f582b92f40c5ac9a48eb37d3ba81.png
[Snipaste_2024-03-11_17-11-09]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/7aa242d419694f12afe7a635d7c3856c.png