【CSS】8-css定位

CSS3实现八方向云台遥控器样式 CSS3实现八方向云台遥控器样式,开发的项目需要一个可以八个方向调节的云台控制器,翻阅多位大佬的博文后实现,现记录下来,以备以后用到。 立即下载

8-css定位

显示优先级

z-index属性,数值越大越靠上

1.relative:相对定位

1.相对于元素原来的位置定位
2.top,left,bottom,right设置定位置
3.不会脱离文档流,原来的位置仍然保留

例子:
	#div1 {
		background-color: green;
		
		/* 相对定位 */
		position: relative;
		top: 50px;
		left: 50px;
		
		/* 显示优先级,数值越大越靠上 */
		z-index: 300;
		
	}

2.absolute:绝对定位

1.相对有定位的祖宗标签定位,如果未找到,会相对body定位
2.会脱离文档流,原来的位置不保留

例子:
	#div2 {
		background-color: yellowgreen;
		
		/* 绝对定位 */
		position: absolute;
		top: 200px;
		left: 0px;
		
		z-index: 100;
		
	}

3.fixed:固定定位

1相对于浏览器窗口定位,位置不会随滚动条滚动而变化
2.会脱离文档流,原来的位置不保留

    #div3 {
    		background-color: pink;
    		
    		/* 固定定位 */
    		position: fixed;
    		top: 200px;
    		left: 0;
    		
    	}

5.sticky:粘性定位

1.相对浏览器窗口定位,达到指定定位值时会出现固定定位的效果
2.不会脱离文档流,原来的位置仍然保留

	#div4 {
			background-color: skyblue;
			
			/* 粘性定位 */
			position: sticky;
			top: 10px;
			
			z-index: 200;
		}
html5+CSS3八方向云台控制,近焦远焦,放大缩小 DIV手工打造云台控制组件,适用场景广泛。八方向云台控制,近焦远焦控制,放大缩小控制。 立即下载

相关推荐

云台控制器+css+jQuery+canvas

云台控制器+css+jQuery+canvas(鼠标移入移出,按钮改变样式)

八个方向调节的云台控制器

VUE开发的项目需要一个可以八个方向调节,放大缩小,近焦远焦的云台控制器,翻阅多位大佬的博文后实现。 核心采用html5+CSS3代码实现 最终效果如下: 图片+源码下载地址:https://download.youkuaiyun.com/download/weixin_43932346/20306223 ...

weixin_43932346的博客 2405

CSS模仿遥控器按钮.

CSS模仿遥控器按钮. CSS模仿遥控器按钮. CSS模仿遥控器按钮.

【八方位云台控制器】

css绘制八方位云台控制器实现效果图代码

qq_45433503的博客 3448

html5+div+css3网站样式模板

html5+div+css3网站样式模板,漂亮的网站样式模板,有样式、图片

WEB方式直连海康设备Demo&SDK;(带云台)

web页面完美调用海康摄像头demo,支持预览、抓拍、录像、最重要的是支持云台、支持云台、支持云台。

云台方向控制按钮

简约云台方向按钮html

qq_36406553的博客 1091

DIV手工打造云台控制组件,适用场景广泛。八方向云台控制,近焦远焦控制,放大缩小控制html5 CSS.zip

DIV手工打造云台控制组件,适用场景广泛。八方向云台控制,近焦远焦控制,放大缩小控制html5 CSS.zip

绝对定位_【CSS】8 CSS布局:定位

1、定位可以让某个元素自由的在一个盒子内移动,并且压住其他盒子。2、定位组成将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。定位+定位模式+边偏移。(1)定位模式定位模式决定元素的定位方式,通过CSS的position属性设置,其值可以分为4个:(2)边偏移就是定位的盒子移动到最终位置。有top、bottom、left、right 4个属性。定义元素在各个方向上相对于其父元素...

weixin_33676046的博客 172

别再只调电压了!深入理解数控电源的CC/CV模式与双闭环PID控制(以BUCK电路为例)

