position | 易学教程

Keep Canvas elements positioned relative to background image

阅读更多关于 Keep Canvas elements positioned relative to background image

问题 I'm trying to position elements in my Canvas relative to my background. Window is re-sized keeping the aspect ratio. Background is stretched with window size. The problem is once window is re-sized the element positions are incorrect. If window is re-sized just a little, elements will adjust their size a bit and would be still in the correct position, but if window is re-sized to double it's size then positioning is completely off. So far I used Grid , but it was to no avail as well. Here is

HTML+CSS 绘制太阳系各个行星运行轨迹

阅读更多关于 HTML+CSS 绘制太阳系各个行星运行轨迹

模拟宇宙太阳系 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模拟太阳系</title>  <style> .solarsys { width: 800px; height: 800px; position: relative; margin: 0 auto; background-color: #000000; padding: 0; transform: scale(1); } /*太阳*/ .sun { left: 357px; top: 357px; height: 90px; width: 90px; background-color: rgb(248, 107, 35); border-radius: 50%; box-shadow: 5px 5px 10px rgb(248, 107, 35), -5px -5px 10px rgb(248, 107, 35), 5px -5px 10px rgb(248, 107, 35), -5px 5px 10px rgb(248, 107, 35);

CSS 自适应布局

阅读更多关于 CSS 自适应布局

本篇文章将介页面布局中的自适应布局，常见的自适应布局有以下2种：左列固定右列自适应、左右两列固定中间自适应。 1. 左列固定右列自适应布局方案说明：左列固定右列自适应，也可以为右列固定左列自适应，常见于中台管理界面、移动端Web的列表展示等等。 <div class="container"> <div class="left">固定宽度</div> <div class="right">自适应</div> </div> 1.1 子元素 float:left 说明：左边的固定列设置为 float:left，右边的自适应列设置为 float:none。 CSS ： * { margin: 0;padding: 0 } .container { position: absolute; width: 100%; height: 100%; } .left { float: left; width: 200px; height: 100%; background-color: #72e4a0; } .right { float: none; width: 100%; height: 100%; background-color: #9dc3e6; } 1.2 子元素 width:calc() 说明：自适应列的width根据calc()自动计算，如：父容器width -

照片墙

阅读更多关于照片墙

照片墙鼠标滑到每个小图片从中间产生放大效果 . 注意事项 : ( 嵌套关系 ) 不能在大盒子里直接放图片 , 每个图片要对应一个父元素 ( 即在每个图片里外面嵌套一个小盒子 ) ( 不能一个大的直接扔很多图片 , 如果这样的话需要形成图片放大时 , 找不到参照物 ) 如果图片太大在小盒子里放不下 , 则设置图片宽度 100% 高度 100%, 需要给小盒子加浮动横向排列 1.需要使鼠标滑过小盒子 , 图片发生大小更改 2.ImgBox( 即 img 的父元素 ) 加上 position:relative 形成参照物 Img 加上 position:absolute, 使用 z-index:1 层级关系让图片在最上层显示 3.调整图片位置 : Left:-10px; Top:-10px; 点开浏览器检查 ,hover, 手动移动图片到合适的位置即可完成效果 : 来源： https://www.cnblogs.com/yysn/p/12345876.html

Css定位属性position使用

阅读更多关于 Css定位属性position使用

Position 有四个属性值用来确定定位方式分别是： static（静态定位，position默认值）；absolute（绝对定位）；relative（相对定位）；fixed（固定定位）；sticky（粘性定位）。用法： absolute（绝对定位）根据父元素定位使用 left right top bottom指定的坐标 </head> <style> *{ margin:0; padding:0; } .box{ width:400px; height:200px; background:red; margin:50px auto; /* 形成参照物 */ position:absolute; } .box p{ width: 200px; height:100px; background:yellow; /* 根据父元素的定位进行位置的变化 */ position:absolute; left:20px; top:50px; } </style> <body> <div class="box"> <p>子元素</p> </d relative（相对定位）根据自身的默认位置使用 left right top bottom指定的坐标且占据空间不会破话文档流。 <style> *{ margin:0; padding:0; } .box{ width:400px; height

Ios 若干兼容处理

阅读更多关于 Ios 若干兼容处理

最后处理兼容真是各种苦逼，还算好，最后解决了，再此总结一下 position：fixed 和 input 的问题？ ios 对position：fixed 的定位处理兼容性不是很好，例如，在同时又input的时候，小键盘会将其定位内容顶起，处理方法：网上有各种方式，我处理是没有用position：fixed ；而是用position:absoutle 代替；在使用position：fixed 定位到顶部或底部的时候，内容滚动，会出现定位内容消失，这个时候需要将滚动内容在外层套个； 3.ios默认样式会覆盖掉原样式：放到公共文件里； input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; } textarea { -webkit-appearance: none;} ios input光标定位不准或者覆盖placeHolder字体： *:not(input,textarea) { -webkit-touch-callout: none; -webkit-user-select: none; } input{ -webkit-user-select:auto; } 5.ios光标大小的调整？ font-szie 和line-height 大小一致即可

webGL学习随笔

阅读更多关于 webGL学习随笔

这是对threejs初步的一个理解 EleVR elevr是基于webGL的原生API来实现的一个全景播放平台首先 elevr 是根据绘制适口来进行双屏 VR 渲染的 if (eye === 0) { // left eye webGL. gl .viewport(0, 0, canvas . width / 2, canvas . height ); } else { // right eye webGL. gl .viewport( canvas . width / 2, 0, canvas . width / 2, canvas . height ); } 因为本身对 webGL 的 API 不熟悉，所以改写是存在很大难度的通过层层样式的修改，通过用 localstorage 本地存储的方式写入一个变量值，每次点击去修改其存储的值，然后根据存入值的一个状态来决定走哪个绘制 vierport ，最后 reload 页面，基本实现单双屏切换的状态，但是用户体验肯定不是很乐观，稍后会对 webGL 进入深层次的一个学习，暂时用此方法替代单双屏切换的一个状态具体实现代码 var btn = document .getElementById("btn");// 获取点击按钮的 dom 元素 btn.onclick = function(){// 注册一个点击事件 if (

博客园美化主题推荐之Bili

阅读更多关于博客园美化主题推荐之Bili

博客园美化主题推荐之Bili 一、前言本博客美化主题作者为： GShang ，本文仅在教导如何快速把该美化主题应用到自己的博客中，详细部署内容见博客园主题——Bili2.0来啦。二、博客预览以下为该美化主题的简单预览：三、部署美化主题 3.1.准备工作如果没有开通博客园页面js权限的，先要在博客设置页面申请权限，之后才能开始部署美化主题。（只要礼貌点，客服很快就会批准的😀）。获取js权限之后进入博客设置界面：在这里可以添加自定义的样式代码。 3.2.页面定制 CSS 代码在 "页面定制 CSS 代码" 框中输入以下样式代码： /* 导入符号字体 */ @import url(https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css) screen and (min-width:0px); @import url(https://at.alicdn.com/t/font_438759_kmvtb0te1nd.css) screen and (min-width:0px); textarea[title=js]{ display: none; } /* 此处可自定义修改 */ /* 设置全局变量 */ @media screen and (min-width:0px) { :root { /

下拉菜单项封装，使用图标字体实现

阅读更多关于下拉菜单项封装，使用图标字体实现

通过之前的站点导航案例，分离下拉菜单的共性和特性 dropdown.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dropdown</title> <link rel="stylesheet" href="../css/base.css"> <style> /*分离出dropdown公共样式*/ .dropdown{ position: relative; } .dropdown-toggle{ position: relative; z-index:2; } .dropdown-arrow{ display: inline-block; vertical-align: middle; background-repeat: no-repeat; } .dropdown-list{ display: none; position: absolute; z-index:1; } .dropdown-left{ left:0; right:auto; } .dropdown-right{ right:0; left:auto; } /*分离出nav的dropdown独有样式*/ .menu .dropdown-toggle{ display: block; padding:0 16px

STL——list

阅读更多关于 STL——list

1.关键概述　　list 是定义在 namespace::std 的模板，声明在 <list> ，存储结构是双向链表，提供的正向和反向迭代器。 2.构造list对象 list<int> intlist0;　　// 构造一个空list list<int> intlist1(3);　　// 构造3个元素的 list，元素使用默认构造 list<int> intlist2(3, 2);　　// 构造3个元素的list，元素初始化为3 list<int> intlist3(3, 1, intlist2.get_allocator());　　// 构造一个3元素list，初始化为1，并使用intlist的内存分配策略 list<int> intlist4(intlist2);　　// 拷贝构造 3.元素的增删 front(); // 返回第一个元素，（不检查容器是否为空） back(); // 返回最后元素(不检查容器是否为空） pop_back(); pop_front(); push_back(); push_front(); assign(); // 擦除链表元素，并复制新元素 empty(); 4.迭代器访问list中元素 begin(); end(); rbegin(); rend(); list<int>::reverse rintiter = intlist

订阅 position