走馬勿观花
走馬勿观花

盒子模型练习——运用position: relative、absolute、fixed来完成练习（图）

知识点总结任意门：

①position(五种属性，以及每个属性的特点)

②CSS定位—— position绝对定位、相对定位、固定定位

盒子模型练习——运用position: relative、absolute、fixed来完成练习（图）_第1张图片
首先明确知道，position属性配合[top+left]（向右下移动）、[top+right]（向左下移动）、[bottom+left]（向右上移动）、[bottom+right]（向左上移动）使用。


一、利用相对定位position: relative;来完成效果

这个方法跟margin类似，不过margin是通过调整外边距，相对于父元素进行位移；而position: relative;则是调整相对于原来的位置的距离。
①首先，必须给每个box设置宽高（因为没有padding来填充，无法撑开宽高给父元素），并且设置好边的属性。
盒子模型练习——运用position: relative、absolute、fixed来完成练习（图）_第2张图片
②接下来就使用positio: relative;来使每个子元素相对原位置进行位移
（因为这里是嵌套盒子，所以在不设定位置属性的情况下，如上图所示，可以理解为还是相对于父元素进行的位移，因为上一篇已经清楚了每个盒子间的边距，所以直接写就行了，唯一的差别是，margin: Xpx;在这里为position: relative; top/bottom: Xpx; left/right:Xpx;，且偏移前的位置保留不动。注意position要配合方向使用，因为它本身并不指定任何方向）
盒子模型练习——运用position: relative、absolute、fixed来完成练习（图）_第3张图片


<html>
<head>
<meta charset="utf-8">
<title>盒子练习——相对定位title>
<style type="text/css">
body{
    padding: 0px;
    margin: 0px;
}
/*500×500*/
.box1{
    border: 5px dotted #000000;
    width: 490px;
    height: 490px;
}
/*440×440*/
.box2{
    border: 5px solid #0000ff;
    width: 430px;
    height: 430px;
    position: relative;
    top: 25px;
    left: 25px;
}
/*400×400*/
.box3{
    background-color: #ffa0df;
    width: 400px;
    height: 400px;
    position: relative;
    top: 15px;
    left: 15px;
}
/*300×300*/
.box4{
    border: 3px dotted #ffffff;
    width: 294px;
    height: 294px;
    position: relative;
    top: 50px;
    left: 50px;
}
/*280×280*/
.box5{
    border: 3px dotted #ffffff;
    width: 274px;
    height: 274px;
    position: relative;
    top: 7px;
    left: 7px;
}
/*150×150*/
.box6{
    border: 5px solid #ffff00;
    background-color: #adff2f;
    width: 140px;
    height: 140px;
    position: relative;
    top: 62px;
    left: 62px;
}
style>
head>

<body>
<div class="box1">
	<div class="box2">
		<div class="box3">
			<div class="box4">
				<div class="box5">
					<div class="box6">div>
				div>
			div>
		div>
	div>
div>
body>
html>


二、利用绝对定位position: absolute;来完成效果

position的相对、绝对、固定都是定位属性值。所以position: absolute;参照定位的父元素，可以是position: absolute;可以是position: relative;也可以是position: fixed;
盒子模型练习——运用position: relative、absolute、fixed来完成练习（图）_第4张图片

①如果想设定position: absolute;就要知道，它是相对于含定位属性的父元素来进行绝对定位的，如果父元素没有定位属性，那就再往外一个父元素，直到找到含定位属性的父包含块，如果都没有，那就以body为参考定位。
盒子模型练习——运用position: relative、absolute、fixed来完成练习（图）_第5张图片
②如果需要相对父元素进行绝对定位，只需给父元素加上position就行了，可以不赋值。
盒子模型练习——运用position: relative、absolute、fixed来完成练习（图）_第6张图片
③所以不要忘了这里在最外层的父元素——box1里面设置position，否则box2就相对body定位了。
盒子模型练习——运用position: relative、absolute、fixed来完成练习（图）_第7张图片

PS：开发时，只要子元素出现position: absolute;父元素就必须设position: relative;不然走位。我这里每层都有定位属性，所以只在最外层设 position: relative; 而已。


