前端页面设计博客系统

最新推荐文章于 2024-06-14 15:43:33 发布

嗯嗯好的呢！

最新推荐文章于 2024-06-14 15:43:33 发布

阅读量1k

点赞数 3

分类专栏：面试学习路线阿里巴巴文章标签：前端 photoshop ui golang vue.js

本文链接：https://blog.csdn.net/m0_67403076/article/details/125389154

版权

——页面介绍

博客列表页：显示了当前系统中都有哪些发布出来的博客

导航栏：logo，标题，主页，写博客，注销
左侧：当前用户信息，用户的头像＋名字＋其他的简单信息
右侧：博客列表

列表中的每一项，包含了，博客标题，发布时间，摘要信息，查看全文按钮

博客详情页：显示了当前博客，详细正文

导航栏：和博客列表页相同
左侧：显示的是当前文章的作者信息
右侧：显示当前文章的详细内容了

登录页面：包含了一个登录框，输入用户名，密码，登录按钮

博客登录页 ：登录博客的界面

输入用户名
输入密码
确认登录

博客编辑页：点击 “写博客" 进入的页面

导航栏：和前面一样
输入框，输入博客的标题
markdown 编辑器，按照 markdown 的语法来编辑博客内容，用第三方的组件

——预期效果

1、博客列表页效果：

在这里插入图片描述

2、博客详情页效果：

在这里插入图片描述

3、博客登录页效果：

在这里插入图片描述

4、博客编辑页效果：

在这里插入图片描述

——代码

1、博客列表页

开发一个页面，不是在脑子里，凭空就搞出来的
而是要先设计好，然后再对照着这个设计稿来进行开发
一般是产品经理，或者美工 (UED) 提供的
如果没有个设计图，凭空去想，这个页面啥样，是特别不好做的 (既要实现代码，又要完成设计工作)

设计稿，一般来说，是一个 PS(PhotoShop) 搞出来的文件
非常方便程序猿来获取到里面的一些细节 (某个东西尺寸，颜色，位置，字体大小……）按照人家设计稿里包含的细节，直接来写代码就行了，但是也有一种情况，设计稿，只有一个图片，就需要程序猿亿点点自由发挥了

写一个页面的时候，一定要，先确定好，页面的结构 (页面的结构是特别重要的，会直接影响到后续的 CSS，JS 代码)
由于导航栏会被各个页面都使用到，导航栏的样式，就写到一个 common.css 中，供后续的多个页面来引用

<!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="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
    
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/picture.jpg" alt="">
        <span>我的博客系统</span>
        
        <!-- 空白元素 用来占位 -->
        <div class="spacer"></div>
        
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.list">写博客</a>
        <a href="#">注销</a>
    </div>

    <!-- .container 作为页面的版心 -->
    <!-- 这个部分是在页面中 水平居中对齐的 左右两侧会留出一定的边距 这个东西很多网站都有 称为"版心" -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="left">
            <!-- 整个用户信息区 -->
            <div class="card">
                <img src="image/picture.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="right">
            <!-- .blog 对应一个博客 -->
            <div class="blog">
                <!-- 博客标题 -->
                <div class="title">
                    我的第一篇博客
                </div>
                <!-- 博客发布时间 -->
                <div class="date">
                    2022-05-05 15:00:00
                </div>
                <!-- 博客摘要 -->
                <div class="desc">
                    从今天起，我要认真写博客，Lorem ipsum dolor sit amet consectetur ad

最低0.47元/天解锁文章

嗯嗯好的呢！

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
前端页面设计博客系统

博客列表页：显示了当前系统中都有哪些发布出来的博客列表中的每一项，包含了，博客标题，发布时间，摘要信息，查看全文按钮博客详情页：显示了当前博客，详细正文登录页面：包含了一个登录框，输入用户名，密码，登录按钮博客登录页：登录博客的界面博客编辑页：点击 “写博客" 进入的页面开发一个页面，不是在脑子里，凭空就搞出来的而是要先设计好，然后再对照着这个设计稿来进行开发一般是产品经理，或者美工 (UED) 提供的如果没有个设计图，凭空去想，这个页面啥样，是特别不好做的 (既要实现代码，又要完成设计工作)设计稿
复制链接

扫一扫