七、表格边框合并 相邻表格边框进行合并，得到细线边框效果。...border-left: 10px solid transparent; border-right: 10px solid transparent; } 精灵图 项目中将多张小图片...，合并成一张大图片，这张大图片称之为精灵图。...通过PxCook量取小图片大小，将小图片的宽高设置给盒子 3. 将精灵图设置为盒子的 背景图片 4. ...通过PxCook测量小图片左上角坐标，分别取 负值 设置给盒子的background-position：x y 精灵图的标签都用行内标签 移动背景图位置：backkground-position
---- 第3章 设计与实现 3.1、初始化 3.1.1、介绍： 对程序进行基本的设置、如设置标题、窗口大小、加载标题栏图片和背景图片、注册鼠标事件监听、启动线程等。...在中间绘制出19×19的棋盘，鼠标在棋盘上移动到的位置以该格交线为中心绘制出半径为格子一半大小的红色边框。在界面的底部，绘制处玩家的积分和全局时间，字体为宋体，大小为18。...3.3.2、效果图： 3.3.2、主要代码： //在鼠标移动到的位置,画出红色边框，以便观察确认下棋的位置 g2.setColor(Color.red); g2.drawLine(moveX-...当黑白方的一步的时间和全局时间超过给定的最大值时，弹出提示框并播放音乐，如果超过一步的时间，则扣一分，超过全局时间则扣2分并且游戏结束。在线程休眠一秒后，用repaint();方法重新绘制棋盘。...在右下角添加了矩形功能按钮框与致胜小妙招。在最下方是玩家的信息。 3.9 、生成可执行文件 为了摆脱用户对程序开发环境的依赖，提升程序的实用性与体验感。
二、 图片拖拽效果介绍 本篇文章，如下视频所示，界面有5个方格拖放区域，我们可以在这些区域里拖拽图片，当鼠标拖动图片时，图片周围有灰色的粗边框效果提示用户当前元素可拖动，在可放置图片的目标方格会出现白色的虚线边框并且背景色更改为黑色...，提示用户可以在此位置放置被拖动的图片，结束拖动时（松开鼠标时），图片将会放置在目标方格内。...，我们定义元素被拖动的外观样式，给图片定义5px宽的灰色边框。...为了适应小屏幕，将五个方格由水平排列更改为垂直居中排列。...，松开鼠标时触发，我们先将当前位置的样式更改为empty，并在其中添加拖动的图片元素容器。
1、案例：图片跟着鼠标移动最终版 之前图片跟着鼠标移动的案例有些bug，就是IE8不支持。...body { height: 5000px; } 这时候，如果鼠标不动，只滚动滑轮的话，会发现图片会距离鼠标原点越来越远。为什么呢？...clientY 计算的，所以图片就会距离鼠标越来越远。...图片跟着鼠标移动的最终版： <!...第二步：鼠标进入，离开小图，显示和隐藏遮挡层和大图。 第三步：遮挡层随着鼠标的移动而移动。 第四步：遮挡层移动的最大范围在小图内。
下面是自己学HTML+DIV+CSS+JS时的学习笔记，给大家分享以下，相互学习。大二时候寒假在家无聊的时候想做点事，总结了一下web前端基础的东西，下面的每个字都是自己手敲的。 ... 插入图片标签 属性： Src：图像的源文件路径 Alt：文字提示（图像不显示时） width、hight：宽度、高度 border：边框... 属性: code (指定浏览器运行的Java类小程序的名称) codebase hight width hspace ... circle 加空心圆 square 加实心方块 decimal 加阿拉伯数字 Lower-roman 小写罗马数字 upper-roman 大写罗马数字 lower-alpha...(1)、用标签实现 属性： charset编码脚本程序的字符集 language 脚本语言 src 包含脚本程序的URL type脚本类型 (2)、js
HTML的一些标签以及表单 图片标签 属性 说明 src 图像的路径 alt 图像不能显示时的替换文字 title 鼠标悬停时显示的内容 border 设置图像边框的宽度 align 对齐方式 相对路径.../baidu.gif"/> 超链接 属性 作用 target 用于指定链接页面的打开方式，-self是默认值，_blank为在新窗口的打开方式 锚点链接 通过给内容中特定位置加id值来标记位置，然后用...password"/>,输入的内容用圆点显示 单选按钮，几个选项添加相同name值后，可以单选（小圆圈） 复选框常用于多选（小正方形
功能需求 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 图片播放的同时，下面小圆圈模块跟随一起变化。...点击小圆圈滚动图片 此时用到 animate动画函数，将js文件引入（注意：因为index.js依赖animate.js所以，animate.js要写到index.js上面） 使用动画函数的前提，该元素必须有定位...当图片滚动到克隆的最后一张图片时，让ul快速的、不做动画的跳到最左侧：left为0 同时 num赋值为0，可以从新开始滚动图片了 克隆第一张图片 克隆 ul第一个 li cloneNode() 加 true...normal; } /*去掉列表前面的小点*/ li { list-style: none; } /*图片没有边框...点击小圆圈，移动图片 当然移动的是 ul // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值 // 当我们点击了某个小li 就拿到当前小
，就是把多个小背景图片整合到一张大图片中 2.该大图当背景后是以左上角对齐的，所以要让其他小背景图片插入进去就要移动大背景图 3.移动大背景图片的位置，此时可以使用 background-position...5.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置，根据位置然后移动相应距离。...更改用户的鼠标样式 表单轮廓 防止表单域拖拽 1.鼠标样式 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状，以下是pointer可以所属的很多值： li { cursor: pointer...：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐（给图片加边框就可以看见） 主要解决办法有两种： 给图片添加 vertical-align : middle | top |bottom...webkit-line-clamp: 2; /* 设置或检索伸缩盒对象的子元素的排列方式 */ -webkit-box-orient : vertical; 8.常见布局技巧 margin负值的运用 两个盒子加边框
1.1 display 显示（重点） 实际开发场景： 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 1.2 visibility 可见性 (了解) 1.3 overflow...1.4 显示与隐藏总结 属性 区别 用途 display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 visibility 隐藏对象，保留位置...5.3 精灵技术使用的核心总结 首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。 精确测量，每个小背景图片的大小和 位置。...给盒子指定小背景图片时， 背景定位基本都是 负值。 5.4 制作精灵图(了解) CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。...我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。 我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙 在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
边框加盒子阴影，通过一个小案例实现，具体代码已备注，扩展可自查资料 未把鼠标移入之前效果： ? 把鼠标移入后效果如下： ? 具体代码实现如下： <!...边框的样式 边框的颜色 ;统一的综合设置*/ /*下边框的综合设置*/ border-bottom: 2px solid salmon; /*边框的宽度...消耗的带宽小，能够更快的显示页面。...上阿里巴巴矢量图标库http://www.iconfont.cn/下载字体图标，选择添加到库，在库里统一下载到本地，别直接下载图片。 ?.../iconfont.js"> 第二步：加入通用css代码（引入一次就行）： .icon { width: 1em; height:
/imgs/qrcode.bmp"); /*通过相对路径添加图片*/ border: 1px solid #bbbbbb; /*设置图片边框*/ display: none; /*设置图片不显示...现在我们要完成鼠标移上去后再显示图片，其实这里可以用js实现，但现在还没讲，所以我们用css的方式，为了达到效果，我们把上面代码里的div标签放到a标签里： lesson3.html <!.../imgs/qrcode.bmp"); /*通过相对路径添加图片*/ border: 1px solid #bbbbbb; /*设置图片边框*/ display: none; /*设置图片不显示...*/ } /*设置鼠标移上去后显示图片*/ a.des:hover div.qrcode{ display: block; } 鼠标不移上去： ?.../imgs/qrcode.bmp"); /*通过相对路径添加图片*/ border: 1px solid #bbbbbb; /*设置图片边框*/ display: none; /*设置图片不显示
/imgs/qrcode.bmp"); /*通过相对路径添加图片*/ border: 1px solid #bbbbbb; /*设置图片边框*/ display: none; /*设置图片不显示...*/ } 到目前为止显示： 看一下代码，其实图片已经存在，知识不显示： 现在我们要完成鼠标移上去后再显示图片，其实这里可以用js实现，但现在还没讲，所以我们用css的方式，为了达到效果，我们把上面代码里的.../imgs/qrcode.bmp"); /*通过相对路径添加图片*/ border: 1px solid #bbbbbb; /*设置图片边框*/ display: none; /*设置图片不显示...*/ } /*设置鼠标移上去后显示图片*/ a.des:hover div.qrcode{ display: block; } 鼠标不移上去： 鼠标移上去以后： 我们接着写一些样式，类似：.../imgs/qrcode.bmp"); /*通过相对路径添加图片*/ border: 1px solid #bbbbbb; /*设置图片边框*/ display: none; /*设置图片不显示
1.1 display 显示（重点） 实际开发场景： 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 1.2 visibility 可见性 (了解) 1.3 overflow...1.4 显示与隐藏总结 属性 区别 用途 display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 visibility 隐藏对象，保留位置...更改鼠标样式cursor 样式很多，重点记住 pointer 轮廓线 表单默认outline outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用 防止拖拽 主要针对文本域resize...5.3 精灵技术使用的核心总结 首先我们知道，css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。 精确测量，每个小背景图片的大小和 位置。...给盒子指定小背景图片时， 背景定位基本都是 负值。 6.
hspace vspace name type tabindex dir lang align class id style title (2)、标签用来插入applet小程序...属性: code (指定浏览器运行的Java类小程序的名称) codebase hight width hspace vspace name type class alt id title ... circle 加空心圆 square 加实心方块 decimal 加阿拉伯数字 Lower-roman 小写罗马数字 upper-roman 大写罗马数字 lower-alpha...在页面中加入Javascript脚本 (1)、用标签实现 属性： charset编码脚本程序的字符集 language 脚本语言 src 包含脚本程序的URL type脚本类型 (2)、js...内在事件：onBlur光标离开文本框时 onChange 当文本框的内容给被改变是时 onClick单击时 onLoad载 入时 onMouseOver鼠标经过时 onMouseOut鼠标移开时 onReset
当我们用ArcGIS JS API 4版本实例化完一张二维地图的时候，鼠标移入地图区域内进行点击时，在地图周围会出现一个5像素的黑色边框，虽然不影响其他功能，但是看起来不太美观，所以本文介绍下如何去除ArcGIS...JS API 4.16实例化后的地图拖动时默认自带的5px的外边框，这种方法对4版本的API都是通用的。...问题描述 使用ArcGIS JS API 4.16实例化完地图后，当我们的鼠标拖动地图时发现地图的四周会默认自带一圈的外边框，这在我们的系统中看起来是很不协调的，大致样子如下所示： 就像上图中的四周，...有一圈黑色的外边框，但是当我们鼠标移除的时候它会自动消失，所以这就很不舒服，今天就给大家介绍下该如何去除这个烦人的外边框。...解决方法 1、通过在浏览器的控制台扑捉元素后发现，当我们的鼠标点击拖动地图时，我们存放地图的dom元素节点上会增加一个after的伪类，这个默认自带的外边框就是在这个伪类中定义的，所以找到问题后就好解决了
我们在建站的时候使用图片素材能为整个网站增色不少，但是太多的边框按钮图片会增加请求次数，从而降低网站加载速度，这时我们可以考虑将多个小图片元素集合到一张图片中，然后通过图片定位的方式来调用，这样所有的小图片总共只请求一次...我们先确定所要的小图片元素的位置和面积，可以用photoshop来查找，也可以通过下面这个小工具来实现： http://www.w3school.com.cn/tiy/t.asp?...f=html_ismap 修改图片地址，在位置把图片url粘贴进去，提交代码。请把鼠标移动到图像上，看一下状态栏的坐标如何变化。**/html_ismap.html?...86,130，86是横坐标x的值，130是竖坐标y，移动鼠标，这两个参数都在变。 ...，left 145px和top 260px这个是小图片所在的位置 另外一种方法：通过地图标签给图片加链接
下面我用js(jq)来展示一下，并且加入一丢丢的动态边框效果。 效果 ?...环境及语言 html css js / jq 思路 放大镜 缩略图及细节图布局 鼠标划入事件：鼠标放在缩略图，出现小的蒙层和细节图；当鼠标移动，细节图随之变化 鼠标及蒙层边界判断处理 鼠标移除事件：隐藏蒙蒙层及细节图...动态边框 鼠标悬浮，边框出现 鼠标移除，边框消失 那么问题来了，细节图怎么随鼠标变化？...边框以何种形式展现？ 实现 由浅入深，我先来实现动态边框 1. 动态边框 效果 ? 思路 看到该效果，一般思路有二： 设置border 周边4个div 但是以上两个思路均有问题。...如果设置border，如何使其边框动画？如果周边设置4个div，那么不仅是需要js操控，并且无形之中增加了许多复杂度，与编程思想背道而驰。 那么我们还有别的办法来处理使边框动起来吗？
padding-top:10px; /*上边框留空白*/ padding-right:10px; /*右边框留空白*/ padding-bottom:10px; /*下边框留空白*/ padding-left.../ 五、CSS连接属性 a /*所有超链接*/ a:link /*超链接文字格式*/ a:visited /*浏览过的链接文字格式*/ a:active /*按下链接的格式*/ a:hover /*鼠标转到链接...*/ 鼠标光标样式： 链接手指 CURSOR: hand 十字体 cursor:crosshair 箭头朝下 cursor:s-resize 十字箭头 cursor:move 箭头朝右 cursor:move...注意：这个滤镜必须配合JS建立图片序列，才能做出图片间效果。 3.Blru：建立模糊效果 Blur(Add=?, Direction=?, Strength=?)...Xray：显现图片的轮廓，X光片效果 注意：在使用CSS滤镜时，必须使用在有区域的元素，比如表格，图片等。
---- head 头部 body 身体 h 这是标题，比如一级标题h1，h1~h6 p 段落 div 区块（最常用的标签之一，里面可以放任何内容） span 存放的是特殊效果的文字和小图片 img 图片...input 输入框（text是文本框，password是密码框，radio是单选框，checkbox是复选框，file是上传文件，textarea是文本域（也就是前面禁止拖拽功能实现的地方，也许是本身的一个小bug...tr行 td单元格 th表头） 普通语义： b加粗 i倾斜 u下划线 s删除线 强调语义： strong 加粗 em倾斜 ins下划线 del删除线 下面这些都有上下左右四个属性： border 边框...属性） var 声明变量使用 alert 弹框 number 数值型 string 字符串 boolean布尔型 null 无 object 对象 undefined 没有定义 onclick 单击（js...鼠标离开 mouseenter 鼠标滑过 mouseleave 鼠标离开 上面的四个鼠标设置操作，不需要去刻意的记忆，工作中常用的是hover return false 可以拒绝提交 event.defaultPrevent
三、swiper禁止手动滑动 最简单的方式，在swiper上面加一个透明的蒙层~ 四、使用switchTab跳转后页面不刷新的问题 方法一：通过getCurrentPages获取获取当前的页面栈，调用对应的方法...六、图片设置为圆角，会快速从方形闪烁一下 解决方法：给父元素设置圆角，或者给图片添加透明边框 七、input中使用手写输入法的坑 之前总有“报名工具”的小程序用户反馈，说是报名内容都输入完整了，但是保存不完整...经排查，发现所有使用手写输入法的用户，都会遇到这现象。排查代码发现绑定的input事件，用户如果不点击手写输入法上的确认键，就不会触发bindinput。...八、IOS下用户授权后，头像和昵称显示问题 这个问题其实是图片src是一个data中的变量，然后这个变量又发生了变化。但是在IOS设备上，就是没办法显示更改后的图片。...有退出button的页面，对应的JS添加方法： ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
