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、父…...
后进先出（LIFO）详解
LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子（…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途，下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态 常用选项： n 拒绝显示别名&#…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案：创建非 roo…...
HBuilderX安装（uni-app和小程序开发）
下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤 运行安装程序： 双击下载的.exe安装文件 如果出现安全提示&…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
SpringCloudGateway 自定义局部过滤器
场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
大数据学习（132）-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言Ǵ…...
Linux离线（zip方式）安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1：修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本：CentOS 7 64位 内核版本：3.10.0 相关命令： uname -rcat /etc/os-rele…...