div | 易学教程

DIV的失去焦点(blur)实现

阅读更多关于 DIV的失去焦点(blur)实现

用防抖实现DIV鼠标移出消失由于div标签本身不支持 onblur 事件，所以对于点击一个按钮弹出的 div ，我们想要当这个 div 失去焦点的时候，让它消失不能使用的 onblur 来实现。但是可以利用 onmouseout 和事件来实现DIV失去焦点消失的功能。直接使用 onmouseout 来实现移出消失可能会有一个问题：假设你的按钮的位置和弹出的div的位置不是重合的那么会导致鼠标移动就会马上去触发 onmouseout 事件 ,从而没什么卵用。利用防抖、 onmouseout 、 onmouseover 组合来实现一个体验很好的blur事件 /** *鼠标移动过div事件 */ function moveOverEvent(ele,outTimer) { let overTimer = null; return function(){ clearTimeout(outTimer); //div没有消失的情况下，在移动进来div，那么就清除上次移出的事件 clearTimeout(overTimer); //防抖 overTimer = setTimeout(()=>{ ele.style.display = "block"; },500); } } /** * 鼠标移出 */ function moveOutEvent(ele,outTimer) {

手机网页，div内滚动条，以及div内部滚动条拉到底部之后触发事件

阅读更多关于手机网页，div内滚动条，以及div内部滚动条拉到底部之后触发事件

var gao = document.documentElement.clientHeight; var headHeight = parseInt($('.yhead').css('height')) $('.ybody').css('height', gao - headHeight + 'px') //前端分页 $(".yright").scroll(function(){ var scrollHeight = document.querySelector(".yright").scrollHeight; // 没用滚动条的情况下，元素内容的总高度 var scrollTop = document.querySelector(".yright").scrollTop; console.log(gao,scrollHeight,scrollTop) if((scrollTop + gao - scrollHeight) == headHeight){ $('.fenye').click() } console.log("没到底： ", ); }) 　　　　div布局就不用讲了，主要是滚动条事件这一块是真晕，上网查资料查到的情况，用了一下真的可以，真是太高兴了以后有时间了在好好研究研究，暂时就先这样，另附几个查阅的资料： javascript、jquery获取网页的高度和宽度

如何将一个div水平垂直居中

阅读更多关于如何将一个div水平垂直居中

div绝对定位水平垂直居中：margin:auto div{ 　　position:absolute; 　　left:0; 　　top: 0; 　　bottom: 0; 　　right: 0; 　　margin: auto; } div绝对定位水平垂直居中：margin 负间距 div{ 　　width:100px; 　　height: 100px; 　　position: absolute; 　　left:50%; 　　top:50%; 　　margin-left:-50px; 　　margin-top:-50px; } div绝对定位水平垂直居中：Transforms 变形 div{ 　　width: 100px; 　　height: 100px; 　　position:absolute; 　　left:50%; 　　top:50%; 　　transform: translate(-50%,-50%); } 弹性盒模型-css 不定宽高水平垂直居中 .box{ 　　height:100px; 　　display:flex; 　　justify-content:center; 　　align-items:center; } .box{ 　　 display: -webkit-box; 　　-webkit-box-pack: center; 　　-webkit-box-align

DIV页面分部

阅读更多关于 DIV页面分部

JSP <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面总体布局</title> <link href="CSSDIVde.css" type="text/css" rel="stylesheet"> </head> <body> <div id="left">左边</div> <div id="right"> <div id="righttop"> <table width="45" border="1" align=right > <tr> <td><a href="http://localhost:8080/First/login/login2.jsp">登录</a> </td> </tr> </table> </div> <div id="rightcenter"> <table width="80" border="1" align=right > <tr> <td>第2表第1个</td><td>第2表第2个</td> </table> </div> </div> </body> </html> CSS @charset

多个div排列在同一行而不换行

阅读更多关于多个div排列在同一行而不换行

有时候，我们可能会产生多个div标签横向排列而不换行的需求，具体有以下几种实现方法： 1. 同级div设置display:inline-block，父级div强制不换行例如： <html> <head></head> <body> <div id="container"> <div class="lable">测试测试</div> <div class="lable">测试测试</div> <div class="lable">测试测试</div> <div class="lable">测试测试</div> <div class="lable">测试测试</div> <div> </body> <style> #container { width:400px; height: 200px; background-color: red; overflow: auto; white-space: nowrap; } .lable { width: 100px; background-color: blue; display: inline-block; } </style> </html> 2. 通过position绝对定位实现例如: <html> <head></head> <body> <div id="container"> <div id="lable1">测试测试<

div上下左右居中几种方式

阅读更多关于 div上下左右居中几种方式

1、绝对定位（常用于登录模块）备注：前提条件div需要有宽高 #html <div class="box"></div> #css .box{ position:absolute/fixed; left:0; right:0; top:0; bottom:0; margin:auto; } 2、margin负值备注：前提条件div需要有宽高 #html <div class="box"></div> #css .box{ width:200px; height: 200px; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; } 3、css3 transform 备注：用于不确定当前div的宽度和高度 #html <div class="box"></div> #css .box{ position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); } 4、flex 布局方式 #html <div class="box"> <div class="child">child</div> </div> #css .box{ display:flex; align-items:center;

Codeforces Round #597 (Div. 2) - C. Constanze's Machine

阅读更多关于 Codeforces Round #597 (Div. 2) - C. Constanze's Machine

Constanze is the smartest girl in her village but she has bad eyesight. One day, she was able to invent an incredible machine! When you pronounce letters, the machine will inscribe them onto a piece of paper. For example, if you pronounce 'c', 'o', 'd', and 'e' in that order, then the machine will inscribe " code" onto the paper. Thanks to this machine, she can finally write messages without using her glasses. However, her dumb friend Akko decided to play a prank on her. Akko tinkered with the machine so that if you pronounce 'w', it will inscribe " uu" instead of " w", and if you pronounce 'm

一小时搞定DIV+CSS布局-固定页面开度布局

阅读更多关于一小时搞定DIV+CSS布局-固定页面开度布局

本文讲解使用DIV+CSS布局最基本的内容，读完本文你讲会使用DIV+CSS进行简单的页面布局。转载请标明： http://www.kwstu.com/ArticleView/divcss_2013929173533658 关于DIV+CSS布局中用到的CSS必备知识请看： http://www.kwstu.com/ArticleView/divcss_201442291125960 DIV+CSS布局中主要CSS属性介绍： Float: Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。 Margin: Margin属性用于设置两个元素之间的距离。 Padding: Padding属性用于设置一个元素的边框与其内容的距离。 Clear: 使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。实例讲解：下面使用实例如果做一个简单又基本的布局，效果如下图：代码： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

纯css，div隐藏滚动条，保留鼠标滚动效果。[转载]

阅读更多关于纯css，div隐藏滚动条，保留鼠标滚动效果。[转载]

前记当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。方法这里介绍一个简单的方法。大体思路是在div外面再套一个div。这个div设置overflow:hidden。而内容div设置 overflow-y: scroll;overflow-x: hidden; 然后再设置外层div的width小于内层div的width。这个内层div其实是会出现滚动条的，所以不影响鼠标的滚动效果，而且我们看不到滚动条了。效果内层div效果：套上外层div效果后：代码 css代码： .nav_wrap{ height: 400px; width: 200px; overflow: hidden; border: 1px solid #ccc; margin: 20px auto; } .nav_ul{ height: 100%; width: 220px; overflow-y: auto; overflow-x: hidden; } .nav_li{ border: 1px solid #ccc; margin: -1px; height: 40px; line-height: 40px; text-align: center;

DIV CSS学习之margin缩进法

阅读更多关于 DIV CSS学习之margin缩进法

订阅 div