博客系统！

最新推荐文章于 2024-07-14 10:34:53 发布

思鱼不是死鱼

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量128

点赞数

文章标签： html javascript css

本文链接：https://blog.csdn.net/qq_64054032/article/details/130232726

版权

main

<!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>博客列表</title>
    
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="blog_list.css">
</head>
<body>

    <!-- 要先给整个页面设置背景，要先给body标签设置背景 -->
    <!-- 因此需要让body标签先撑满浏览器窗口 -->
    <div class="nav">
        <img src="222.png" alt="">
        <span class="title">我的博客系统</span>

        <!-- 只是用来占位，把下面几个a标签挤过去 -->
        <div class="spacer"></div>

        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
        <!-- 因为每个页面都是一样的导航栏。使用就可以把对应的样式提取到单独的css文件中，供页面调用 -->
    </div>

    <!-- 这个div表示页面的主要区域（版心 -->
    <div class="container">
        <!-- 左侧的用户头像区域 -->
        <div class="container-left">
                <div class= "card">
                    <img src="png.jpg" alt="">
                    <!-- 用户的名字 -->
                    <h3>你好</h3>
                    <a href="#">github 地址</a>
                    <div class="counter">
                        <span>文章</span>
                        <span>分类</span>
                    </div>
                    <div class="counter">
                        <span>2</span>
                        <span>1</span>
                    </div>
                    
                </div>
        </div>

        <!-- 右侧的内容区域 -->
        <div class="container-right">
            <!-- 每个.blog用来表示一篇博客 -->
             <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    今天起，认真写博客  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
                <!-- 由于html的标签问题 不能直接使用<和> 需要使用转义字符< (&lt) > (&gt) -->
             </div>
             <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    今天起，认真写博客  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
                <!-- 由于html的标签问题 不能直接使用<和> 需要使用转义字符< (&lt) > (&gt) -->
             </div>
             <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    今天起，认真写博客  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
                <!-- 由于html的标签问题 不能直接使用<和> 需要使用转义字符< (&lt) > (&gt) -->
             </div>
             <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    今天起，认真写博客  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
                <!-- 由于html的标签问题 不能直接使用<和> 需要使用转义字符< (&lt) > (&gt) -->
             </div>
             <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    今天起，认真写博客  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
                <!-- 由于html的标签问题 不能直接使用<和> 需要使用转义字符< (&lt) > (&gt) -->
             </div>
             <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    今天起，认真写博客  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
                <!-- 由于html的标签问题 不能直接使用<和> 需要使用转义字符< (&lt) > (&gt) -->
             </div>
             <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    今天起，认真写博客  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
                </div>
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
                <!-- 由于html的标签问题 不能直接使用<和> 需要使用转义字符< (&lt) > (&gt) -->
             </div>
        </div>
    </div>
</body>
</html>

对应main的css


/* 先清除浏览器的默认样式 */
* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
    /* 使我们的边框和内边距不会变大 */

}

.nav {
    /* 导航栏高度普遍都是50px */
    height: 50px;
    background-color: rgba(50, 50, 50, 0.4);
    color: white;
    display: flex;
    /* 开启弹性布局，加上这个属性的元素的子元素 */
    /* 子元素就会按照弹性布局来排列 */
    /* 就是子元素不会按照块级元素和行内元素的规则工作 */
    /* 元素都会统一排列成一行*/

    justify-content: flex-start;
    /* 控制元素在水平方向如何排列 */
    align-items: center;
    /* 控制元素在垂直方向如何排列 */
}

html{
    /* 设置html的高度和浏览器窗口一样高 */
    height: 100%;
}

