博客页面---前端

Lonely丶墨轩2024-04-01 11:18

目录

主页

HTML

CSS

文章详细页面

HTML

CSS

登录页面

HTML

CSS

文章编辑页

HTML

CSS

这只是前端的页面组成，还没有接入后端，并不是完全体

主页

HTML

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/common.css">
    <link rel="stylesheet" href="css/blog.css">
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo图片 -->
        <img src="image/logo.jpg" alt="" width="50px">

        <span class="title">我的博客系统</span>
        <span class="spacer"></span>

        <!-- 导航栏 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>

    <!-- 页面主体 -->
    <div class="container">

        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="image/蕾姆.jpg" alt="">
                <h2>墨轩</h2>
                <a href="#">github链接</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>3</span>
                </div>
            </div>


        <!-- 右侧个人信息 -->
        </div>
        <div class="container-right">
            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            <!-- &gt;是html的> 正常的>无法之间写入 -->

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

            <div class="blog">这是我的第一篇文章</div>
            <div class="date">2024-3-27 20:20</div>
            <div class="desc">文章内容Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quis quos, numquam tenetur cum ipsa architecto nihil, a asperiores error fugit. Praesentium eaque animi esse nemo ut nobis atque.</div>
            <a href="#">查看全文 &gt;&gt; </a>

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

CSS

css 复制代码 
html,body{
    /* 让html和body占满浏览器窗口 */
    height: 100%;
    width: 100%;
    background-image: url(../image/风景图.jpg);
    /* background-repeat: no-repeat; */
    background-size: cover;
}

.nav{
    width: 100%;
    height: 50px;
    background-color: rgba(50, 50, 50,0.3);
    color: white;

    /* 开启弹性布局 */
    display: flex;
    /* 水平居中 */
    align-items: center;
}

.nav img{
    /* 将图片设为圆的 */
    border-radius: 50px;
    /* 左侧间距 */
    margin-left: 30px;
    /* 右侧间距 */
    margin-right: 20px;
}

/* 用于隔开我的博客和主页 */
.nav .spacer{
    width: 78%;
}

.nav a{
    color: white;
    /* 上下间隔0 左右6px */
    padding: 0 6px;
}

.container{
    width: 1000px;
    /* 使用这个函数 -直接必须有空格 */
    /* 因为是100% 导航栏自带50px 再用100% 会多出50px 所已要减去多出来的50px */
    height: calc(100% - 100px);
    margin: 0 auto;

    /* 让两个div能在同一行 */
    display: flex;

    /* 元素之间留有空隙 */
    justify-content: space-between;
}

.container-left{
    height: 30%;
    width: 200px;

    
}

.container-right{
    height: 100%;
    width: 750px;

    background-color: rgba(255, 255, 255, 0.5);

    /* 边框圆角 */
    border-radius: 10px;

    overflow: auto;
}

.card{
    background-color: rgba(255,255,255,0.5);
    /* 内边距距离 */
    padding: 30px;
    /* 边框圆角 */
    border-radius: 10px;
}

/* 用户图片 */
.card img{
    width: 140px;
    height: 140px;
    border-radius: 70px;
}

/* 用户昵称 */
.card h2{
    text-align: center;
    /* padding: 10px; */
}

/* 链接属性 */
.card a{
    /* 开启弹性布局后 居中 */
    display: block;
    text-align: center;
}

/* 文章属性 */
.card .counter{
    /* 开启弹性布局 */
    display: flex;
    text-align: center;

    /* 文章与分类分开 */
    justify-content: space-around;
}

/* 因为右侧文章会变换 所有右侧的css单独出来 */

右侧文章只要这个页面有，所以css是单独出来的

css 复制代码 
/* 右侧个人信息栏 */
.container-right{
    /* 一个em为一个字的长度 */
    text-indent: 3em;
    /* 距离四个边都有20px的距离 */
    padding: 20px;
}

.blog{
    text-align: center;
    /* 字体大小 */
    font-size: 37px;
    /* 行间距 上下5 左右0 */
    padding: 5px 0;
    /* 字体粗细 */
    font-weight: 600;
}

.date{
    text-align: center;
    font-size: 20px;
    color: grey;
    /* 行间距 上下5 左右0 */
    padding: 5px 0;
}

.container-right a{
    /* 设置成块级元素 */
    display: block;
    width: 150px;
    height: 30px;
    /* 块级元素居中 上下10 左右自适应 */
    margin: 10px auto;
    /* 边框 粗细 黑色 实习 */
    border: 2px black solid;
    text-align: center;
    color: black;
    /* 去除下划线 */
    text-decoration: none;

    /* 颜色过渡 1s */
    transition: all 1s;
}

/* 伪类选择器 鼠标放上去变色 */
.container-right a:hover{
    background-color: black;
    color: white;
}

文章详细页面

HTML

里面包含多个css文件

