博客系统前端（页面设计）

于 2021-12-26 22:23:32 发布
阅读量1.6k 收藏 10
点赞数 4
文章标签： 前端 css html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57574258/article/details/122161777
版权

预期设计页面

  • 博客列表页
  • 博客正文页
  • 博客登陆页
  • 博客编辑页

所有页面公用的css代码

common.css

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
/* 设置整体页面高度 */
html,body{
    height:100%;
    background-image: url("../img/02.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* 上方导航栏 */
.nav{
    width: 100%;
    height: 50px;
    background-color: rgba(51,51,51,.4);
    color:#fff;
    display: flex;
    justify-content: left;
    align-items: center;
}
/* 导航栏中的图标 */
.nav img{
    width: 40px;
    margin-left: 30px;
    margin-right: 10px;
    border-radius: 50%;
}
/* 导航栏中的占位器 */
.nav .spacer{
    width: 70%;
}
/* 导航栏中的按钮 */
.nav a{
    color:#fff;
    text-decoration: none;
    padding: 0 10px;
}

/* 页面内容容器, 正文部分 */
.container{
    /* 使用 calc 计算高度 */
    height: calc(100% - 50px);
    /* 计算正文高度 */
    width:1200px;
    /* 水平居中 */
    margin: 0 auto;
    /* 使用弹性布局 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* 左侧部分, 用来放置用户信息 */
.container-left{
    height: 100%;
    width: 200px;
}
/* 右侧部分, 用来放置正文 */
.container-right{
    height: 100%;
    /* 和左侧部分中间留出 5px 间隙 */
    width:995px;
    /*如果内容溢出就加滚动条*/
    overflow: auto;
    background-color: rgba(255,255,255,.8);
    border-radius: 10px;
}

/* 展示用户信息的卡片 */
.card{
    background-color: rgba(255,255,255,.8);
    border-radius: 10px;
    padding: 30px;
}
/* 用户头像 */
.card img{
    width: 140px;
    border-radius: 50%;
}
/* 用户名 */
.card h3{
    text-align: center;
    padding: 30px;
}
/* 用户 github 链接 */
.card a{
    display: block;
    text-align: center;
    color: #999;
    text-decoration: none;
    padding: 10px;
}
/* 展示文章数目的面板 */
.card .counter{
    padding: 5px;
    display: flex;
    justify-content: space-around;
}

实现博客列表页

效果
在这里插入图片描述

HTML代码
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <!--头部导航 navigation-->
  <div class="nav">
      <img src="img/12.jpg">
      <span class="title">我的博客系统</span>
      <!--用来占据中间空白位置-->
      <span class="spacer"></span>
      <a href="index.html">主页</a>
      <a href="editor.html">写博客</a>
      <!--删除用户的登陆状态，需要动态处理-->
      <a href="login.html">注销</a>
  </div>
  <!--正文部分-->
  <div class="container">
      <!--个人信息-->
      <div class="container-left">
          <div class="card">
              <img src="img/00.jpg" alt='作者头像' class="avatar">
              <h3>芊芊子</h3>
              <a href="https://www.gitee.com/">我的gitee</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">
              <div class="title">我的第一篇博客</div>
              <div class="date">2021-12-1</div>
              <div class="desc">
                  从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur
                  adipisicing elit. Cum distinctio ullam eum ut
                            veroab laborum numquam tenetur est in dolorum a sint, assumenda
                  adipisci similique quaerat vel.
                            Facere,
                            et.
              </div>
              <a href="article.html?blogId=1" class="detail">查看全文 &gt; &gt;</a>
          </div>
          <div class="blog">
              <div class="title">我的第二篇博客</div>
              <div class="date">2021-12-3</div>
              <div class="desc">
                  从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur
                  adipisicing elit. Cum distinctio ullam eum ut
                            veroab laborum numquam tenetur est in dolorum a sint, assumenda
                  adipisci similique quaerat vel.
                            Facere,
                            et.
              </div>
              <!--&gt是转义字符 ，他的意思是 >>-->
              <a href="article.html?blogId=2" class="detail">查看全文 &gt; &gt;</a>
          </div>
          <div class="blog">
              <div class="title">我的第三篇博客</div>
              <div class="date">2021-12-5</div>
              <div class="desc">
                  从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur
                  adipisicing elit. Cum distinctio ullam eum ut
                            veroab laborum numquam tenetur est in dolorum a sint, assumenda
                  adipisci similique quaerat vel.
                            Facere,
                            et.
              </div>
              <!--&gt是转义字符 ，他的意思是 >>-->
              <a href="article.html?blogId=3" class="detail">查看全文 &gt; &gt;</a>
          </div>
      </div>
  </div>
</body>
</html>

CSS代码
index.css

/* 表示一篇博客 */
.blog{
    width: 100%;
    padding: 30px 20px;
    border-bottom: 2px dotted black;
}
/* 博客的标题 */
.blog .title{
    color: black;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    padding: 10px 0;
}
/* 博客的摘要 */
.blog .desc{
    color: #000;
    text-indent: 2em;
    margin-top:20px;
}
/* 博客的日期 */
.blog .date{
    color: #008000;
    margin-top: 10px;
    text-align: center;
}
/* 查看详情 按钮 */
.blog .detail{
    display: block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    color: black;
    text-align: center;
    text-decoration: none;
    margin: 10px auto 0 auto;
    border: 2px solid black;
    /* 给颜色加上过渡效果，动画的持续时间是多久 */
    transition: all 0.3s;
}
/* 查看详情按钮的鼠标 hover 效果 */
/*：hover:伪类选择器，意为鼠标滑过时应用该样式*/
.blog .detail:hover{
    background-color: #000;
    color: #fff;
}

实现博客正文页

效果
在这里插入图片描述
HTML代码
article.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正文页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/article.css">
</head>
<body>
<!--头部导航 navigation-->
<div class="nav">
    <img src="img/12.jpg">
    <span class="title">我的博客系统</span>
    <!--用来占据中间空白位置-->
    <span class="spacer"></span>
    <a href="index.html">主页</a>
    <a href="editor.html">写博客</a>
    <!--删除用户的登陆状态，需要动态处理-->
    <a href="login.html">注销</a>
</div>
<!--正文部分-->
<div class="container">
    <!--个人信息-->
    <div class="container-left">
        <div class="card">
            <img src="img/00.jpg" alt='作者头像' class="avatar">
            <h3>芊芊子</h3>
            <a href="https://www.gitee.com/">我的gitee</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-content" id="1">
            <h3>我的第一篇博客</h3>
            <div class="date">2021-12-3</div>
            <p>
                从今天起我要好好敲代码.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandaeomnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
                mollitia dolorum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
                omnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
                mollitia dolorum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
                omnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
                mollitia dolorum animi.
            </p>
        </div>
        <div class="blog-content" id="2">
            <h3>我的第二篇博客</h3>
            <div class="date">2021-12-5</div>
            <p>
                从今天起我要好好敲代码.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandaeomnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
                mollitia dolorum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
                omnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
                mollitia dolorum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
                omnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
                mollitia dolorum animi.
            </p>
        </div>
        <div class="blog-content" id="3">
            <h3>我的第三篇博客</h3>
            <div class="date">2021-12-7</div>
            <p>
                从今天起我要好好敲代码.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandaeomnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
                mollitia dolorum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
                omnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
                mollitia dolorum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut recusandae
                omnis natus ut! Autem aliasullam sit facilis ipsa dolore, molestiae neque aperiam in a facere dolor
                mollitia dolorum animi.
            </p>
        </div>
    </div>
</div>
</body>
</html>

CSS代码
article.css

/* 博客正文容器 */
.blog-content{
    padding: 30px;
    line-height: 2em;
}
/* 博客标题 */
.blog-content h3{
    text-align: center;
    padding: 20px 0;
}
/* 博客日期 */
.blog-content .date {
    color:#008000;
    padding: 10px 0;
    text-align: center;
}
/* 博客内容段落 */
.blog-content p{
    text-indent: 2em;
    padding: 10px 0;
}

实现博客登录页

效果
在这里插入图片描述
HTML代码
login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<!--头部导航 navigation-->
<div class="nav">
    <img src="img/12.jpg">
    <span class="title">我的博客系统</span>
    <!--用来占据中间空白位置-->
    <span class="spacer"></span>
    <a href="index.html">主页</a>
    <a href="editor.html">写博客</a>
    <!--删除用户的登陆状态，需要动态处理-->
    <a href="login.html">注销</a>
</div>
<!--正文部分-->
<div class="login-container">
    <div class="login-dialog">
        <form action="index.html">
            <h3>登录</h3>
            <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">
                <button id="submit">提交</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>

CSS代码
login.css

.login-container{
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-dialog{
    width: 400px;
    height: 400px;
    background-color: rgba(255,255,255,.8);
    border-radius: 10px;
}
.login-dialog h3{
    padding: 50px 0;
    text-align: center;
}
.login-dialog .row{
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-dialog .row span{
    display: block;
    width: 100px;
    font-weight: 700;
}
#username,#password{
    width: 200px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    border-radius: 10px;
    border:none;
    outline: none;
    text-indent: 10px;
}
#submit{
    width: 300px;
    height: 50px;
    color: white;
    background-color: lightsalmon;
    border: none;
    border-radius: 10px;
}
#submit:active{
    background-color: brown;
}

实现博客编辑页

效果
在这里插入图片描述
HTML代码
editor.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/editor.css">
    <link rel="stylesheet" href="editor.md/css/editormd.min.css">
</head>
<body>
<!--头部导航 navigation-->
<div class="nav">
    <img src="img/12.jpg">
    <span class="title">我的博客系统</span>
    <!--用来占据中间空白位置-->
    <span class="spacer"></span>
    <a href="index.html">主页</a>
    <a href="editor.html">写博客</a>
    <!--删除用户的登陆状态，需要动态处理-->
    <a href="login.html">注销</a>
</div>
<!--正文-->
<div class="blog-editor-container">
    <form action="article.html">
        <div class="title">
            <input type="text" placeholder="在此写下文章标题" id="title">
            <button id="submit">发表文章</button>
        </div>
        <!-- 创建编辑器标签 -->
        <div id="editor"></div>
    </form>
</div>
<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>
    // 初始化编辑器
    var editor=editormd("editor",{
        // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
        width:'100%',
        // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
        height:'calc(100% - 50px)',
        // 编辑器中的初始内容
        markdown:"#在这里写下一篇博客",
        // 指定 editor.md 依赖的插件路径
        path:'editor.md/lib/'
        });
</script>
</body>
</html>

CSS代码
editor.css

.blog-editor-container{
    width: 1200px;
    height: calc(100% - 50px);
    margin: 0 auto;
}
form{
    display: block;
    height: 100%;
}
.blog-editor-container .title{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#title{
    height: 40px;
    width: 990px;
    text-indent: 10px;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color: rgba(255,255,255,.8);
}
#submit{
    height: 40px;
    width: 200px;
    color:white;
    background-color: orange;
    border: none;
    outline: none;
    border-radius: 10px;
}
#editor{
    border-radius:10px ;
    /* 针对 #editor 用 bgc 属性无法设置半透明了. 里面包含的内容带了背景色 */
    /* background-color:rgba(255, 255, 255, 0.8); */
    /* 可以使用 opacity 属性实现 */
    opacity: 80%;
}
芊芊子
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值