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

fly in the sky !

已于 2024-03-12 16:44:04 修改

阅读量1k

点赞数 26

分类专栏：前端小练习文章标签：前端 html javascript css

于 2024-03-12 16:16:23 首次发布

本文链接：https://blog.csdn.net/m0_73740682/article/details/136655604

版权

前端小练习专栏收录该内容

9 篇文章 2 订阅

订阅专栏

博客网站前端页面的实现

博客登录页

相关代码

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

博客列表页

相关代码

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">查看全文&gt;&gt;</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">查看全文&gt;&gt;</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">查看全文&gt;&gt;</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">查看全文&gt;&gt;</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">查看全文&gt;&gt;</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">查看全文&gt;&gt;</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">查看全文&gt;&gt;</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">查看全文&gt;&gt;</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

博客正文页

相关代码

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

博客编辑页

相关代码

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>
    <!-- 引入 editor.md 的依赖 -->
    <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;
}