css 复制代码 
<!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/common.css">
    <link rel="stylesheet" href="css/blog.css">
    <link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
        <!-- 导航栏 -->
        <div class="nav">
            <!-- logo图片 -->
            <img src="image/logo.jpg" alt="" width="50px">
    
            <span class="title">我的博客系统</span>
            <span class="spacer"></span>
    
            <!-- 导航栏 -->
            <a href="blog_list.html">主页</a>
            <a href="blog_edit.html">写博客</a>
            <a href="#">注销</a>
        </div>

        <!-- 页面主体 -->
    <div class="container">

        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="image/蕾姆.jpg" alt="">
                <h2>墨轩</h2>
                <a href="#">github链接</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>3</span>
                </div>
            </div>


        <!-- 右侧个人信息 -->
        </div>
        <div class="container-right">
            <div class="blog-content">
                <h3>我的第一篇博客</h3>
                <div class="date">2024-3-27 22:33</div>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis illo, blanditiis dolores praesentium, dolore minima nihil quod dolorem iure fugiat voluptas dolorum, officiis illum aspernatur quasi eaque temporibus doloribus voluptatibus!</p>
            </div>
        </div>
    </div>
</body>
</html>

CSS

css 复制代码 
.blog-content h3{
    text-align: center;
}

登录页面

HTML

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/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
        <!-- 导航栏 -->
        <div class="nav">
            <!-- logo图片 -->
            <img src="image/logo.jpg" alt="" width="50px">
    
            <span class="title">我的博客系统</span>
            <span class="spacer"></span>
    
            <!-- 导航栏 -->
            <a href="blog_list.html">主页</a>
            <a href="blog_edit.html">写博客</a>
        </div>

        <!-- 登录板块 -->
        <div class="login-container">
            <div class="login-dialog">
                <p>登录</p>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password">
            </div>
            <div class="row">
                <input type="button" value="提交"id="submit">
            </div>
            </div>
        </div>
</body>
</html>

CSS

css 复制代码 
.login-container{
    height: calc(100% - 50px);

    /* 开启弹性布局 block和flex  盒子用flex */
    display: flex;

    /* 水平居中 */
    justify-content: center;

    /* 垂直居中 */
    align-items: center;
}

.login-dialog{
    width: 500px;
    height: 300px;

    /* 半透明 */
    background-color: rgba(255,255,255,0.5);

    /* 圆角 */
    border-radius: 10px;
}

.login-dialog p{
    font-weight: 700;
    font-size: 30px;
    text-align: center;
}

.login-dialog h3{
    padding: 20px 0;

    /* 文字水平居中 */
    text-align: center;
}

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

.login-dialog .row span{
    width: 100px;
    font-size: 20px;
    font-weight: 700;
}

#username, #password{
    /* 框大小 */
    width: 200px;
    height: 40px;

    font-size: 24px;

    /* 去掉框的边框黑线 */
    border: none;
    /* 去掉选择时的边框黑线 */
    outline: none;

    /* 输入字体的缩进 */
    padding-left: 5px;

    /* 圆角 */
    border-radius: 15px;
}


#submit{
    width: 300px;
    height: 40px;
    color: black;
    background-color: rgba(255,255,255,0.5);
    border-radius: 10px;

    /* 去掉边框 */
    border: none;
}

/* 点击变色 */
#submit:active{
    background-color: gray;
}

文章编辑页

这里需要放入editor.md，和JS文件的jquery.min.js的依赖，放入文章编辑的库

HTML

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/common.css">
    <link rel="stylesheet" href="css/blog-edit-container.css">

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <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>
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo图片 -->
        <img src="image/logo.jpg" alt="" width="50px">

        <span class="title">我的博客系统</span>
        <span class="spacer"></span>

        <!-- 导航栏 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
    </div>

    <div class="blog-edit-container">
        <!-- 标题编辑区 -->
        <div class="title">
            <!-- placeholder默认文字 -->
            <input type="text" id="title" placeholder="请输入文章标题">
            <input type="button" id="submit" value="发布文章">
        </div>

        <!-- 博客编辑区 -->
        <div id="editor">

        </div>
    </div>

    <script>
        var editor = editormd("editor", {
        width: "100%",
        height: "calc(100% - 50px)",
        markdown: "# 在这里写下一篇博客",
        path: "editor.md/lib/"
        });
    </script>
</body>
</html>

CSS

css 复制代码 
.blog-edit-container{
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}

/* 标题编辑区 */
.title{
    height: 50px;
    /* 水平方向布局 */
    display: flex;

    /* 中间有间隙 */
    justify-content: space-between;

    /* 居中 */
    align-items: center;
}

/* 字体 */
#title{
    height: 40px;
    width: 890px;
    font-size: 24px;
    padding-left: 5px;

    /* 去掉边框轮廓线 */
    border: none;

    /* 选中时轮廓线 */
    outline: none;

    border-radius: 10px;
}

#submit{
    height: 45px;
    width: 100px;

    border-radius: 10px;

    color: white;
    background-color: coral;

    border: none;

    transition: all 0.5;
}

/* 点击时变色 */
#submit:active{
    background-color: gray;
}

#editor {
    /* 圆角 */
    border-radius: 10px;
    
    /* 因为他是复用editor的 所以现在这个块是子元素 用bc无法显示 */
    /* background-color: rgba(255, 255, 255, 0.8); */

    /* 用这个就都可以 */
    opacity: 80%;
}
相关推荐
崔庆才丨静觅3 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60614 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了4 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅4 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅4 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅5 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment5 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅5 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊5 小时前
jwt介绍
前端
爱敲代码的小鱼5 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南