本文深入解析数控电源的CC/CV模式与双闭环PID控制技术,以BUCK电路为例,探讨如何通过双闭环控制优化负载突变响应和模式切换稳定性。文章详细介绍了电压环与电流环的协同工作原理、PID参数整定技巧及工程实践中的非线性补偿方法,帮助工程师提升电源设计的智能控制能力。

weixin_27017211的博客 261

ANSYS Fluent DPM实战:从单点到锥形注入的粒子模拟全流程解析

本文深度解析了ANSYS Fluent中离散相模型(DPM)的粒子注入(Injection)设置全流程。从单点注入到锥形喷雾,详细阐述了不同注入类型的物理本质、参数逻辑与适用场景,并提供了粒径分布、湍流扩散等高级参数设置技巧与实战避坑指南,帮助工程师精准模拟喷雾、粉尘等粒子运动行为。

weixin_29276847的博客 652

8.css-定位

定位是网页布局方式中的定位流排版方式,定位分为四种:相对定位、绝对定位、固定定位、静态定位。 一.相对定位 相对定位就是相对自己原先在标准流中的位置来移动。 1.注意: 1.1相对定位不会脱离标准流,会继续在标准流中占有一份空间。 1.2相对定位中同一方向上的定位属性只能使用一个。 1.3由于相对定位是不脱离标准流的,故块级元素、行内元素、行内块级元素这些在标准流里的概念在定位流中照样...

yangyalun的博客 300

std::map看来可以被淘汰了?可以用vector来替代,而且更好

vector的优势在于内存连续,可以先std::sort,然后std::lower_bound,或者std::binary_search。而std::map,insert的时候,需要new出内存。

tumu_C的博客 1019

HTML和CSS —— 8、定位

定位 一、定位的含义 定位是一种更加高级的布局手段 通过定位可以将元素摆放到页面的任意位置 使用position属性来设置定位 可选值: static 默认值,元素是静止的没有开启定位 relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘滞定位 二、相对定位 概念: ​ 当元素的position属性设置为relative时则开启了元素的相对定位 特点: 元素开启相对定位以后,如果不设置偏移量

m0_46291458的博客 230

1553B通信项目开发笔记(一)协议概述

最近接了个项目,需要用1553B协议通信,仅作为RT端口进行通信,控制器采用ARM 使用芯片为国产的BU61580芯片,功能和引脚和DDC的61580完全一致。

u010396127的博客 2万+

VisionMaster 4.2.0安装

按照顺序安装。

XuXing_java的专栏 3780

css 定位 8.7

css中的position属性,position有四个值:relative(相对定位)、absolute(绝对定位)、static(静态定位)和fixed(固定定位),通过top、left、bottom、right来调整元素位置。1、必须指定 top、bottom、left、right4 个值之一,否则只会处于相对定位。2、偏移量属性为left、top、bottom、right。3、偏移量属性为left、top、bottom、right。1、偏移量属性为left、top、bottom、right。

weixin_68597796的博客 197

解决Cursor AI工具地域限制报错的方法与原理

地理围栏(GEO-fencing)是现代云服务常用的访问控制技术,通过IP地址库匹配、支付系统验证等方式实现区域限制。在AI编程工具领域,这种技术常导致类似Cursor出现的'unsupported country region'报错。从技术实现看,服务商会综合HTTP头信息、时区设置等多维度数据进行地理位置判断。开发者可通过调整网络出口、配置本地模型或使用企业版等方案解决。本文以Cursor为例,详细分析了AI工具地域限制的底层原理,并提供了包括Ollama本地部署在内的多种工程实践方案,特别适合需要稳定

weixin_30820077的博客 929

CSS学习Day8之定位

