Java学习Day12

最新推荐文章于 2024-09-01 15:30:33 发布
最新推荐文章于 2024-09-01 15:30:33 发布
阅读量727 收藏 5
点赞数 15
文章标签： java 学习 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63651681/article/details/140734887
版权

float浮动

float 属性可以将元素向左或向右浮动，使其他内容环绕在其周围。其主要用值包括：

left: 将元素浮动到其包含块的左侧。

right: 将元素浮动到其包含块的右侧。

none: 默认值，不浮动。

inherit: 从父元素继承 float 属性的值。

清除float浮动

当使用 float 时，浮动元素会影响后续的内容流，因此常常需要使用 clear 属性来清除浮动，避免影响布局。

clear: left;: 清除左侧浮动。

clear: right;: 清除右侧浮动。

clear: both;: 清除左右两侧的浮动。

clear: none;: 默认值，不清除浮动。

.clear-box:after { clear: both; content: ""; display: block; }

.clear-box:after：使用伪元素 :after 清除浮动，以确保包含浮动元素的容器能够正确包裹浮动内容。

clear: both：清除左右浮动，使 .clear-box 元素显示在浮动元素下方，确保容器的高度正确。

在html文件中声明引入css文件

<link rel="stylesheet" href="css/float.css"/>

子代选择器：

子代选择器 ul > li 是 CSS 中的一种选择器，用于选择 ul 元素的直接子元素 li。这种选择器只会匹配那些直接位于 ul 元素内部的 li 元素，而不会影响任何嵌套在 li 元素内部的子元素。

ul > li 通常用于创建和样式化菜单、列表项等，其中你希望直接控制列表项的样式，而不影响嵌套在这些列表项中的其他元素。

以下是使用 ul > li 子代选择器的示例，展示了如何创建一个简单的垂直菜单，并为每个直接子元素应用样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--声明引入css文件-->
		<link rel="stylesheet" href="css/float.css"/>
	</head>
	<body>
		<div class="red"></div>
		<div class="green"></div>
		<div class="blue float"></div>
		
		<div class="pink"></div>
		
	</body>
</html>
div{
	height: 100px;
	width:100px;
}

.red{
	background-color: red;
}

.blue{
	background-color:beige;
}

.green{
	background-color: darkgreen;
}

.pink{
	background-color: pink;
}

.float{
	float: right;
}

.clear-box:after{
	clear:both;
	content: "";
	display: block;
}
/* 子代选择器 */
#menu li{
	border: 1px solid #f3ecd3;
	float:left;
	padding:10px 20px 30px 40px;/*上右下左 */
	padding:10px 20px 30px;/*上 左右 下 */
	padding:10px 25px ;/*上下  左右 */
	width: 100px;
	position:relative;/* 相对定位 */
	
}
#menu>li:hover{
	background-color: #FFA812;
}
ul,ol,li{
	list-style: none;
	margin: 0;
	padding: 0;
}
.child{
	display: none;
	position: absolute;
	left: 0;
	/* top:0; */
	/* bottom: 0; */
	
	
}
.child>li{
	padding: 10px 25px;
	width: 100px;
}

.child>li:hover{
	background-color: aquamarine;
}
#menu>li:hover .child{
	display: block;
}

.menu 选择所有具有 class="menu" 的元素（类选择器）。类选择器 (.menu) 可以应用于多个元素，一个页面中可以有多个相同类名的元素。

#menu 选择具有 id="menu" 的单个元素（ID 选择器）。ID 选择器 (#menu) 应用到页面中的唯一元素，一个页面中每个 ID 应该是唯一的。

优先级:

ID 选择器的优先级比类选择器高。这意味着如果同一个属性的样式同时由类选择器和 ID 选择器定义，ID 选择器的样式会被优先应用。

css中基本边框属性

border: 同时设置边框的宽度、样式和颜色。

border-width: 设置边框的宽度。可以指定具体的像素值，也可以使用关键词（如 thin, medium, thick）。

border-style: 设置边框的样式。

常见的样式包括：

solid（实线）  dashed（虚线） dotted（点线）double（双线）groove（凹槽） ridge（脊） inset（内嵌） outset（凸起） none（无边框）hidden（隐藏）

border-color: 设置边框的颜色。

可以使用颜色名称、十六进制值、RGB、RGBA、HSL 或 HSLA 值。

可以使用 border-top, border-right, border-bottom, border-left 分别设置四个边框的宽度、样式和颜色。

/* 分别设置四个边框的样式 */

element {

  border-top: 2px solid red;

  border-right: 3px dashed green;

  border-bottom: 4px dotted blue;

  border-left: 5px double yellow;

}

