当前位置：首页 > news >正文

Javaweb之css

news 2025/9/15 12:42:24

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…...

编程日记 2025/1/22 22:08:11

实施工程师：面试基础宝典

一.运维工程师和实施工程师的区别：工作内容不同、职能不同、工作形式不同 1.工作内容不同： 运维工程师要对公司硬件和软件进行维护。硬件包括：机房、机柜、网线光纤、PDU、服务器、网络设备、安全设备等。实施工程师包括常用操作系统、应…...

编程日记 2025/1/22 22:04:56

react install

react 安装 React 是一个用于构建用户界面的 JavaScript 库。以下是安装 React 的步骤： 使用 Create React App Create React App 是一个官方支持的命令行工具，用于快速搭建 React 应用。安装 Node.js 和 npm 确保你的计算机上安装了 Node.js 和 npm…...

编程日记 2025/1/22 22:02:26

ElasticSearch DSL查询之排序和分页

一、排序功能 1. 默认排序在 Elasticsearch 中，默认情况下，查询结果是根据相关度评分（score）进行排序的。我们之前已经了解过，相关度评分是通过 Elasticsearch 根据查询条件与文档内容的匹配程度自动计算得出的。…...

编程日记 2025/1/22 21:59:01

uniapp封装websocket

WebSocket介绍后端使用的是springbootnetty做websocket的服务端，参考我其他博文项目使用场景开发uniapp项目时，需要进行实时通信，比如聊天等。需要封装一个工具类，统一对socket进行管理。 uniapp websocket官方文档&#xff1…...

编程日记 2025/1/22 21:57:17

【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 …...

编程日记 2025/1/22 21:49:53

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…...

编程日记 2025/1/22 21:48:38

读西瓜书的数学准备

1，高等数学：会求偏导数就行 2，线性代数：会矩阵运算就行参考：线性代数--矩阵基本计算（加减乘法）_矩阵运算-CSDN博客 3，概率论与数理统计：知道啥是随机变量就行...

编程日记 2025/1/22 21:44:40

摄像头模块如何应用在宠物产品领域

一、宠物监控类产品家庭宠物远程监控摄像头 1.基本功能与原理：这类摄像头可以通过 Wi - Fi 连接到家庭网络，主人可以使用手机应用程序在任何有网络连接的地方查看宠物的实时画面。摄像头模块内置有图像传感器，能够捕捉光线并将其转换为数字…...

编程日记 2025/1/22 21:38:28

c++学习第七天

创作过程中难免有不足，若您发现本文内容有误，恳请不吝赐教。提示：以下是本篇文章正文内容，下面案例可供参考。一、const成员函数 //Date.h#pragma once#include<iostream> using namespace std;class Date { public:Date…...

编程日记 2025/1/22 21:36:24

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 _。更…...

编程日记 2025/1/22 21:31:19

RabbitMQ1-消息队列

目录 MQ的相关概念什么是MQ 为什么要用MQ MQ的分类 MQ的选择 RabbitMQ RabbitMQ的概念四大核心概念 RabbitMQ的核心部分各个名词介绍 MQ的相关概念什么是MQ MQ(message queue)，从字面意思上看，本质是个队列，FIFO 先入先出&am…...

编程日记 2025/1/22 21:30:17

Open3D计算点云粗糙度（方法一）【2025最新版】

目录一、Roughness二、代码实现三、结果展示博客长期更新，本文最近更新时间为：2025年1月18日。一、Roughness 通过菜单栏的Tools > Other > Roughness找到该功能。这个工具可以估计点云的“粗糙度”。选择一个或几个点云，然后启动这个工具。 CloudCompare只会询问…...

编程日记 2025/1/22 21:25:13

算法6（力扣148）-排序链表

1、问题给你链表的头结点 head ，请将其按升序排列并返回排序后的链表。 2、采用例子输入：head [4,2,1,3] 输出：[1,2,3,4] 3、实现思路将链表拆分成节点，存入数组使用sort排序，再用reduce重建链接 4、具…...

编程日记 2025/1/22 21:23:11

一文大白话讲清楚webpack基本使用——9——预加载之prefetch和preload以及webpackChunkName的使用

文章目录一文大白话讲清楚webpack基本使用——9——预加载之prefetch和preload1. 建议按文章顺序从头看，一看到底，豁然开朗2. preload和prefetch的区别2. prefetch的使用3. preload的使用4. webpackChunkName 一文大白话讲清楚webpack基本使用——9——…...

编程日记 2025/1/22 21:20:08

【大数据2025】MapReduce

MapReduce 基础介绍起源与发展：是 2004 年 10 月谷歌发表的 MAPREDUCE 论文的开源实现，最初用于大规模网页数据并行处理，现成为 Hadoop 核心子项目之一，是面向批处理的分布式计算框架。基本原理：分为 map 和 reduce …...

编程日记 2025/1/22 21:14:55

Windows图形界面(GUI)-QT-C/C++ - Qt List Widget详解与应用

公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页目录 QListWidget概述使用场景常见样式 QListWidget属性设置显示方式 (Display) 交互行为 (Interaction) 高级功能 (Advanced) QListWidget常见操作内容处理增加项目删除项目…...

编程日记 2025/1/22 21:13:52

深度学习python基础(第二节) 分支语句和循环语句

本节主要介绍分支语句和循环语句的基本语法。注意：在python中的作用域以缩进为准。有语言基础的很好理解，了解语法格式就可以。布尔类型和比较运算符 # True真,False假 a True print(f"布尔变量a的内容是:{a},类型是:{type(a)}") 比较运算…...

编程日记 2025/1/22 21:11:24

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…...

编程日记 2025/1/22 21:07:07

第6章 ThreadGroup详细讲解(Java高并发编程详解：多线程与系统设计)

1.ThreadGroup 与 Thread 在Java程序中， 默认情况下， 新的线程都会被加入到main线程所在的group中， main线程的group名字同线程名。如同线程存在父子关系一样， Thread Group同样也存在父子关系。图6-1就很好地说明了父子thread、父…...

编程日记 2025/1/22 21:04:52

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

微信小程序之bind和catch

这两个呢，都是绑定事件用的，具体使用有些小区别。官方文档： 事件冒泡处理不同 bind：绑定的事件会向上冒泡，即触发当前组件的事件后，还会继续触发父组件的相同事件。例如，有一个子视图绑定了b…...

编程新知 2025/9/12 22:08:01

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...

编程新知 2025/9/13 19:14:23

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/8/14 2:06:45