Spring boot开发小而美的个人博客-页面开发

2023-10-04 23:10

本文主要是介绍Spring boot开发小而美的个人博客-页面开发,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

页面开发

创建blog

在blog里创建static文件夹,在static里面创建css、images、js文件夹
在这里插入图片描述
创建index.html文件
在这里插入图片描述

页面头部加底部

在这里插入图片描述

创建me.css文件
在这里插入图片描述
在这里插入图片描述
加入图标样式
在这里插入图片描述
加入搜索框
在这里插入图片描述
编写底部内容
在这里插入图片描述
底部css
在这里插入图片描述

页面中间内容

左边博客列表
在这里插入图片描述
右边的top

在这里插入图片描述
手机端
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
css

body{background: url("../images/bg.png");
}
.m-padded-mini{padding: 0.2em !important;
}
.m-padded-tiny{padding: 0.3em !important;
}
.m-padded-tb-mini{padding-top: 0.2em !important;padding-bottom:0.2em !important;
}
.m-padded-tb-tiny{padding-top: 0.3em !important;padding-bottom:0.3em !important;
}
.m-padded-tb-small{padding-top: 0.5em !important;padding-bottom:0.5em !important;
}
.m-padded-tb{padding-top: 1em !important;padding-bottom:1em !important;
}
.m-padded-tb-large{padding-top: 2em !important;padding-bottom:2em !important;
}
.m-padded-tb-big{padding-top: 3em !important;padding-bottom:3em !important;
}
.m-padded-tb-huge{padding-top: 4em !important;padding-bottom:4em !important;
}
.m-padded-tb-massive{padding-top: 5em !important;padding-bottom:5em !important;
}/*-----text-----*/
.m-text{font-weight: 300 !important;letter-spacing: 1px !important;line-height: 1.8;
}
.m-text-thin{font-weight: 300 !important;
}
.m-text-spaced{letter-spacing: 1px !important;
}
.m-text-lined{line-height: 1.8;
}/*-----margin-----*/
.m-margin-top-small{margin-top: 0.5em !important;}
.m-margin-top{margin-top: 1em !important;}
.m-margin-top-large{margin-top: 2em !important;}
.m-margin-tb-tiny{margin-top: 0.3em !important;margin-bottom: 0.3em !important;
}/*-----opacity-----*/
.m-opacity-mini{opacity: 0.8 !important;
}
.m-opacity-tiny{opacity: 0.6 !important;
}/*-----position-----*/
.m-right-top{position: absolute;top: 0;right: 0;
}/*-----display-----*/
.m-inline-block{display: inline-block !important;
}/*----container----*/
.m-container{max-width: 72em !important;margin: auto !important;
}/*----color----*/
.m-black{color: #333 !important;
}.m-mobile-show{display: none !important;
}@media screen and (max-width: 768px) {.m-mobile-hide{display: none !important;}.m-mobile-show{display: block !important;}
}

效果图
在这里插入图片描述
在这里插入图片描述

这篇关于Spring boot开发小而美的个人博客-页面开发的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/2912

相关文章

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca