absolute

js实现特别简单的钟表效果

本文实例为大家分享了js实现钟表效果的具体代码,供大家参考,具体内容如下 * .clock { position: relative; width: 200px; height: 200px; border: solid 14px rgb(247, »

纯js+css实现在线时钟

纯js+css实现在线时钟

本文实例为大家分享了js+css实现在线时钟的具体代码,供大家参考,具体内容如下 时钟 * .wrap{ position: absolute; width: 200px; height: 200px; border: 2px solid; background-color: pink; border »

HTML的relative与absolute使用及区别详解

HTML的relative与absolute区别:说实话html这门语言算的上是这个世界上最简单的一门语言了,标签语言嘛,就是标签多了点英文单词超多,不过都是有规律的比如文本类居中text-align:center;加粗text-weight:bold;.但是还是有一些比较难理解掌握标签和属性,就比如属性position,它是定位的一种方式代码如下: #div1{ position: relati... »

详解flex布局与position:absolute/fixed的冲突问题

之前笔者在开发项目的过程中就遇到了这个坑,flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法,今天就与大家一起交流一下: 项目实战: 我们现在想做一个头部的导航栏,又想用fixed把它固定在上方,又想用弹性盒布局去设置它内部的样式,可是发现其中的弹性盒布局已经失效了。 HTML代码如下: <ul> <li>协会简介</li>... »

js实现简单放大镜效果

用js实现简单放大镜效果,供大家参考,具体内容如下此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩,图片的一个区域就会被放大,然后展示在右边。这里的放大并不是真正的放大,而是等比例移动。 »

CSS之定位布局(position,定位布局技巧)

absolute脱离文档流,通过 top,bottom,left,right 定位。 »

css定位position引发的层级关系问题详解

relative:相对定位,相对自己原来的位置进行定位 fixed:绝对定位,相对浏览器窗口进行定位由position引起的层级关系问题首先我们要知道,css属性其实是一个立体空间有x,y,z轴,但是只有我们使用了position定位时,z轴上的层级关系才体现出来,即z-index这个属性仅定位元素才有。 »

js轮播图

作为一个前端,如果不会写一个小插件,都不好意思说自己是混前端界的。写还不能依赖jquery之类的工具库,否则装得不够高端。那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦。以前一直说,掌握了js原生,就基本上可以解决前端的所有脚本交互工作了,这话大体上是有些浮夸了。不过,也从侧面说明了原生js在前端中占着多么重要的一面。好了。废话不多说。咱们就来看一下怎么去做一个自己的js... »

js轮播图

作为一个前端,如果不会写一个小插件,都不好意思说自己是混前端界的。写还不能依赖jquery之类的工具库,否则装得不够高端。那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦。以前一直说,掌握了js原生,就基本上可以解决前端的所有脚本交互工作了,这话大体上是有些浮夸了。不过,也从侧面说明了原生js在前端中占着多么重要的一面。好了。废话不多说。咱们就来看一下怎么去做一个自己的js... »

在这里插入图片描述

用js实现简单放大镜效果

用js实现简单放大镜效果此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩,图片的一个区域就会被放大,然后展示在右边。这里的放大并不是真正的放大,而是等比例移动。 »

flex居中

学会这三种方法css居中,已经够你用啦

我们在使用css来布局时经常需要进行居中,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,利用css来实现对象的垂直居中有许多不同的方法,比较难的是应该选择哪种正确的方法。比如我们都知道 margin:0 auto;的样式能让元素水平居中,而margin: auto;却不能做到垂直居中……下面就css居中的一些常用方法做个集中的介绍。新建一个前端学习qun438905713,在群里... »

CSS中关于绝对定位和相对定位

body {margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e {    width: 100px;    height: 100px;    margin: 5 auto;    color: #fff;    background: #000; } .aa, .bb, .cc, .dd, .ee {    top: 10px;    left: 1... »

CSS 定位详解

CSS 定位详解

CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position。 display属性指定网页的布局。两个重要的布局,我已经介绍过了:弹性布局flex和网格布局grid。 本文介绍非常有用的position属性。我希望通过10分钟的阅读,帮助大家轻松掌握网页定位,说清楚浏览器如何计算网页元素的位置,尤其是新引进的sticky定位。 本文由国内最大的在线教育平台之一”... »

javascript实现的一个图片转移效果

javascript实现的一个图片转移效果

应网友要求修改一个图片转移效果 一个比较漂亮的效果,只是在增加图片效果时有些麻烦。今天应网友的要求,对 JS 进行了更改。使大家在对图片添加删除更加容易。在这里主要对以下几点详细说明一下。 var firstnum = 1; var secnum = 2;  var tounum=1;&n... »

Position属性之relative用法

Relative是position的一个属性,是相对定位。 position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:static) 如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该给#demo相对定位,#sub绝对定位。 absolute是相对于自己最近的父元素来定位的,如果你不给... »

通过设置CSS中的position属性来固定层的位置

定义和用法 position 属性规定元素的定位类型。 说明 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 默认值: static 继承性: no 版本: CSS2 JavaScript 语法: object.style.position=”absolute&... »

jQuery实现仿新浪微博浮动的消息提示框(可智能定位)

本文实例讲述了jQuery实现仿新浪微博浮动的消息提示框。分享给大家供大家参考。具体如下: 这是一款jQuery实现的仿新浪微博新消息提示框效果,支持智能浮动定位框,新浪微博用来提示消息时候的智能定位框,可以适时关闭窗口,你完全可以将其应用到你网页的其它地方。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-sina-weibo-info... »

jquery+CSS3实现淘宝移动网页菜单效果

本文实例讲述了jquery+CSS3实现淘宝移动网页菜单效果。分享给大家供大家参考。具体如下: 这是一款基于jquery+CSS3实现的淘宝移动网页菜单,其实这个菜单动画并不复杂,只有缩放和位移。难点是用了扇形结构,而且还要实现扇形的链接区域,这个就费脑筋了,最后采用了传统的图片map来做热区,效果还不错。相信肯定有更好的解决方法。 先来看看运行效果截图: 在线演示地址如下: http://dem... »

运用js教你轻松制作html音乐播放器

用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦效果图:源码:html 音乐播放器 * .page { position: absolute; wid »

jQuery实现边框动态效果的实例代码

话不多说、静态效果图如下实代码如下 .myDiv .topLine .bottomLine .leftLine .rightLine 总结以上就是这篇文章的全部内容了,刚兴趣的朋友们可以自己动手操作下看看动态效果,真的非常不错,希望对大家的学习或者工作能有一定的帮助。如果有疑问大家可以留言交流,小编会尽快给大家回复。 »

jQuery制作圣诞主题页面 更像是爱情影集

今天制作的是有飘雪效果的圣诞主题页面,个人灰常喜欢。 首先还是放张效果图:  当看到这这页面的时候我们要注意四点: 1.图片的轮播 2.文字的滚动效果 3.音乐播放 4.飘雪效果  那我们就一点一点来完成吧,Go,Go!  对于上次分享的有人说我讲的不够细致,那在这篇文章我就细致一点。  (1)准备工作 首先新建css,img,js,file这四个文件夹并新... »

jQuery实现的跨容器无缝拖动效果代码

本文实例讲述了jQuery实现的跨容器无缝拖动效果。分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">... »

三种带箭头提示框总结实例

无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是css来实现,本文介绍三种通过css实现带箭头的提示框。 1.通过border属性 思路:两个三角形,通过定位使两个三角形相差1px作为边框。 2.CSS3 transfrom 思路:先做一个两条边相同颜色的正方形,然后旋转一定角度就是三角形了 3.特殊字符’♦’ 思路:特殊... »

javascript HTML5 Canvas实现圆盘抽奖功能

我们经常参加各种电商优惠活动,比如购买达到一定数额进行抽奖活动,在比如微信抽奖,淘宝抽奖,迅雷赚钱宝圆盘抽奖活动等。这些抽奖活动部分就是由HTML5的Canvas来制作的,今天就为大家分享一下如何使用HTML5的Canvas来制作圆盘抽奖功能。老规矩,先看下效果图吧: 再来看看Canvas的几个主要api:   全部源代码如下: <!DOCTYPE html> <htm... »

javascript拖拽效果延伸学习

本文总结一下,拖拽所延伸出来的一些效果,供大家参考,具体内容如下 1.实现拖拉图片时,带框的效果。即当鼠标拖动某一个图片或物体时,其原有位置扔保留其型。 这种效果,其实很简单,主要是另外创建一个物体,使其与被拖拽的物体,宽和高一样,然后,将其变为拖拽的对象。 直接上代码: <html <head> <style> #div1 {width:100px; height:... »

Page 1 of 7123»