<html>
<head>
<meta charset="utf-8">
<title>盒子练习——绝对定位title>
<style type="text/css">
body{
    padding: 0px;
    margin: 0px;
}
/*500×500*/
.box1{
    border: 5px dotted #000000;
    width: 490px;
    height: 490px;
    /*在开发中，如果要使用绝对定位，且不希望参考body，那么它参照的定位元素必须是position: relative*/
    position: relative;	
}
/*440×440*/
.box2{
    border: 5px solid #0000ff;
    width: 430px;
    height: 430px;
    position: absolute;
    /*开发时，子元素出现 position: absolute; 父元素就需要设 position: relative; 不然走位，我这里每层都有定位属性，所以只在最外层设 position: relative; 而已*/
    top: 25px;
    left: 25px;
}
/*400×400*/
.box3{
    background-color: #ffa0df;
    width: 400px;
    height: 400px;
    position: absolute;
    /*开发时，子元素出现 position: absolute; 父元素就需要设 position: relative; 不然走位，我这里每层都有定位属性，所以只在最外层设 position: relative; 而已*/
    top: 15px;
    left: 15px;
}
/*300×300*/
.box4{
    border: 3px dotted #ffffff;
    width: 294px;
    height: 294px;
    position: absolute;
    /*开发时，子元素出现 position: absolute; 父元素就需要设 position: relative; 不然走位，我这里每层都有定位属性，所以只在最外层设 position: relative; 而已*/
    top: 50px;
    left: 50px;
}
/*280×280*/
.box5{
    border: 3px dotted #ffffff;
    width: 274px;
    height: 274px;
    position: absolute;
    /*开发时，子元素出现 position: absolute; 父元素就需要设 position: relative; 不然走位，我这里每层都有定位属性，所以只在最外层设 position: relative; 而已*/
    top: 7px;
    left: 7px;
}
/*150×150*/
.box6{
    border: 5px solid #ffff00;
    background-color: #adff2f;
    width: 140px;
    height: 140px;
    position: absolute;
    top: 62px;
    left: 62px;
}
style>
head>

<body>
<div class="box1">
	<div class="box2">
		<div class="box3">
			<div class="box4">
				<div class="box5">
					<div class="box6">div>
				div>
			div>
		div>
	div>
div>
body>
html>


三、使用牛皮癣大法——固定定位position: fixed;来完成效果

①什么是牛皮癣？就是那些严重破坏城市形象美观的广告，贴的通街都是，到处都能见到，撕掉又来。那么在html这里差不多，譬如经常浏览网页见到的固定在浏览器某个位置，不受滚动条影响的广告。
② position: fixed;只相对浏览器窗口（即body）移动。所以，如果希望用牛皮癣大法完成上图效果，就相当于每个box都要相对body来移动，无论是否嵌入盒子还是平行盒子。
③这里top（前面练习说过，这里是正方形盒子的居中，间距都一样，top=left）的算法，就是把所有间距和边宽都算上，累加，一层加一层，最好先把最外层父元素位置定好，再去设置下一子元素的。

盒子模型练习——运用position: relative、absolute、fixed来完成练习（图）_第8张图片
④打个比方，就是手机里面的app以及你外屏上的污渍。
盒子模型练习——运用position: relative、absolute、fixed来完成练习（图）_第9张图片


<html>
<head>
<meta charset="utf-8">
<title>盒子练习——固定定位title>
<style type="text/css">
body{
    padding: 0px;
    margin: 0px;
    height: 1000px;		/*为了突出固定定位的效果，把高值设多点*/
}
/*500×500*/
.box1{
    border: 5px dotted #000000;
    width: 490px;
    height: 490px;
    position: fixed;	/*设为固定定位属性，使这个最外框跟着整体一起固定，不设置的话，就会随滚动条跑*/
}
/*440×440*/
.box2{
    border: 5px solid #0000ff;
    width: 430px;
    height: 430px;
    position: fixed;
    /*间距25*/
    top: 30px;			/*因为最外box1不做位置挪动处理，相当于0，这里直接 它的间距 + 它的边宽值（border-top-size: 5px;）*/
    left: 30px;
}
/*400×400*/
.box3{
    background-color: #ffa0df;
    width: 400px;
    height: 400px;
    position: fixed;
    /*间距15*/
    top: 45px;			/*累计相加，它父元素的top值 + 它的间距*/
    left: 45px;
}
/*300×300*/
.box4{
    border: 3px dotted #ffffff;
    width: 294px;
    height: 294px;
    position: fixed;
    /*间距50*/
    top: 98px;			/*累计相加，它父元素的top值 + 它的间距 + 它的边宽值（border-top-size: 3px;）*/
    left: 98px;
}
/*280×280*/
.box5{
    border: 3px dotted #ffffff;
    width: 274px;
    height: 274px;
    position: fixed;
    /*间距7*/
    top: 108px;			/*累计相加，它父元素的top值 + 它的间距 + 它的边宽值（border-top-size: 3px;）*/
    left: 108px;
}
/*150×150*/
.box6{
    border: 5px solid #ffff00;
    background-color: #adff2f;
    width: 140px;
    height: 140px;
    position: fixed;
    /*间距62*/
    top: 170px;			/*累计相加，它父元素的top值 + 它的间距 + 它的边宽值（border-top-size: 5px;）*/
    left: 170px;
}
style>
head>

