【前端】博客系统——简单的页面设计

前端传送门

【前端】HTML入门 —— HTML的常见标签

【前端】CSS(1) —— CSS的基本语法和一些简单的选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SOYG5vy6-1669274254128)(C:/Users/gu%27jiu/Pictures/c/20200322120714_slipb.gif)]

博客系统 (简单的页面设计)

在这里插入图片描述

页面介绍

主要分成四个页面:

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

基本文件组成

效果预览

博客列表页效果

博客详情页效果

博客登陆页效果

博客编辑页效果

代码实现

实现博客列表页

创建 blog_list.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>博客列表title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">
head>
<body>
    
    <div class="nav">
        <img src="img/Gujiu.png" alt="">
        <span class="title">我的博客系统span>
        
        <div class="spacer">div>
        <a href="blog_list.html">主页a>
        <a href="blog_edit.html">写博客a>
        <a href="#">注销a>
    div>

    
    <div class="container">
        
        <div class="container-left">
            <div class="card">
                
                
                <img src="img/gujiu!.jpg" alt="">
                
                <h3>Gujiu ! !h3>
                <a href="https://gitee.com/Gujiu_u">gitee 地址a>
                <div class="counter">
                    <span>文章span>
                    <span>分类span>
                div>
                <div class="counter">
                    <span>2span>
                    <span>1span>
                div>
            div>
        div>
        
        <div class="container-right">
            
            <div class="blog">
                <div class="title">我的第一篇博客div>
                <div class="date">2022-11-17 12:00:00div>
                <div class="desc">
                    从今天起, Gujiu 开始写博客. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut vel ratione debitis veritatis nobis voluptates. Ea earum, possimus laboriosam quas nostrum eaque necessitatibus delectus ex? Facere doloribus in quia voluptas?
                div>
                
                <a href="blog_detail.html">查看全文 >>a>
            div>
            <div class="blog">
                <div class="title">我的第二篇博客div>
                <div class="date">2022-11-17 12:00:00div>
                <div class="desc">
                    Gujiu 继续写博客. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut vel ratione debitis veritatis nobis voluptates. Ea earum, possimus laboriosam quas nostrum eaque necessitatibus delectus ex? Facere doloribus in quia voluptas?
                div>
                
                <a href="#">查看全文 >>a>
            div>
            <div class="blog">
                <div class="title">我的第三篇博客div>
                <div class="date">2022-11-17 12:00:00div>
                <div class=
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

相关阅读:
笙默考试管理系统-MyExamTest----codemirror（24）
30 Python的matplotlib模块
一篇文章带您了解PHP数组
操作系统历史---03
【蓝桥杯选拔赛真题25】python输出指定数据青少年组蓝桥杯python 选拔赛STEMA比赛真题解析
2.7.C++中static关键字的5种基本用法
92---Python 直角坐标系下绘制抛物线图像
android-app上架必要条件
[WSL][ubuntu][原创]windows上ssh WSL的linux子系统
OpenTiny Vue 支持 Vue2.7 啦！

原文地址：https://blog.csdn.net/m0_58592142/article/details/128018885