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、父…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)：从基础到实战的深度解析-CSDN博客，但实际面试中，企业更关注候选人对复杂场景的应对能力（如多设备并发扫描、低功耗与高发现率的平衡）和前沿技术的…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...
将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？
Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
智能仓储的未来：自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”，物流的终极形态正在诞生 想象这样的场景： 凌晨3点，某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径；AI视觉系统在0.1秒内扫描包裹信息；数字孪生平台正模拟次日峰值流量压力…...
Map相关知识
数据结构 二叉树 二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子 节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只 有左子节点，有的节点只有…...
与常用工具深度洞察App瓶颈)
iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中，性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期，开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发，但背后往往隐藏着系统资源调度不当…...
深度学习水论文：mamba＋图像增强
🧀当前视觉领域对高效长序列建模需求激增，对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模，以及动态计算优势，在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内，就有不…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了，就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合
作者：来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布，Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明，Elastic 作为 …...