<body>
<div class="box1">
	<div class="box2">
		<div class="box3">
			<div class="box4">
				<div class="box5">
					<div class="box6">div>
				div>
			div>
		div>
	div>
div>
<p style="background-color:#f39; color:#ffffff;">请看右边滚动条p>
body>
html>

你可能感兴趣的:(CSS,html+css入门学习过程,#,盒子模型练习)

  • tauri如何实现窗口拖动，自定义标题栏 爱音乐的程序猿 rust语言前端taurirust前端桌面软件exe
    文章目录一、tauri是什么？二、封装好的标题栏，引用修改即可使用三相关配置实现细节实现窗口拖动一、tauri是什么？Tauri是一个开源框架，用于创建跨平台的桌面应用程序。它使用Rust编程语言，并结合了现有的Web技术，如HTML、CSS和JavaScript。Tauri旨在提供一个快速、可靠和安全的方式来构建本地应用程序，同时保持Web开发的灵活性和易用性。它支持多个操作系统和架构，包括Wi
  • C++上机实验|继承与派生编程练习 皖山文武 C++语言程序设计教程c++开发语言
    1.实验目的(1)掌握派生与继承的概念与使用方法(2)运用继承机制对现有的类进行重用。(3)掌握继承中的构造函数与析构函数的调用顺序,(4)为派生类设计合适的构造函数初始化派生类。(5)深入理解继承与组合的区别。2.实验内容设计一个人员类person和一个日期类date,由人员类派生出学生类student和教师类professor,学生类和教师类的数据成员birthday为日期类。3.参考代码#i
  • C#基础教程07 判断 超级无敌暴龙战士塔塔开 C#c#开发语言.net
    文章目录C#条件判断入门教程条件判断的基本语法常用运算符逻辑运算符if语句总结C#条件判断入门教程在C#编程语言中，条件判断是一种非常重要的控制语句。通过条件判断，我们可以根据不同的情况执行不同的代码，实现程序的流程控制。本篇文章将为大家介绍C#条件判断的基本语法、常用运算符、逻辑运算符，以及if语句、switch语句等控制语句的使用方法。条件判断的基本语法在C#中，条件判断的基本语法如下：pla
  • STM32实时时钟（RTC）代码深度解析 | 零基础入门STM32第三十九步 触角01010001 STM32stm32单片机嵌入式硬件
    主题内容教学目的/扩展视频RTC时钟的使用重点课程RTC时钟的原理，电路原理分析，固件库分析，驱动程序分析。在超级终端上显示时钟。做可修改的超级终端显示RTC的项目。师从洋桃电子，杜洋老师文章目录一、RTC初始化流程分析1.1时钟与备份域配置1.2初始化检测机制二、时间处理核心算法2.1闰年判断算法2.2时间戳转换（Unix时间）三、时间读取与转换3.1读取计数器值3.2星期计算算法四、中断处理机
  • STM32固件库文件调用原理详解 | 零基础入门STM32第二十二步 触角01010001 STM32stm32嵌入式硬件单片机
    主题内容教学目的/扩展视频固件库介绍什么是固件库，固件库下载，各文件夹介绍对固件库有基础的印象即可。师从洋桃电子，杜洋老师文章目录一、固件库的核心组成1.启动代码（StartupFiles）2.内核相关程序（CMSIS层）3.外设驱动库（StdPeriph_Driver）二、文件调用原理剖析1.启动流程全景图2.外设驱动调用实例3.文档手册的关键作用三、工程文件结构解析四、头文件的桥梁作用五、结语
  • Html5学习教程，从入门到精通， HTML5超链接应用的详细语法知识点和案例代码（18） 知识分享小能手 网页开发前端开发编程语言如门html5学习前端htmljava后端css3
    HTML5超链接应用的详细语法知识点和案例代码超链接（Hyperlink），也称为跃点链接，是互联网和文档编辑中的一种重要概念。超链接的定义超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、动画、程序、电子邮件地址、文件，甚至是一个音视频文件。如果点击了这个链接，当前页面的位置就会跳转到被链接的目标位置。在文档编辑中，超链接可以链
  • Django框架的全面指南：从入门到高级 步入烟尘 Python超入门指南全册djangosqlite数据库
    本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学，从基础到精通不断进阶深入，后续还有实战项目，轻松应对面试，专栏订阅地址：https://blog.csdn.net/mrdeam/category_12647587.html优点：订阅限时19.9付费专栏，私信博主还可进入全栈VIP答疑群，作者优先解答机会（代码指导、远程服务），群里大佬众多可以
  • 实现openAI流式打印效果 (包含markdown代码高亮及复制功能) Todo_MrWu javascriptvue.js前端
    准备工作//插件npminstallmarkdown-ithighlight.js//引入文件importMarkdownItfrom'markdown-it'importhljsfrom'highlight.js'import'highlight.js/styles/atom-one-dark.css'初始化数据data(){return{vHtml:'',//最终填充展示的htmlstring
  • 前端框架的发展史 Qpeterqiufengyi 专有名词解释前端框架
    1、htmlcss+div从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。1994
  • Webpack 打包详细教程 oliver.chau 前端开发webpack前端node.js
    Webpack是一个现代JavaScript应用的静态模块打包工具，它可以处理JavaScript、CSS、图片等资源，并优化它们以提高性能。以下是Webpack从基础到进阶的详细教程。1.Webpack基础概念Webpack的核心概念包括：Entry（入口）：Webpack开始打包的起点。Output（输出）：打包后的文件存放路径。Loaders（加载器）：转换非JavaScript资源（如CS
  • 工作流编排利器：Prefect 全流程解析 船长@Quant Python金融科技prefectpolars工作流编排数据处理
    工作流编排利器：Prefect全流程解析本文系统讲解了Prefect工作流编排工具，从基础入门到高级应用，涵盖任务与流程管理、数据处理、执行器配置、监控调试、性能优化及与其他工具集成等内容，文末项目实战示例，帮助读者全面回顾Prefect知识点。Prefect官方文档https://docs.prefect.io/v3/get-started/index一、Prefect基础入门（一）关于Pref
  • 我的投资组合网站：打造个性化的在线投资展示平台 Tranyn.X
    本文还有配套的精品资源，点击获取简介：本文介绍如何创建和设计一个在线平台，用于展示个人或专业投资者的投资策略、历史表现和投资理念。网站的构建涉及网页布局、响应式设计、CSS样式控制、内容管理、数据分析、SEO优化、安全性、用户体验、个性化和社交媒体整合等多个方面，确保网站既具有吸引力又能够有效地传达投资者的专业形象和投资成就。1.投资组合网站构建与网页布局设计网站构建的初步规划在当今数字化时代，构
  • 600条最强 Linux 命令总结（非常详细）零基础入门到精通，收藏这一篇就够了 网安导师小李 程序员编程网络安全linux运维服务器学习web安全pythonjava
    一、基本命令uname-m显示机器的处理器架构uname-r显示正在使用的内核版本dmidecode-q显示硬件系统部件(SMBIOS/DMI)hdparm-i/dev/hda罗列一个磁盘的架构特性hdparm-tT/dev/sda在磁盘上执行测试性读取操作系统信息arch显示机器的处理器架构uname-m显示机器的处理器架构uname-r显示正在使用的内核版本dmidecode-q显示硬件系统部
  • Web端测试时，接口返回200，页面有没显示，可能时什么原因？ 海姐软件测试 测试工具面试职场和发展
    需从系统架构、前后端交互、测试方法三个维度展开分析，结合具体场景给出可落地的排查方案：一、核心原因分析（按优先级排序）前端渲染异常JS脚本执行错误（如语法错误导致页面渲染中断）DOM元素未正确加载（XHR异步请求未完成时触发渲染）CSS样式冲突（display:none/visibility:hidden导致元素不可见）数据解析错误接口返回字段缺失（如缺少关键展示字段id）数据格式不符合预期（如字
  • Elasticsearch（ES）详解：从入门到实践 坚持蛊 elasticsearchjenkins大数据
    引言简介：Elasticsearch是一个基于Lucene的分布式搜索引擎，具有高效的全文搜索功能，广泛应用于日志分析、搜索引擎、实时数据处理等领域。本文目标：介绍Elasticsearch的基本概念、架构设计、配置优化、常见应用以及实际案例，帮助开发者掌握ES1.Elasticsearch概述Elasticsearch的背景和发展历程核心功能：全文检索、分布式搜索、实时数据分析主要应用场景：日志
  • ESP32 小智 AI 机器人入门教程从原理到实现（自己云端部署） 与光同尘 大道至简 人工智能机器人python人机交互githubvisualstudio单片机
    此博客为一篇针对初学者的详细教程，涵盖小智AI机器人的原理、硬件准备、软件环境搭建、代码实现、云端部署以及优化扩展。文章结合了现有的网络资源，取长补短，确保内容易于理解和操作。简介：本教程将指导初学者使用ESP32微控制器开发一个简单的语音对话机器人“小智”。我们将介绍所需的基础原理、硬件准备、软件环境搭建，以及如何编写代码实现语音唤醒和与云端大模型的对接。通过本教程，即使没有深厚的AI或嵌入式经
  • 我与DeepSeek读《大型网站技术架构》（3） 诺亚凹凸曼 架构
    大型网站架构的核心要素《大型网站技术架构：核心原理与案例分析》第三章聚焦于大型网站架构的核心要素，从技术维度剖析了构建高可用、高性能、可扩展系统的关键设计方向。1.五大核心架构要素(1)性能（Performance）目标：快速响应用户请求，优化用户体验。关键策略：前端优化：CDN加速静态资源、合并压缩JS/CSS、浏览器缓存。服务端优化：缓存（Redis/Memcached）、异步处理（消息队列）
  • WordPress建站给外贸人带来的负担 小机出海 建站常谈服务器sslhttps
    WordPress是全球最大的开源建站平台，有着丰富的主题与插件，尽管功能非常强大，但也给想要建站的外贸人带来了一些负担。一、技术门槛与学习成本1、由于WordPress发展了几十年，里面的功能应有尽有，但往往这些复杂的功能导致建站新手对它的学习成本变得很高，需要理解各个模块与功能点，增加了上手的复杂度。2、WordPress的建站服务商他不会告诉你，你可能需要知道一些代码知识（HTML、CSS、
  • 仅仅使用pytorch来手撕transformer架构(4)：解码器和解码器模块类的实现和向前传播 KangkangLoveNLP 手撕系列#transformerpytorchtransformer人工智能深度学习python机器学习
    仅仅使用pytorch来手撕transformer架构(4)：解码器和解码器模块类的实现和向前传播仅仅使用pytorch来手撕transformer架构(1)：位置编码的类的实现和向前传播最适合小白入门的Transformer介绍仅仅使用pytorch来手撕transformer架构(2)：多头注意力MultiHeadAttention类的实现和向前传播仅仅使用pytorch来手撕transfor
  • 深入学习Nginx：从入门到实践 小码快撩 nginx学习运维
    引言Nginx，全名“EngineX”，是一款高性能的HTTP和反向代理服务器，由俄罗斯程序员IgorSysoev开发。以其轻量级、高并发处理能力和稳定性而闻名于世，广泛应用于负载均衡、动静内容分离、API网关、缓存服务以及静态文件服务等多个场景。本文旨在为读者提供一份详尽的Nginx技术学习指南，助您快速掌握并应用这一强大工具。。一、事件驱动模型在Nginx中，事件驱动模型是其高效处理并发连接的
  • 【30天玩转python】项目实战：从零开始开发一个Python项目 爱技术的小伙子 30天玩转pythonlinux运维服务器
    项目实战：从零开始开发一个Python项目在学习Python的过程中，开发一个完整的项目是非常重要的实战练习。它不仅能够帮助你巩固所学的知识，还能提高实际编程能力。本文将带领你从零开始开发一个Python项目，介绍从项目规划、环境搭建、代码实现到项目发布的完整过程。我们将以一个简单的“任务管理系统”为例，逐步讲解如何构建、测试和优化这个项目。1.项目规划1.1项目简介我们将开发一个基于命令行的任务
  • Elasticsearch 入门教学：从零开始掌握分布式搜索引擎 格子先生Lab 搜索引擎elasticsearch分布式
    引言Elasticsearch是一个开源的分布式搜索引擎，基于ApacheLucene构建，能够实现近乎实时的数据搜索和分析。它广泛应用于日志分析、全文搜索、数据可视化等场景。本文将带你从零开始学习Elasticsearch，掌握其基本概念、安装配置、数据操作及搜索功能。1.Elasticsearch简介1.1什么是Elasticsearch？Elasticsearch是一个分布式的RESTful
  • 飞控简析-从入门到跑路序章 skyman满天星 飞控简析pixhawk无人机开源飞控
    一、序言茫茫天数此中求，世道兴衰不自由万万千千说不尽，不如推背去归休本人搞飞控差不多两年了，从一开始什么都不懂的真·小白，到现在的高级小白，我已经经历了太多太多。因为感觉飞控是一个比较小众的产品，所以国内的资料并不是很完善，有些文章重复太多了，而且每个人看问题的视角是不一样的。我虽然只是个半瓶水，但是也想为国内的飞控圈子做一点贡献。二、学飞控有没有前途这个话题有点小，大一点的问法应该是学嵌入式有没
  • ZooKeeper学习总结（1）——ZooKeeper入门介绍 一杯甜酒 ZooKeeper学习总结Zookeeper
    1.概述Zookeeper是Hadoop的一个子项目，它是分布式系统中的协调系统，可提供的服务主要有：配置服务、名字服务、分布式同步、组服务等。它有如下的一些特点：简单Zookeeper的核心是一个精简的文件系统，它支持一些简单的操作和一些抽象操作，例如，排序和通知。丰富Zookeeper的原语操作是很丰富的，可实现一些协调数据结构和协议。例如，分布式队列、分布式锁和一组同级别节点中的“领导者选举
  • Dash 简介 tankusa dash
    Dash是一个基于Python的开源框架，专门用于构建数据分析和数据可视化的Web应用程序。Dash由Plotly团队开发，旨在帮助数据分析师、数据科学家和开发人员快速创建交互式的、基于数据的Web应用，而无需深入掌握前端技术（如HTML、CSS和JavaScript）。Dash的核心优势在于其简单易用性和强大的功能。通过Dash，用户可以使用纯Python代码来构建复杂的Web应用，而无需编写繁
  • 使用css画三角形 伊小小小凡 css前端
    使用css画三角形在CSS中，可以通过利用border属性来创建三角形。其原理是通过设置一个元素的宽高为0，然后给其设置不同方向的边框，并将不需要的边框颜色设置为透明，从而形成三角形的形状。以下是使用CSS创建三角形的示例代码：基本三角形.triangle{width:0;height:0;border-left:50pxsolidtransparent;/*左边框*/border-right:5
  • Zookeeper【概念（集中式到分布式、什么是分布式 、CAP定理 、什么是Zookeeper、应用场景、为什么选择Zookeeper 、基本概念） 】(一)-全面详解（学习总结---从入门到深化） 童小纯 中间件大全---全面详解zookeeper分布式
    作者简介：大家好，我是小童，Java开发工程师，CSDN博客博主，Java领域新星创作者系列专栏：前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步如果感觉博主的文章还不错的话，请三连支持一下博主哦博主正在努力完成2023计划中：以梦为马，扬帆起航，2023追梦人目录Zookeeper概念_集中式到分布
  • 从零手撕 LLaMa3 项目爆火（图解+代码） 机器学习社区 大模型深度学习大模型算法人工智能RAG多模态大模型Llama面试题
    节前，我们组织了一场算法岗技术&面试讨论会，邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。针对大模型技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备面试攻略、面试常考点等热门话题进行了深入的讨论。汇总合集《大模型面试宝典》(2024版)发布！一个月前，Meta发布了开源大模型llama3系列，在多个关键基准测试中优于业界SOTA模型，并在代码生成任务上全面领先。此后，开发
  • Netty入门教程 Kale又菜又爱玩 java开发语言
    Netty入门教程Netty是一个高性能、低延迟的网络通信框架，广泛应用于高并发、高吞吐量的网络应用程序中。它提供了简洁易用的API，封装了底层的复杂操作，让开发者能够专注于业务逻辑。本文将从基础概念入手，逐步深入Netty的核心组件、使用方法及高级特性，帮助你在生产环境中得心应手地使用Netty。1.什么是Netty？Netty是一个异步、事件驱动的网络通信框架，极大地简化了TCP和UDP网络编
  • Android入门（七） | 常用控件 ·Jormungand Androidandroidjavaandroidstudio
    文章目录TextView控件：文本信息Button控件：按钮EditText控件：输入框ImageView控件：图片ProgressBar控件：进度条AlertDialog控件：提示框ProgressDialog控件：带有进度条的提示框TextView控件：文本信息TextView是Android中较常用的一个控件。主要用于在界面上显示一段文本信息，配置在每个活动的xml文件中。除了之前用到的an
  • java线程的无限循环和退出 3213213333332132 java
    最近想写一个游戏，然后碰到有关线程的问题，网上查了好多资料都没满足。 突然想起了前段时间看的有关线程的视频，于是信手拈来写了一个线程的代码片段。 希望帮助刚学java线程的童鞋 package thread; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date
  • tomcat 容器 BlueSkator tomcatWebservlet
    Tomcat的组成部分 1、server A Server element represents the entire Catalina servlet container. (Singleton) 2、service service包括多个connector以及一个engine，其职责为处理由connector获得的客户请求。   3、connector 一个connector
  • php递归,静态变量,匿名函数使用 dcj3sjt126com PHP递归函数匿名函数静态变量引用传参
      <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Current To-Do List</title> </head> <body>
  • 属性颜色字体变化 周华华 JavaScript
    function changSize(className){ var diva=byId("fot") diva.className=className; } </script> <style type="text/css"> .max{ background: #900; color:#039;
  • 将properties内容放置到map中 g21121 properties
    代码比较简单： private static Map<Object, Object> map; private static Properties p; static { //读取properties文件 InputStream is = XXX.class.getClassLoader().getResourceAsStream("xxx.properti
  • [简单]拼接字符串 53873039oycg 字符串
             工作中遇到需要从Map里面取值拼接字符串的情况，自己写了个，不是很好，欢迎提出更优雅的写法，代码如下：           import java.util.HashMap; import java.uti
  • Struts2学习 云端月影
    最近开始关注struts2的新特性，从这个版本开始，Struts开始使用convention-plugin代替codebehind-plugin来实现struts的零配置。 配置文件精简了，的确是简便了开发过程，但是，我们熟悉的配置突然disappear了，真是一下很不适应。跟着潮流走吧，看看该怎样来搞定convention-plugin。 使用Convention插件，你需要将其JAR文件放
  • Java新手入门的30个基本概念二 aijuans java新手java 入门
    基本概念:　　1.OOP中唯一关系的是对象的接口是什么,就像计算机的销售商她不管电源内部结构是怎样的,他只关系能否给你提供电就行了,也就是只要知道can or not而不是how and why.所有的程序是由一定的属性和行为对象组成的,不同的对象的访问通过函数调用来完成,对象间所有的交流都是通过方法调用,通过对封装对象数据,很大限度上提高复用率。　　2.OOP中最重要的思想是类,类是模板是蓝图,
  • jedis 简单使用 antlove javarediscachecommandjedis
    jedis.RedisOperationCollection.java package jedis; import org.apache.log4j.Logger; import redis.clients.jedis.Jedis; import java.util.List; import java.util.Map; import java.util.Set; pub
  • PL/SQL的函数和包体的基础 百合不是茶 PL/SQL编程函数包体显示包的具体数据包
    由于明天举要上课,所以刚刚将代码敲了一遍PL/SQL的函数和包体的实现(单例模式过几天好好的总结下再发出来);以便明天能更好的学习PL/SQL的循环,今天太累了,所以早点睡觉,明天继续PL/SQL总有一天我会将你永远的记载在心里,,,   函数; 函数:PL/SQL中的函数相当于java中的方法;函数有返回值 定义函数的 --输入姓名找到该姓名的年薪 create or re
  • Mockito(二)--实例篇 bijian1013 持续集成mockito单元测试
            学习了基本知识后，就可以实战了，Mockito的实际使用还是比较麻烦的。因为在实际使用中，最常遇到的就是需要模拟第三方类库的行为。         比如现在有一个类FTPFileTransfer，实现了向FTP传输文件的功能。这个类中使用了a
  • 精通Oracle10编程SQL(7)编写控制结构 bijian1013 oracle数据库plsql
    /* *编写控制结构 */ --条件分支语句 --简单条件判断 DECLARE v_sal NUMBER(6,2); BEGIN select sal into v_sal from emp where lower(ename)=lower('&name'); if v_sal<2000 then update emp set
  • 【Log4j二】Log4j属性文件配置详解 bit1129 log4j
    如下是一个log4j.properties的配置   log4j.rootCategory=INFO, stdout , R log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender.stdout.layout=org.apache.log4j.PatternLayout log4j.appe
  • java集合排序笔记 白糖_ java
    public class CollectionDemo implements Serializable,Comparable<CollectionDemo>{ private static final long serialVersionUID = -2958090810811192128L; private int id; private String nam
  • java导致linux负载过高的定位方法 ronin47
    定位java进程ID 可以使用top或ps -ef |grep java ![图片描述][1] 根据进程ID找到最消耗资源的java pid 比如第一步找到的进程ID为5431 执行 top -p 5431 -H ![图片描述][2] 打印java栈信息 $ jstack -l 5431 > 5431.log 在栈信息中定位具体问题 将消耗资源的Java PID转
  • 给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数 bylijinnan 函数
    import java.util.ArrayList; import java.util.List; import java.util.Random; public class RandNFromRand5 { /** 题目：给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数。 解法1： f(k) = (x0-1)*5^0+(x1-
  • PL/SQL Developer保存布局 Kai_Ge
          近日由于项目需要，数据库从DB2迁移到ORCAL，因此数据库连接客户端选择了PL/SQL Developer。由于软件运用不熟悉，造成了很多麻烦，最主要的就是进入后，左边列表有很多选项，自己删除了一些选项卡，布局很满意了，下次进入后又恢复了以前的布局，很是苦恼。在众多PL/SQL Developer使用技巧中找到如下这段：   &n
  • [未来战士计划]超能查派[剧透,慎入] comsci 计划
           非常好看,超能查派,这部电影......为我们这些热爱人工智能的工程技术人员提供一些参考意见和思想........        虽然电影里面的人物形象不是非常的可爱....但是非常的贴近现实生活....    &nbs
  • Google Map API V2 dai_lm google map
    以后如果要开发包含google map的程序就更麻烦咯 http://www.cnblogs.com/mengdd/archive/2013/01/01/2841390.html 找到篇不错的文章，大家可以参考一下 http://blog.sina.com.cn/s/blog_c2839d410101jahv.html 1. 创建Android工程 由于v2的key需要G
  • java数据计算层的几种解决方法2 datamachine javasql集算器
    2、SQL     SQL/SP/JDBC在这里属于一类，这是老牌的数据计算层，性能和灵活性是它的优势。但随着新情况的不断出现，单纯用SQL已经难以满足需求，比如： JAVA开发规模的扩大，数据量的剧增，复杂计算问题的涌现。虽然SQL得高分的指标不多，但都是权重最高的。     成熟度：5星。最成熟的。   
  • Linux下Telnet的安装与运行 dcj3sjt126com linuxtelnet
    Linux下Telnet的安装与运行   linux默认是使用SSH服务的 而不安装telnet服务  如果要使用telnet 就必须先安装相应的软件包  即使安装了软件包 默认的设置telnet 服务也是不运行的 需要手工进行设置 如果是redhat9，则在第三张光盘中找到 telnet-server-0.17-25.i386.rpm
  • PHP中钩子函数的实现与认识 dcj3sjt126com PHP
    假如有这么一段程序： function fun(){ fun1(); fun2(); }   首先程序执行完fun1()之后执行fun2()然后fun()结束。   但是，假如我们想对函数做一些变化。比如说，fun是一个解析函数，我们希望后期可以提供丰富的解析函数，而究竟用哪个函数解析，我们希望在配置文件中配置。这个时候就可以发挥钩子的力量了。   我们可以在fu
  • EOS中的WorkSpace密码修改 蕃薯耀 修改WorkSpace密码
    EOS中BPS的WorkSpace密码修改 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 201
  • SpringMVC4零配置--SpringSecurity相关配置【SpringSecurityConfig】 hanqunfeng SpringSecurity
     SpringSecurity的配置相对来说有些复杂，如果是完整的bean配置，则需要配置大量的bean，所以xml配置时使用了命名空间来简化配置，同样，spring为我们提供了一个抽象类WebSecurityConfigurerAdapter和一个注解@EnableWebMvcSecurity，达到同样减少bean配置的目的，如下：   applicationContex
  • ie 9 kendo ui中ajax跨域的问题 jackyrong AJAX跨域
    这两天遇到个问题，kendo ui的datagrid，根据json去读取数据，然后前端通过kendo ui的datagrid去渲染，但很奇怪的是，在ie 10,ie 11,chrome,firefox等浏览器中，同样的程序， 浏览起来是没问题的，但把应用放到公网上的一台服务器， 却发现如下情况： 1） ie 9下，不能出现任何数据，但用IE 9浏览器浏览本机的应用，却没任何问题
  • 不要让别人笑你不能成为程序员 lampcy 编程程序员
    在经历六个月的编程集训之后，我刚刚完成了我的第一次一对一的编码评估。但是事情并没有如我所想的那般顺利。 说实话，我感觉我的脑细胞像被轰炸过一样。 手慢慢地离开键盘，心里很压抑。不禁默默祈祷：一切都会进展顺利的，对吧？至少有些地方我的回答应该是没有遗漏的，是不是？ 难道我选择编程真的是一个巨大的错误吗——我真的永远也成不了程序员吗？ 我需要一点点安慰。在自我怀疑，不安全感和脆弱等等像龙卷风一
  • 马皇后的贤德 nannan408
       马皇后不怕朱元璋的坏脾气，并敢理直气壮地吹耳边风。众所周知，朱元璋不喜欢女人干政，他认为“后妃虽母仪天下，然不可使干政事”，因为“宠之太过，则骄恣犯分，上下失序”，因此还特地命人纂述《女诫》，以示警诫。但马皇后是个例外。 　　有一次，马皇后问朱元璋道：“如今天下老百姓安居乐业了吗？”朱元璋不高兴地回答：“这不是你应该问的。”马皇后振振有词地回敬道：“陛下是天下之父，
  • 选择某个属性值最大的那条记录（不仅仅包含指定属性，而是想要什么属性都可以） Rainbow702 sqlgroup by最大值max最大的那条记录
    好久好久不写SQL了，技能退化严重啊！！！   直入主题： 比如我有一张表，file_info， 它有两个属性（但实际不只，我这里只是作说明用）： file_code, file_version 同一个code可能对应多个version 现在，我想针对每一个code，取得它相关的记录中，version 值 最大的那条记录， SQL如下： select *
  • VBScript脚本语言 tntxia VBScript
      VBScript 是基于VB的脚本语言。主要用于Asp和Excel的编程。   VB家族语言简介   Visual Basic 6.0           源于BASIC语言。           由微软公司开发的包含协助开发环境的事
  • java中枚举类型的使用 xiao1zhao2 javaenum枚举1.5新特性
    枚举类型是j2se在1.5引入的新的类型,通过关键字enum来定义,常用来存储一些常量.   1.定义一个简单的枚举类型 public enum Sex { MAN, WOMAN }   枚举类型本质是类,编译此段代码会生成.class文件.通过Sex.MAN来访问Sex中的成员,其返回值是Sex类型.   2.常用方法 静态的values()方
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他