Javaweb之css
css的三种引入方式
1内行式
2.内嵌式
3.外部样式表
内行式和内嵌式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input{border: 1px solid green;width: 60px;height: 40px;background-color: aquamarine;color: black;font-size: 22px;font-family: '行书';border-radius: 5px;}</style></head>
<body><!-- --><!-- <input type="button" value="按钮"style="border: 1px solid green;width: 60px;height: 40px;background-color: aquamarine;color: black;font-size: 22px;font-family: '行书';border-radius: 5px;"> --><input type="button" value="按钮"><input type="button" value="按钮"></body>
</html>外部样式表
一个css的文件
input{border: 1px solid green;
width: 60px;
height: 40px;
background-color: aquamarine;
color: black;
font-size: 22px;
font-family: '行书';
border-radius: 5px;
}代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link href="css/btn.css" rel="stylesheet">
</head>
<body><input type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">选择器
1元素选择器
2id选择器
3class选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#六花{border: 1px solid green;width: 60px;height: 40px;background-color: aquamarine;color: black;font-size: 22px;font-family: '行书';border-radius: 5px;}</style> --><!--
元素选择器<style>input{border: 1px solid green;width: 60px;height: 40px;background-color: aquamarine;color: black;font-size: 22px;font-family: '行书';border-radius: 5px;}</style>--><style>.shapeClass{width: 60px;height: 40px;}.colorclass{background-color: aquamarine;color: black;border: 1px solid green;}.fontClass{font-size: 22px;font-family: '行书';border-radius: 5px;}</style></head>
<body><input id="六花" class="colorclass shapeClass fontClass" type="button" value="按钮"><input type="button" value="按钮"><input id="二奶" type="button" value="按钮"></body>
</html>浮动
float: 加上方位
如：float: right;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outerdiv{background-color:burlywood ;height: 500px;width: 600px; }.innerdiv{height:60px ;width: 100px;border: 1px solid black;}.d1{background-color: green;float: right;}.d2{background-color: red;float: right;}.d3{background-color: yellow;float: right;}</style></head>
<body><div class="outerdiv" ><div class="innerdiv d1">diva</div><div class="innerdiv d2">divx</div><div class="innerdiv d3">divy</div></div></body>
</html>定位
position
static 默认（不行动）
absolute 绝对 其他的会填充
relative 相对原来的位置 其他的不会填充
fixed 相对浏览器的窗口 其他的会填充
top
right
left
bottom
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outerdiv{background-color:burlywood ;height: 500px;width: 600px; }.innerdiv{height:60px ;width: 100px;border: 1px solid black;}.d1{background-color: green;position: static;top: 60px;left: 60px;}.d2{background-color: red;}.d3{background-color: yellow;}</style></head>
<body><div class="outerdiv" ><div class="innerdiv d1">diva</div><div class="innerdiv d2">divx</div><div class="innerdiv d3">divy</div></div></body>
</html>盒子模型
内边距 padding
外边距 margin
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outerdiv{background-color:burlywood ;height: 500px;width: 600px; margin: 0px auto;}.innerdiv{height:60px ;width: 100px;border: 1px solid black;float: left;}.d1{background-color: green;margin-right: 10px;padding-top: 20px;}.d2{background-color: red;margin-left: 10px;}.d3{background-color: yellow;}</style></head>
<body><div class="outerdiv" ><div class="innerdiv d1">diva</div><div class="innerdiv d2">divx</div><div class="innerdiv d3">divy</div></div></body>
</html>相关文章：
Javaweb之css
css的三种引入方式 1内行式 2.内嵌式 3.外部样式表 内行式和内嵌式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&quo…...
实施工程师：面试基础宝典
一.运维工程师和实施工程师的区别：工作内容不同、职能不同、工作形式不同 1.工作内容不同： 运维工程师要对公司硬件和软件进行维护。 硬件包括：机房、机柜、网线光纤、PDU、服 务器、网络设备、安全设备等。 实施工程师包括常用操作系统、应…...
react install
react 安装 React 是一个用于构建用户界面的 JavaScript 库。以下是安装 React 的步骤： 使用 Create React App Create React App 是一个官方支持的命令行工具，用于快速搭建 React 应用。 安装 Node.js 和 npm 确保你的计算机上安装了 Node.js 和 npm…...
ElasticSearch DSL查询之排序和分页
一、排序功能 1. 默认排序 在 Elasticsearch 中，默认情况下，查询结果是根据 相关度 评分（score）进行排序的。我们之前已经了解过，相关度评分是通过 Elasticsearch 根据查询条件与文档内容的匹配程度自动计算得出的。…...
uniapp封装websocket
WebSocket介绍 后端使用的是springbootnetty做websocket的服务端，参考我其他博文 项目使用场景 开发uniapp项目时，需要进行实时通信，比如聊天等。需要封装一个工具类，统一对socket进行管理。 uniapp websocket官方文档࿱…...
【Linux】18.Linux进程控制（2）
文章目录 3. 进程程序替换3.1 单进程版 -- 看看程序替换3.2 替换原理3.3 替换函数函数解释命名理解 3.4 多进程版 -- 验证各种程序替换接口3.5 自定义shell 3. 进程程序替换 3.1 单进程版 – 看看程序替换 makefile mycommand:mycommand.cgcc -o $ $^ -stdc99 .PHONY:clean …...
reactor框架使用时，数据流请求流程
1. 我们在Flux打开时，可以看到 public abstract class Flux<T> implements CorePublisher<T> { 2. public interface CorePublisher<T> extends Publisher<T> {void subscribe(CoreSubscriber<? super T> subscriber); } Publish…...
读西瓜书的数学准备
1，高等数学：会求偏导数就行 2，线性代数：会矩阵运算就行 参考：线性代数--矩阵基本计算（加减乘法）_矩阵运算-CSDN博客 3，概率论与数理统计：知道啥是随机变量就行...
摄像头模块如何应用在宠物产品领域
一、宠物监控类产品 家庭宠物远程监控摄像头 1.基本功能与原理：这类摄像头可以通过 Wi - Fi 连接到家庭网络，主人可以使用手机应用程序在任何有网络连接的地方查看宠物的实时画面。摄像头模块内置有图像传感器，能够捕捉光线并将其转换为数字…...
c++学习第七天
创作过程中难免有不足，若您发现本文内容有误，恳请不吝赐教。 提示：以下是本篇文章正文内容，下面案例可供参考。 一、const成员函数 //Date.h#pragma once#include<iostream> using namespace std;class Date { public:Date…...
Ubuntu 24.04 LTS 通过 docker 安装 nextcloud 搭建个人网盘
准备 Ubuntu 24.04 LTSUbuntu 空闲硬盘挂载Ubuntu 安装 Docker DesktopUbuntu 24.04 LTS 安装 tailscale [我的Ubuntu服务器折腾集](https://blog.csdn.net/jh1513/article/details/145222679。 安装 nextcloud 参考 Ubuntu24.04系统Docker安装NextcloudOnlyoffice _。 更…...
RabbitMQ1-消息队列
目录 MQ的相关概念 什么是MQ 为什么要用MQ MQ的分类 MQ的选择 RabbitMQ RabbitMQ的概念 四大核心概念 RabbitMQ的核心部分 各个名词介绍 MQ的相关概念 什么是MQ MQ(message queue)，从字面意思上看，本质是个队列，FIFO 先入先出&am…...
Open3D计算点云粗糙度（方法一）【2025最新版】
目录 一、Roughness二、代码实现三、结果展示博客长期更新，本文最近更新时间为：2025年1月18日。 一、Roughness 通过菜单栏的Tools > Other > Roughness找到该功能。 这个工具可以估计点云的“粗糙度”。 选择一个或几个点云，然后启动这个工具。 CloudCompare只会询问…...
算法6（力扣148）-排序链表
1、问题 给你链表的头结点 head ，请将其按 升序 排列并返回 排序后的链表 。 2、采用例子 输入：head [4,2,1,3] 输出：[1,2,3,4] 3、实现思路 将链表拆分成节点，存入数组使用sort排序，再用reduce重建链接 4、具…...
一文大白话讲清楚webpack基本使用——9——预加载之prefetch和preload以及webpackChunkName的使用
文章目录 一文大白话讲清楚webpack基本使用——9——预加载之prefetch和preload1. 建议按文章顺序从头看，一看到底，豁然开朗2. preload和prefetch的区别2. prefetch的使用3. preload的使用4. webpackChunkName 一文大白话讲清楚webpack基本使用——9——…...
【大数据2025】MapReduce
MapReduce 基础介绍 起源与发展：是 2004 年 10 月谷歌发表的 MAPREDUCE 论文的开源实现，最初用于大规模网页数据并行处理，现成为 Hadoop 核心子项目之一，是面向批处理的分布式计算框架。基本原理：分为 map 和 reduce …...
Windows图形界面(GUI)-QT-C/C++ - Qt List Widget详解与应用
公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页 目录 QListWidget概述 使用场景 常见样式 QListWidget属性设置 显示方式 (Display) 交互行为 (Interaction) 高级功能 (Advanced) QListWidget常见操作 内容处理 增加项目 删除项目…...
 分支语句和循环语句)
深度学习python基础(第二节) 分支语句和循环语句
本节主要介绍分支语句和循环语句的基本语法。 注意：在python中的作用域以缩进为准。有语言基础的很好理解，了解语法格式就可以。 布尔类型和比较运算符 # True真,False假 a True print(f"布尔变量a的内容是:{a},类型是:{type(a)}") 比较运算…...
Gin 源码概览 - 路由
本文基于gin 1.1 源码解读 https://github.com/gin-gonic/gin/archive/refs/tags/v1.1.zip 1. 注册路由 我们先来看一段gin代码，来看看最终得到的一颗路由树长啥样 func TestGinDocExp(t *testing.T) {engine : gin.Default()engine.GET("/api/user", f…...
第6章 ThreadGroup详细讲解(Java高并发编程详解：多线程与系统设计)
1.ThreadGroup 与 Thread 在Java程序中， 默认情况下， 新的线程都会被加入到main线程所在的group中， main线程的group名字同线程名。如同线程存在父子关系一样， Thread Group同样也存在父子关系。图6-1就很好地说明了父子thread、父…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
XCTF-web-easyupload
试了试php，php7，pht，phtml等，都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接，得到flag...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
FastAPI 教程：从入门到实践
FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...
Linux云原生安全：零信任架构与机密计算
Linux云原生安全：零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言：云原生安全的范式革命 随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源 论文&a…...
GitFlow 工作模式（详解）
今天再学项目的过程中遇到使用gitflow模式管理代码，因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存，无论是github还是gittee，都是一种基于git去保存代码的形式，这样保存代码…...
Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时，显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...