body {
    height: 100%;
    /* 让body和他的父亲元素，也就是html一样高*/
    background-image: url(back.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.nav img{
    width: 45px;
    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;
    /* 垂直方向0像素内边距 水平方向10内边距 */
    /* 这里采用内边距把字体隔开是为了让字体点击区域更大些 */
}

.container {
    /* 设定成固定宽度并且水平居中 */

    width: 1000px;
    height: calc(100% - 50px);
    /* 减号旁边必须要写个空格，不然会误认为是命名 */
    /* calc是个库函数，用于计算，这里写的是导航栏的高度 */

    margin: 0 auto;

    /* 为了让left和right可以水平居中布局，因此使用弹性布局 */
    display: flex;

    /* 让两者之间带上空白· */
    justify-content: space-between;
}

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

.container .container-right {
    height: 100%;
    width: 796px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 20px;

    overflow: auto;
    /* 如果内容超出范围，自动添加滚动条 */
}
.card {
    background-color: rgba(255, 255, 255, 0.5);
    
    /* 设置内边距，为了让文字和图片不顶着边距 */
    padding: 30px;
    border-radius: 20px;
    /* 设置大边框的圆角矩形 */
}

.card img {
    width: 140px;
    height: 140px;
    border-radius: 70px;
    /* 设置头像的圆角矩形 */
}

.card h3 {
    text-align: center;
    /* 文字水平居中 */
    padding: 10px;
}

.card a{

    /* 块级元素直接设置文字居中是没有效果的，要转换成行内元素 */
    display: block;
    text-align: center;
    color: #999;
    text-decoration: none;
    padding: 10px 0;
}

.card .counter {
    display: flex;
    justify-content: space-around;
    /* 控制元素在水平方向 设置文字环绕 */
    padding: 5px;

}

login

<!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>login</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="login.css">
</head>
<body>
    
    <div class="nav">
        <img src="222.png" alt="">
        <span class="title">我的博客系统</span>

        <!-- 只是用来占位，把下面几个a标签挤过去 -->
        <div class="spacer"></div>

        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        
        <!-- 因为每个页面都是一样的导航栏。使用就可以把对应的样式提取到单独的css文件中，供页面调用 -->
    </div>

    <!-- 用这个元素做为页面的版心，把对话框放到这个元素里面 -->
    <div class="login-container">
        <div class="dialog">
            <h3>登录</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="text" id="password">
            </div>
            <div class="row">
                <button id="login-button">登录</button>
            </div>
        </div>
    </div>
</body>
</html>

对应login的css

/* 这个文件实现登录页的样式 */

.login-container {
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
    align-items: center;
    /* 为了让.dialog垂直水平居中 */
}

.dialog {
    width: 400px;
    height: 300px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 20px;
}

.dialog h3 {
    font-size: 20px;
    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-button {
    width: 260px;
    height: 40px;
    color: white;
    background-color: green;
    border-radius: 5px ;
    border: none;
}

/* 点击的时候就变成灰色 */
#login-button:active {
    background-color: grey;
}

blog_list（文章列表）

/* 这个文件专门放博客列表页的专用样式 */

/* 针对博客的容器进行设置 */
.blog {

}

/* 写样式多用后代选择器 因为直接写类名可能会重复 后代选择器还会增加可读性 */
.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: 10px auto;


    /* 设置文字水平居中 */
    text-align: center;
    /* 设置文字垂直居中 */
    line-height: 40px;

    color: black;
    /* 改颜色为黑色 */
    text-decoration: none;
    /* 去掉下划线 */
    border: 2px solid black;
    /* 加上边框 */

    /* 加上一个背景渐变效果 */
    transition: all 0.4s;
}

/* 鼠标悬停的时候有个动态效果 */
.blog a:hover {
    background-color: black;
    color: white;
}

blog_edit（博客编辑主页）

<!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>博客编辑</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="blog-edit.css">

    <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="222.png" alt="">
        <span class="title">我的博客系统</span>

        <!-- 只是用来占位，把下面几个a标签挤过去 -->
        <div class="spacer"></div>

        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
        <!-- 因为每个页面都是一样的导航栏。使用就可以把对应的样式提取到单独的css文件中，供页面调用 -->
    </div>

    <!-- 整个编辑页面的版心 -->
    <div class="blog-edit-container">
        <!-- 标题的编辑区 -->
        <div class="title">
            <!-- 输入标题内容 -->
            <input type="text" id="blog-title" placeholder="输入标题">
            <!-- placeholder是在输入框为空的时候的提示信息 -->
            
            <button id="submit">发布文章</button>
        </div>
        <!-- 正文的编辑区 -->
        <div id="editor">

        </div>
    </div>

    <script>
    // 初始化编辑器
    var editor = editormd("editor",{
        // 这里的尺寸需要在这里设置，设置样式会被editormd自动覆盖掉
        width: "100%",
        // 设定编辑器高度
        height: "calc(100% - 50px)",
        // 编辑器中的初始内容
        markdown: "你好",
        // 指定editor.md依赖的插件路径
        path: "editor.md/lib/"
    });
    
    </script>
</body>
</html>

blog_edit的css

/* 针对博客编辑页写的样式 */

/* 版心 */

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

/* 设置标题编辑区的样式 */ 
.blog-edit-container .title {
    height: 50px;

    /* 水平方向排列多个元素就要用到弹性布局 */
    display: flex;
    justify-content: space-around;
    align-items: center;

}

/* 设置输入框高度宽度 */
#blog-title {
    height: 40px;
    width: 895px;
    font-size: 20px;
    padding-left: 5px;

    /* 去掉轮廓线（）选中输入框时候的黑圈 */
    outline: none;

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

    border-radius: 5px;

    background-color: rgba(255,255,255,0.8);
}