定位 相对定位 不脱离标准文档流,可以调整元素 参考点:以原来的位置为参考点 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>相对定位</title> <style type="text/css"> body{ border: 1px solid orange; } div{ width: 200px; heigh

Ishaq_Li的博客 175

2025年12月GESP真题及题解(C++一级): 小杨的爱心快递

2025年12月GESP真题及题解(C++一级): 小杨的爱心快递

王老师青少年编程 1648

黑猫带你学eMMC协议第17篇:超详细的eMMC HS200 & HS400讲解

1 前言 1.1 声明 本文依据eMMC JEDEC5.1及个人工作经验整理而成,如有错误请留言。 本文结合eMMC JEDEC5.1协议手册查看效果更佳。 1.2 内容提要 本文大约6000字,主要内容有: 1.什么是emmc hs200/hs400? 2.什么是tuning?tuning的过程又是什么? 3.如何设置才能让emmc进入hs200 mode? 4.如何设置才能让emmc进入hs400 mode? 5.emmc关于HS200/HS400内部结构框图对比。 6.部分个人相关经验总结。

黑猫奥利奥的博客 1万+

CSS基本知识8-CSS定位

CSS基本知识8-CSS定位

weixin_34246551的博客 95

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

8css定位

8css定位 div1 div2 div3 pppppppp pppppppp pppppppp pppppppp pppppppp pppppppp pppppppp pppppppp pppppppp pppppppp pppppppp pppppppp pppppppp pppppppp pppppppp pppppppp pppppppp

qq_23666533的博客 370

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain&#39;s apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath(&#39;DeepLearnToolbox&#39;));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand(&#39;state&#39;,0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W&#39;); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand(&#39;state&#39;,0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = &#39;sigm&#39;;%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, &#39;Too big error&#39;);```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand(&#39;state&#39;,0)sae = saesetup([784 100]);sae.ae{1}.activation_function = &#39;sigm&#39;;sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)&#39;)% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;;nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, &#39;Too big error&#39;);```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x&#39;,28,28,60000))/255;test_x = double(reshape(test_x&#39;,28,28,10000))/255;train_y = double(train_y&#39;);test_y = double(test_y&#39;);%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you&#39;ll get around 1.2% errorrand(&#39;state&#39;,0)cnn.layers = { struct(&#39;type&#39;, &#39;i&#39;) %input layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 6, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %sub sampling layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 12, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, &#39;Too big error&#39;);```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, &#39;Too big error&#39;);%% ex2 neural net with L2 weight decayrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex3 neural net with dropoutrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex4 neural net with sigmoid activation functionrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex5 plotting functionalityrand(&#39;state&#39;,0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = &#39;softmax&#39;; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand(&#39;state&#39;,0)nn = nnsetup([784 20 10]); nn.output = &#39;softmax&#39;; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

java css定位,练习篇之8-利用css定位元素

《自动化测试系列教程》本系列教程系朋友学习自动化测试过程做的笔记。计划60篇幅。朋友原话:“我的写文章的路线是,教程系列是 一步一步教你设计Python+Selenium自动化测试框架,其中包括4个部分(共计:60篇),基础篇(5篇):主要告诉大家,Python+Selenium的运行环境怎么搭建以及第一个demo案例练习篇(32篇):主要告诉大家,xpath使用、怎么定位页面元素、根据页面元素进...

weixin_35775446的博客 177

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

css学习笔记8(定位)

粘性定位和相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定。不会脱离文档流,元素位置的变化只是视觉效果上的变化,不会对其他元素产生任何影响。——默认宽、高都被内容所撑开,且能自由设置宽高。注意:绝大多数情况下,相对定位会与绝对定位配合使用。比普通元素高,无论什么定位,显示层级都是一样的。相对定位的元素,也能继续浮动,但不推荐这样做。浏览器来说,视口就是我们看网页的那扇“窗户”。注意:该定位的元素必须设置宽高!调整位置,但不推荐这样做。相对定位的元素,也能通过。

qq_42236791的博客 1292

css入门8:定位

1、指定position属性(static/fixed/relative/absolute/sticky)2、指定top,button,left,right属性3、指定overflow属性4、指定堆叠顺序z-index&lt;html&gt; &lt;head&gt; &lt;style&gt; p.pos_fix { position: fixed; top...

inch2006的博客 217
上一篇: 【CSS】7-css浮动
下一篇: 【CSS】9-css变形
JeffHan^_^
博客等级 码龄7年 1万+粉丝 134原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JeffHan^_^

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值