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

最新推荐文章于 2024-04-25 16:43:08 发布
最新推荐文章于 2024-04-25 16:43:08 发布
阅读量1.5k 收藏 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%;
}
芊芊子
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端页面设计 博客系统
m0_67403076的博客
06-21 984
博客列表页：显示了当前系统中都有哪些发布出来的博客列表中的每一项，包含了，博客标题，发布时间，摘要信息，查看全文按钮博客详情页：显示了当前博客，详细正文登录页面：包含了一个登录框，输入用户名，密码，登录按钮博客登录页 ：登录博客的界面博客编辑页：点击 “写博客" 进入的页面开发一个页面，不是在脑子里，凭空就搞出来的 而是要先设计好，然后再对照着这个设计稿来进行开发 一般是产品经理，或者美工 (UED) 提供的 如果没有个设计图，凭空去想，这个页面啥样，是特别不好做的 (既要实现代码，又要完成设计工作)设计稿
Javaweb博客系统页面设计
04-27
通过学习的前端知识来构建出网页.Javaweb博客系统页面设计，包含4个页面：博客登录页，博客列表页，博客详情页，博客编辑页。 实现一个简单的博客系统. 当前先完成页面设计的部分. 通过学习的前端知识来构建出网页....
基于Html的信息管理系统前端界面设计源码
03-28
这是一个基于Html的自制信息管理系统前端界面设计，包含26个文件，其中主要文件类型包括10个PNG图片文件、7个CSS文件、7个HTML文件和1个LICENSE文件。该项目的前端界面与Android信息管理系统配套，提供了良好的用户体验和交互设计，适合用于企业或组织的信息管理需求。
博客系统01--前端页面设计
weixin_60007218的博客
04-08 925
博客系统前端页面设计及代码：登录、列表、详情、编辑
分享 11 张超好看的前端界面 【建议收藏】
热门推荐
Thunder Wang的博客
07-27 1万+
哈喽大家好呀，我是Thunder，今天给大家带来了11张我觉得不论从视觉效果还是页面布局的维度都特别好看的11个pc偏管理端的界面，希望大家可以在平时开发没有灵感时用来做参考。
实现一个博客系统(前端页面设计)
weixin_61518137的博客
06-26 1万+
博客系统
博客系统前端实现
chenchenchencl的博客
03-30 2031
博客系统前端实现
博客前端模板
打代码是一天，不打代码也是一天
12-03 1035
采用bootstrap技术响应式实现博客首页和详情页。全部采用bootstrap自带样式。
博客页面前端
m0_62734392的博客
05-26 497
博客页面(前端) 简单使用HTML进行实现
【JavaWeb】博客系统的前端页面设计
m0_73067372的博客
07-10 2072
前面我们已经了解了HTML，CSS，JS（前端三剑客），本篇博客我们通过对这知识的应用，来实现一个博客系统的前端页面。
博客系统——前端部分
weixin_73616913的博客
08-27 858
要实现一个博客系统，我们得先构造出它的页面：显示这一个博客里面的具体内容3、登录页发布新博客，在这个博客页面进行编辑。
html5,bootstrap实现博客系统前端页面
01-11
html5实现的博客主页面index.html，article.html,tags.html,list_xwzj.html,index_lyb.html,index_awy.html等等，包括css,amages,js等，是静态页面，拿来就可以直接用
新闻发布系统前端页面.rar
05-25
自主设计、自主制作的新闻发布系统前端页面，没用框架，利用到了JS的轮播图知识、Tab切换、HTML中的Table表格。详细图片介绍可去我博客“Web前端”栏目观看。
基于SpringBoot+Thymeleaf +mybatisPlus实现的个人博客系统 毕业设计
02-04
部分的前端展示页面和css样式等借鉴了部分网络作者的开源项目，在此向其作者表示感谢！ 因为博主的能力有限，重构计划一直拖后，但是对于自己项目的目标还是有的：未来计划后台采用vuejs，前台选用更加清晰的模板...
基于 servlet 实现的博客系统
01-12
该博客系统是一个基于Servlet技术开发的Web应用，旨在提供一个简单而功能完备的博客平台。用户可以注册账户、发布博客文章。整个系统使用Java Servlet技术作为后端处理逻辑，并采用MVC（Model-View-Controller）架构...
JEECG表格选中状态怎么去掉
weixin_39031037的博客
04-19 578
官网代码（在取消选中状态的时候不生效）
webman 事务回滚失效问题记录
juan9872的博客
04-21 609
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 356
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
前端Vue2项目搭建过程
最新发布
xuemen11的博客
04-25 815
vue2,vuex,vant组件库
博客系统的设计与实现
12-23
4. 前端开发：使用HTML、CSS和JavaScript等前端技术进行页面设计和开发。根据需求，设计用户界面，实现用户注册、登录、博文展示、评论等功能。 5. 前后端交互：通过RESTful API实现前后端的数据交互。前端通过发送...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值