/* 设置文字框的高度宽度 */
#submit {
    height: 40px;
    width: 100px;

    border: none;
    border-radius: 5px;
    background-color: orange;
}

/* 点击按钮的效果 */
#submit:active {
    color: gray;
    background-color: white;
}

#editor {
    border-radius: 10px;
    /* background-color: rgba(255,255,255,0.8); */
    /* 不用上面那个设置透明度，因为子元素太多会妨碍效果 */
    /* 使用opacity来设置透明度，同样可以对子元素其效果 */
    opacity: 80%;
    /* 这个值是百分号，相当于rgba中的0,8 */
}

blog_detail （博客详细页）

<!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>博客详情页</title>

    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="blog_detail.css">
</head>
<body>
    <!-- 因为大体结构和列表页非常相似，所以可以吧相同的html复制过来 -->

    <div class="nav">
        <img src="222.png" alt="">
        <span class="title">我的博客系统</span>

        <!-- 只是用来占位，把下面几个a标签挤过去 -->
        <div class="spacer"></div>

        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="#">注销</a>
        <!-- 因为每个页面都是一样的导航栏。使用就可以把对应的样式提取到单独的css文件中，供页面调用 -->
    </div>

        <!-- 这个div表示页面的主要区域（版心 -->
        <div class="container">
            <!-- 左侧的用户头像区域 -->
            <div class="container-left">
                    <div class= "card">
                        <img src="png.jpg" alt="">
                        <!-- 用户的名字 -->
                        <h3>你好</h3>
                        <a href="#">github 地址</a>
                        <div class="counter">
                            <span>文章</span>
                            <span>分类</span>
                        </div>
                        <div class="counter">
                            <span>2</span>
                            <span>1</span>
                        </div>
                        
                    </div>
            </div>
    
            <!-- 右侧的内容区域 -->
            <div class="container-right">
                <div class="blog-detail">
                    <h3>我的第一篇博客</h3>
                    <div class="date">2022 11-06</div>
                    <p>
                        今天起，认真写博客  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quos illum quasi consequuntur non quisquam amet, dignissimos voluptatum magnam aspernatur ipsum at voluptates velit aut quia. Blanditiis accusantium in natus?
                    </p>
                </div>
            </div>
        </div>
</body>
</html>

blog_detail的css

/* 给博客详情页提供样式 */

 .blog-detail h3 {
    font-size: 20px;
    text-align: center;
    padding: 20px 0;
 }

 .blog-detail data {
    color: rgb(0, 128, 0);
    padding: 10px 0;
 }

 .blog-detail p{
    text-indent: 2em;
 }