border-radius 属性用于设置边框的圆角。可以为每个角设置不同的半径，也可以为所有角设置相同的半径。

/* 设置所有角的圆角半径 */

element {

  border-radius: 10px;

}

/* 分别设置四个角的圆角半径 */

element {

  border-radius: 10px 20px 30px 40px;

}

border-image 属性允许使用图像作为边框。可以设置图像的来源、切割、平铺方式等。

/* 使用图像作为边框 */

element {

  border-image: url('border-image.png') 30 round;

}

css表格

HTML 表格通常包含以下基本元素：

<table>: 表格容器。

<thead>: 表头部分，包含标题行。

<tbody>: 表格主体部分，包含数据行。

<tr>: 表格行。

<th>: 表头单元格（通常加粗且居中）。

<td>: 表格数据单元格。

定位 position 四个属性

position 属性在 CSS 中用于控制元素的定位和布局。它决定了元素如何相对于其正常流动的位置进行定位，并影响其与其他元素的关系。position 属性有几个不同的值，每个值会对元素的布局产生不同的影响。

1. static（默认值）

position: static 是所有元素的默认定位方式。使用此值的元素不会受到 top、right、bottom 和 left 属性的影响，元素将按照正常的文档流进行布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Static Position</title>
  <style>
    .static {
      position: static;
      background-color: lightblue;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="static">Static Position</div>
</body>
</html>

2. relative

position: relative 使元素相对于其正常位置进行定位。设置 top、right、bottom 和 left 属性会相对于元素的原始位置移动元素，但元素仍占据原本的位置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Relative Position</title>
  <style>
    .relative {
      position: relative;
      top: 20px;
      left: 30px;
      background-color: lightcoral;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="relative">Relative Position</div>
</body>
</html>

3. absolute

position: absolute 使元素相对于最近的具有 position 值为 relative、absolute、或 fixed 的祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是 <html> 元素）进行定位。此元素从文档流中完全脱离，周围的元素不会影响它的布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Absolute Position</title>
  <style>
    .container {
      position: relative;
      background-color: lightgray;
      padding: 20px;
      height: 150px;
    }
    .absolute {
      position: absolute;
      top: 10px;
      right: 20px;
      background-color: lightgreen;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="absolute">Absolute Position</div>
  </div>
</body>
</html>

4. fixed

position: fixed 使元素相对于浏览器窗口进行定位，不论页面如何滚动，该元素始终保持在相同的位置。此元素也从文档流中完全脱离，周围的元素不会影响它的布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Position</title>
  <style>
    .fixed {
      position: fixed;
      bottom: 10px;
      right: 10px;
      background-color: lightblue;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="fixed">Fixed Position</div>
</body>
</html>

button

基本按钮样式

/* 基本按钮样式 */
.basic-button {
  background-color: #007bff; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  border: none; /* 去除边框 */
  padding: 10px 20px; /* 内边距 */
  font-size: 16px; /* 字体大小 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
  transition: background-color 0.3s, transform 0.2s; /* 添加过渡效果 */
}

.basic-button:hover {
  background-color: #0056b3; /* 鼠标悬停时背景颜色 */
}

.basic-button:active {
  transform: scale(0.98); /* 鼠标点击时按钮稍微缩小 */
}

.basic-button:focus {
  outline: none; /* 去除焦点时的轮廓 */
}

自定义按钮样式

/* 自定义按钮样式 */
.custom-button {
  background-color: #28a745; /* 背景颜色 */
  color: white; /* 文字颜色 */
  border: 2px solid #28a745; /* 边框颜色 */
  padding: 12px 24px; /* 内边距 */
  font-size: 18px; /* 字体大小 */
  border-radius: 8px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
  transition: all 0.3s ease; /* 过渡效果 */
}

.custom-button:hover {
  background-color: #218838; /* 鼠标悬停时背景颜色 */
  border-color: #218838; /* 鼠标悬停时边框颜色 */
}

.custom-button:active {
  background-color: #1e7e34; /* 鼠标点击时背景颜色 */
  border-color: #1e7e34; /* 鼠标点击时边框颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 点击时阴影效果 */
}

.custom-button:focus {
  outline: none; /* 去除焦点时的轮廓 */
}

文本框

1. 基本输入框样式

/* 基本输入框样式 */
.basic-input {
  width: 100%; /* 宽度 */
  padding: 10px; /* 内边距 */
  border: 2px solid #007bff; /* 边框颜色 */
  border-radius: 5px; /* 圆角 */
  font-size: 16px; /* 字体大小 */
  box-sizing: border-box; /* 包括内边距和边框在宽度内 */
  transition: border-color 0.3s, box-shadow 0.3s; /* 过渡效果 */
}

.basic-input:focus {
  border-color: #0056b3; /* 焦点时边框颜色 */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 焦点时阴影效果 */
  outline: none; /* 去除焦点轮廓 */
}

.basic-input::placeholder {
  color: #6c757d; /* 占位符文字颜色 */
  opacity: 1; /* 占位符文字不透明度 */
}

2. 密码框样式

/* 密码框样式 */
.password-input {
  width: 100%;
  padding: 10px;
  border: 2px solid #28a745; /* 边框颜色 */
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.password-input:focus {
  border-color: #1e7e34;
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
  outline: none;
}

.password-input::placeholder {
  color: #6c757d;
}

3. 多行文本框（<textarea>）

/* 多行文本框样式 */
.textarea {
  width: 100%;
  height: 150px; /* 高度 */
  padding: 10px;
  border: 2px solid #17a2b8; /* 边框颜色 */
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
  resize: vertical; /* 允许用户垂直调整大小 */
}

.textarea:focus {
  border-color: #138496;
  box-shadow: 0 0 5px rgba(23, 162, 184, 0.5);
  outline: none;
}

.textarea::placeholder {
  color: #6c757d;
}

m0_63651681
关注
  • 15
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java学习路线：day12
12-21
在本篇"Java学习路线：day12"中，我们将深入探讨其中的继承性和多态性。 ### 继承性的使用与理解 **1. 继承性的好处** - **代码复用**：当多个类有相似的属性和方法时，通过继承一个共同的父类，可以避免重复编写...
java学习day06
01-20
面向对象 public class Demo01PrintArray { public static void main(String[] args) { int[] array = {10, 20, 30, 40, 50}; // 使用面向过程 System.out.print([);//去掉ln,不换行 for (int i = 0;...
Java学习day01-day15学习资料
04-05
Java学习资料涵盖从基础到进阶的多个主题，适合初学者逐步掌握这门语言。这份资料包括了day01至day15的学习内容，主要围绕Java编程的核心概念展开。以下是对每个子文件名中涉及知识点的详细解释： 1. **day02**: 这...
day3 java 学习笔记
01-13
day3 java 笔记
Java学习打卡Day18
12-22
在Java学习中，了解接口的多态性及其应用是非常关键的。多态性允许我们用一个父类型的引用来指向子类型对象，这样就可以在不关心具体类型的情况下调用子类型的方法。接口的多态性体现在不同类型的引用指向同一个实现...
Java基础（6）- Java代码笔记3
weixin_47062560的博客
08-30 1988
数据类型[][] 数组名 = new 数据类型[m][n]数据类型 数组名[][] = new 数据类型[m][n]数据类型[] 数组名[] = new 数据类型[m][n]m：代表二维数组长度n：代表二维数组中每个一维数组的长度。
浅析synchronized锁升级的原理与实现 1
最新发布
水w的博客
09-01 976
浅析synchronized锁升级的原理与实现
[C++规范] 访问类成员变量的方式：直接访问还是通过成员函数访问？
热门推荐
Loewen丶的小窝
08-26 1万+
在面向对象编程（OOP）中，通过成员函数（如`ME_HardwareTypeEnum Type() const;` 和 `int Id() const;`）来访问类的私有或受保护成员（如`m_hardwareType` 和 `m_id`），而不是直接通过公共成员访问，是一种更好的做法。
《深入理解 Java 中的适配器模式》
面团到油条的成长日记
08-29 7071
在软件开发的广阔领域中，不同接口之间不匹配的问题时常像个棘手的难题困扰着开发者。而适配器模式就像是一位得力的助手，专门用来解决这类问题。它的关键作用在于把一个类的接口有效地转化为客户端所期望的另一种接口，让原本因接口不相符而不能一起工作的两个类可以共同协作，学习本文希望你能有所收获
Java设计模式之建造者模式详细讲解和案例示范
weixin_39996520的博客
08-28 5515
建造者模式是一种创建型设计模式，允许用户通过一步步地构造复杂对象的方式来避免直接使用大量的构造函数或复杂的初始化过程。它通过将对象的创建过程分解为多个步骤，并允许这些步骤以链式调用的方式来执行，最终生成一个完全构建的对象。首先，我们定义一个Order类，该类包括了多个字段，如订单ID、客户信息、商品列表、配送地址等。// Getter方法省略...在这个例子中，类提供了构建Order对象所需的各个方法，每个方法返回实例，以便进行链式调用。
C++的内存模型
qhu1600417010的博客
08-28 1136
C++ 的内存模型包含了程序运行时如何分配、访问、管理内存的规则，涵盖了多线程环境下的数据一致性、内存对齐、以及虚拟内存管理等内容。掌握这些概念对于编写高效、安全的 C++ 程序至关重要。
spring-data-redis中RedisRepository仓储
OceanSky的专栏
08-27 506
Id@RedisHash注解的value属性和@Id注解指定键值的命名空间，组合成user:id；@RedisHash的属性timeToLive属性指定键值的超时时间。CrudRepository接口中默认定义实现了save、saveAll、findById、existsById、findAll、findAllById、count、deleteById、delete、deleteAllById、deleteAll等方法，基本满足了对redis操作的需求；如果有特殊需求可以自定义实现。
输入三个正整数，找出不大不小的值
laocooon的博客
08-30 1155
/ 找出最大值，找出最小值，然后不是最大值也不是最小值的。// 2、输入三个正整数，找出不大不小的值。
优秀的开源项目
猪猪
08-28 581
目录热key多线程并行秒级百G级日志工具ES操作工具消息推送平台HTTP 客户端业务层的分布式限流组件企业级微服务解决方案hotkey: 京东App后台中间件，毫秒级探测热点数据，毫秒级推送至服务器集群内存，大幅降低热key对数据层查询压力asyncTool: 解决任意的多线程并行、串行、阻塞、依赖、回调的并行框架，可以任意组合各线程的执行顺序，带全链路执行结果回调。多线程编排一站式解决方案。来自于京东主App后台。asyncTool: 解决任意的多线程并行、串行、阻塞、依赖、回调的并行框架，可以任意组合各
死锁及其产生条件
秋夫人
08-26 3571
死锁是指两个或多个线程（或进程）互相等待对方释放资源，导致所有相关线程都无法继续执行的情况。这是并发编程中的一个常见问题，可能会导致系统部分或完全停止响应。
SpringBoot日常：扩展接口之CommandLineRunner和ApplicationRunner
qq_32590535的博客
08-28 519
日常开发中我们可能经常会遇到这样的场景，像启动容器完成后需要去执行一些业务逻辑，SpringBoot给我们提供了两个接口来帮助我们实现这种需求，两个启动加载接口分别是CommandLineRunner和ApplicationRunner。本文简单介绍如何使用该扩展点实现业务。
JVM 内存参数
iOS逆向与安全
08-29 2248
它屏蔽了与具体操作系统平台相关的信息，使Java程序只需生成在Java虚拟机上运行的目标代码（字节码），就可以在各种平台上不加修改的运行。‌例如，‌可以将最小堆内存设置为2GB（‌-Xms2048m）‌，‌最大堆内存设置为4GB（‌-Xmx4096m）‌。如果初始化的高水位线设置过低，会频繁的触发Full GC，高水位线会被多次调整。一般来说，垃圾回收器都会有默认的对象晋升到老年代的年龄参数阈值，CMS默认是6，G1默认是15，不过这参数值也不是一成不变的，它会根据动态年龄判断规则来重新被赋值。
Java并发编程 进程与线程
m0_56369671的博客
08-28 1126
操作系统中有一个组件叫做任务调度器，将 cpu 的时间片（windows下时间片最小约为 15 毫秒）分给不同的程序使用，只是由于 cpu 在线程间（时间片很短）的切换非常快，人类感觉是 同时运行的。但如果是四核 cpu，各个核心分别使用线程 1 执行计算 1，线程 2 执行计算 2，线程 3 执行计算 3，那么 3 个线程是并行的，花费时间只取决于最长的那个线程运行的时间，即 11ms 最后加上汇总时间只会花费 12ms 注：需要在多核 cpu 才能提高效率，单核仍然时是轮流执行。
Java 虚方法表（虚函数）
一心向阳，光芒万丈
08-31 469
虚方法表是一个类的内部数据结构，用于支持方法的动态绑定（即运行时多态）。每个类在加载时会生成一个虚方法表，其中包含了类中所有虚方法的地址。方法地址的存储：虚方法表存储了类的所有方法（包括继承自父类的方法）的内存地址或指针。这些方法在虚方法表中的顺序与它们在类中声明的顺序一致。动态绑定：当方法调用发生时，JVM 会根据对象的实际类型（而不是声明类型）来查找并调用正确的方法实现。这种机制允许程序在运行时决定调用哪个方法，从而实现多态。被privatestaticfinal。
Java学习打卡day8：深入理解方法与代码实践
"Java学习打卡day8，主要内容包括方法的基础语法，特别是`public static void main(String[] args)`方法的理解和使用，以及如何调用自定义方法进行计算并输出结果。" 在Java编程语言中，方法是组织代码的基本单元，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值