前端项目 --- 博客系统

转x33g5p2x  于2022-05-11 转载在 其他  
字(11.7k)|赞(0)|评价(0)|浏览(435)

1. 博客系统

本博客分为四个页面

  • 博客登录界面

  • 博客主页界面

  • 博客编辑界面

  • 博客详情界面

1.1 导航栏

可以看出文章界面中都有共同的导航栏.
导航栏的前端代码:

<div class="nav">
        <img src="../image/头像.jpg" alt="头像">
        <span class="title">我的博客系统</span>
        <a href="home.html">主页</a>
        <a href="edit.html">创作</a>
        <a href="login.html">注销</a>
    </div>

common.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* background-image: url(../image/1.jpg); */
}
html,body{
    height: 100%;
    background-image: url(../image/1.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.nav {
    width: 100%;
    height: 50px;
    background-color: rgba(54, 54, 54,0.36);
    display: flex;
    justify-content: left;
    align-items: center;
}
.nav img {
    width: 40px;
    height: 40px;
    margin: 0 10px 0 20px;
    border-radius: 50%;
}
.nav .title{
    width:83%;
    color:white;
}
.nav a{
    width: 50px;
    color:white;
    text-decoration: none;
}

.parent{
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.parent .left{
    height: 100%;
    width: 200px;
}
.parent .right {
    height: 100%;
    width: 795px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
}
.left .card{
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    padding: 30px;
}
.left .card img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    padding: 10px;
}
.left .card .name{
    display: block;

    font-size: 30px;
    font-weight: 700;
    text-align: center;
    padding: 5px;
}
.left .card a{
    display: block;
    width: 140px;
    text-decoration: none;
    color: gray;
    text-align: center;
    padding: 5px;
}
.left .card .one {
    display: flex;
    justify-content:  space-around;
    align-items: center;
    padding: 10px;
}

1.2 博客主页界面

home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body>
    <div class="nav">
        <img src="../image/头像.jpg" alt="头像">
        <span class="title">我的博客系统</span>
        <a href="home.html">主页</a>
        <a href="edit.html">创作</a>
        <a href="login.html">注销</a>
    </div>

    <div class="parent">
        <div class="left">
            <div class="card">
                <img src="../image/头像.jpg">
                <span class="name">蜡笔小新</span>
                <a href="#">github 地址</a>
                <div class='one'>
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class='one'>
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="article">
                <h2 class="title">我的第一篇博客</h2>
                <span class="date">2022-4-17</span>
                <div class="desc">今天开始我要认真写博客 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore similique, nobis labore, officiis harum vel amet iste enim, cupiditate eveniet dolores optio eligendi in dicta veniam obcaecati rerum voluptas ipsum.</div>
                <a href="art.html" class="more">查看全文&gt;&gt;</a>
            </div>
            <div class="article">
                <h2 class="title">我的第二篇博客</h2>
                <span class="date">2022-4-18</span>
                <div class="desc">昨天开始我要认真写博客 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore similique, nobis labore, officiis harum vel amet iste enim, cupiditate eveniet dolores optio eligendi in dicta veniam obcaecati rerum voluptas ipsum.</div>
                <a href="art.html" class="more">查看全文&gt;&gt;</a>
            </div>
        </div>
    </div>

</body>
</html>

list.css

.article  .title{
    text-align: center;
    margin: 10px;
}

.article .date{
    display: block;
    color:green;
    text-decoration: none;
    text-align: center;
    margin: 5px;
}

.article .desc {
    text-indent: 2em; 
    margin: 5px;
}

.article .more{
    display: block;
    width: 100px;
    height: 30px;

    line-height: 30px;
    text-align: center;

    margin: 0 auto;
    text-decoration: none;
    border: 1px solid black;
    color:black;
}

.article .more:active{
    background-color: black;
    color:white;
}

1.3 博客详情界面

art.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/moreList.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body>
    <div class="nav">
        <img src="../image/头像.jpg" alt="头像">
        <span class="title">我的博客系统</span>
        <a href="home.html">主页</a>
        <a href="edit.html">创作</a>
        <a href="login.html">注销</a>
    </div>
    <div class="parent">
        <div class="left">
            <div class="card">
                <img src="../image/头像.jpg">
                <span class="name">蜡笔小新</span>
                <a href="#">github 地址</a>
                <div class='one'>
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class='one'>
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="article">
                <h2 class="title">我的第一篇博客</h2>
                <span class="date">2022-4-17</span>
                <div class="desc">今天开始我要认真写博客 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque eveniet alias aperiam explicabo rerum odit, voluptatibus nesciunt ducimus nihil officia excepturi possimus, quos incidunt est quidem ad iure dolor adipisci.
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto laborum nemo quasi, rem, ab totam temporibus sapiente commodi beatae deleniti cum? Quos, ipsam dolores sit minus voluptatem repellendus maiores est?</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint amet nihil odit obcaecati aspernatur, totam quas dolores reprehenderit quam officiis tempore explicabo laboriosam aut sit sunt, possimus culpa expedita quis?</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

moreList.css

.article  .title{
    text-align: center;
    margin: 10px;
}

.article .date{
    display: block;
    color:green;
    text-decoration: none;
    text-align: center;
    margin: 5px;
}

.article .desc {
    text-indent: 2em; 
    margin: 5px;
}

.article p{
    margin-top: 15px;
}

1.4 博客登陆界面

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>
    <div class="nav">
        <img src="../image/头像.jpg" alt="头像">
        <span class="title">我的博客系统</span>
        <a href="home.html">主页</a>
        <a href="edit.html">创作</a>
        <a href="login.html" style="display: none;">注销</a>
    </div>
    <div id="one">
        <div class="login">
            <div class="text">登录</div>
            <div class="one"><span class="name">用户名</span><input type="text" class="user"></div>
            <div class="one"><span class="name">密码</span><input type="password" class="password"></div>
            <div class="submit"><button>提交</button></div>
        </div>
    </div>
</body>
</html>

login.css

#one {
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.login {
    background-color: rgba(255,255,255,0.8);
    width: 400px;
    padding: 25px;
    border-radius: 10px;
    padding-bottom: 50px;
}

.login .text {
    font-size: 25px;
    font-weight: 400;
    text-align: center;
    margin: 25px;
}

.login .one{
    display: flex;
    justify-content: center;
    align-items: center;
}

.login .one .name {
    
    width: 100px;
    height: 50px;
    line-height: 50px;
    font-weight: 600;
}

.login .one input{
        width: 200px;
        height: 30px;
        border-radius: 5px;
        padding: 3px;
        border:none;
}

.login .submit button{
    display: block;
    width: 300px;
    height: 40px;
    background-color: rgb(41, 128, 0);
    margin: 0 auto;
    color: white;
    border: none;
    border-radius: 5px;
}

.login .submit button:hover{
    background-color: rgba(41,128,0,0.8);
}

.login .submit button:active{
    background-color: white;
    color:rgb(41, 128, 0);
}

1.5 博客编辑界面

这里我们采用的是别人实现好的markdown编辑器
https://pandao.github.io/editor.md/
下载之后放到项目目录里

在edit.html中映入依赖

<!-- 引入 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>

edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/edit.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">
        <img src="../image/头像.jpg" alt="头像">
        <span class="title">我的博客系统</span>
        <a href="home.html">主页</a>
        <a href="edit.html">创作</a>
        <a href="login.html">注销</a>
    </div>
    <div class="leader">
        <div class="empOne">
            <input type="text" class="title" value="在这里写下文章标题"> 
            <input type="button" value="发布文章" class="publish">
        </div>
        <div id="editor">
            
        </div>
    </div>

    <script>
        // 初始化编辑器
        var editor = editormd("editor", {
            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
            width: "100%",
            // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
            height: "calc(100% - 60px)",
            // 编辑器中的初始内容
            markdown: "# 在这里写下一篇博客",
            // 指定 editor.md 依赖的插件路径
            path: "../editor.md/lib/"
        });
    </script>
</body>
</html>

edit.css

.leader{
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}
.leader .empOne{
    display: flex;
    justify-content: center;
    align-items: center;
}
.leader .empOne .title{
    width: 800px;
    height: 40px;
    border-radius: 8px;
    outline: none;
    border:1px solid rgba(0,0,0,0.2);
    padding-left: 5px;
    background-color: rgba(255,255,255,0.8);
}
.leader .empOne .publish {
    margin: 10px;
    width: 180px;
    height: 40px;
    border-radius: 8px;
    border: none;
    color:white;
    background-color: rgb(255,127,39);
}
.leader .empOne .publish:hover{
    background-color: rgb(255,127,39,0.6);
}
.leader .empOne .publish:active{
    background-color: #fff;
}

#editor{
    border-radius: 8px;
    opacity: 80%;
}

这是用来设置编辑页面的属性

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://wangzhi430.blog.csdn.net/article/details/124649884

内容来源于网络，如有侵权，请联系作者删除！

css前端css3

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com