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、父…...
学不会游戏逆向,是你没有把握核心
学不会游戏逆向,是你没有把握核心...
RoboCore SMW_SX1276M0 LoRaWAN协议栈开发指南
1. 项目概述RoboCore SMW_SX1276M0 是一款面向嵌入式物联网终端的 LoRaWAN 协议栈封装库，专为 RoboCore LoRaWAN Bee v2.0 模块设计。该模块核心采用 Semtech SX1276 射频收发器，集成高灵敏度 LoRa 调制解调器、前向纠错（FEC）、自…...
MPR121电容触摸传感器驱动与抗干扰工程实践
1. MPR121电容式接近/触摸传感器控制器深度技术解析 MPR121是由NXP Semiconductors（原Freescale）推出的12通道电容式触摸与接近感应专用协处理器芯片，广泛应用于STM32、ESP32、nRF52等主流MCU平台的嵌入式人机交互系统中。该器件并非通用IC外…...
1949-2023年各地级市、县新注册农民专业合作社数量数据
数据介绍 农民专业合作社可以推动农业规模化与产业化经营资源整合，合作社通过集中土地、劳动力、资金等生产要素，实现规模化种植或养殖，降低单位生产成本。通过统一采购农资、技术培训、品牌销售，提升市场竞争力。 产业链延伸&a…...
晶振负载电容与谐振电容的快速计算与选型指南
1. 晶振负载电容的基础概念 第一次接触晶振电路设计时，我也被"负载电容"这个概念绕晕了。简单来说，负载电容就是晶振要正常工作所需要的"外部助力"。想象一下荡秋千，负载电容就像是推秋千的力度——太小了荡不起来&#…...
晶体材料属性预测新范式：零基础掌握CGCNN晶体图卷积神经网络全流程
晶体材料属性预测新范式：零基础掌握CGCNN晶体图卷积神经网络全流程 【免费下载链接】cgcnn Crystal graph convolutional neural networks for predicting material properties. 项目地址: https://gitcode.com/gh_mirrors/cg/cgcnn 在材料科学研究中&#x…...
【Hot 100 刷题计划】 LeetCode 215. 数组中的第K个最大元素 | C++ 快速选择与堆排序题解
LeetCode 215. 数组中的第K个最大元素 | C 快速选择与小顶堆双解法 📌 题目描述 题目级别：中等 给定整数数组 nums 和整数 k，请返回数组中第 k 个最大的元素。 请注意，你需要找的是数组排序后的第 k 个最大的元素，而不…...
RL训练像点外卖？ProRL底层逻辑拆解（非常详细），从入门到精通看这篇！
一句话讲清楚👉🏻 NVIDIA提出ProRL Agent，把多轮LLM Agent的RL训练中「轨迹生成（Rollout）」这一步从训练框架中彻底剥离出来，变成一个独立的HTTP服务，训练侧只需发HTTP请求就能拿到轨迹和奖励信…...
不只是CTF：把攻防世界Reversing题当‘活教材’，提升你的Linux二进制分析实战力
从CTF到实战：用x64Elf-100案例解锁Linux逆向工程核心技能 逆向工程常被视为黑客的专属领域，但它的价值远不止于破解几个CTF题目。当一位金融科技公司的安全工程师通过逆向分析阻止了针对交易系统的0day攻击，或当一位恶意软件研究员仅凭二进制…...
终极解锁NCM音乐自由：从加密困境到全设备畅听的技术破局指南
终极解锁NCM音乐自由：从加密困境到全设备畅听的技术破局指南 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 你是否曾遇到这样的尴尬：精心收藏的网易云音乐下载到本地后，却发现是无法在其他设备播…...