div | 易学教程

小的div在大的div中垂直居中

阅读更多关于小的div在大的div中垂直居中

方法一： 1、代码： 1 <div style="width:200px;height:200px;border:solid blue;position:relative;"> 2 <div style="width:100px;height:100px;margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: red;"></div> 3 </div> 2、效果图：方法二： 1、代码： 1 <div style="width:200px;height:200px;border:2px solid #000;display:table-cell;vertical-align:middle;text-align: center;"> 2 <div style="width:100px;height:100px;display:inline-block;"></div> 3 </div> 2、效果图：方法三： 1、代码： 1 <div style="width:200px;height:200px; border:2px solid #000;display:flex;justify-content:center;align-items:center;"> 2 <div

Codeforces Round #619 (Div. 2)【A、B、C、D】题解（持续更新）

阅读更多关于 Codeforces Round #619 (Div. 2)【A、B、C、D】题解（持续更新）

涵盖知识点：构造、数学etc. 比赛链接： https://codeforces.com/contest/1301 A： Three Strings 题意：给三个串，每一位必须交换a和c或者b和c。问是否可能交换完成后a=b。题解：判断每一位是否又a[i]=c[i]或者b[i]=c[i]。 AC代码： 1 #include <bits/stdc++.h> 2 using namespace std; 3 4 int main(){ 5 int t; 6 cin>>t; 7 while(t--){ 8 string a,b,c; 9 cin>>a>>b>>c; 10 bool flag=true; 11 for(int i=0;i<a.length();i++){ 12 if(a[i]==c[i]||b[i]==c[i]){ 13 continue; 14 } 15 flag=false; 16 break; 17 } 18 if(flag)cout<<"YES\n"; 19 else cout<<"NO\n"; 20 } 21 return 0; 22 } B： Motarack's Birthday 题意：给一串数字，用k填充所有的-1，使所有相邻两数的差绝对值最小。题解：记录所有-1两边的非-1数字，最后将所有数字排序后取最小值和最大值的平均值

点击页面其它地方隐藏该div的两种思路

阅读更多关于点击页面其它地方隐藏该div的两种思路

思路一第一种思路分两步第一步：对document的click事件绑定事件处理程序，使其隐藏该div 第二步：对div的click事件绑定事件处理程序，阻止事件冒泡，防止其冒泡到document，而调用document的onclick方法隐藏了该div。复制代码代码如下: <script type="text/javascript"> function stopPropagation(e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; } $(document).bind('click',function(){ $('#test').css('display','none'); }); $('#test').bind('click',function(e){ stopPropagation(e); }); </script> 这样当点击页面非div区域的时候，直接或层层冒泡会调用document的onclick方法，隐藏该div，而点击div或其子元素的时候，事件总会冒泡的div本身，这时候会阻止事件继续冒泡，不会调用doument的onclick方法致使div被隐藏，从而完成了我们的需求。思路二我们之前提到，在触发DOM上的某个事件的时候会产生一个事件对象event

点击页面其它地方隐藏该div的方法

阅读更多关于点击页面其它地方隐藏该div的方法

思路一第一种思路分两步第一步：对document的click事件绑定事件处理程序，使其隐藏该div 第二步：对div的click事件绑定事件处理程序，阻止事件冒泡，防止其冒泡到document，而调用document的onclick方法隐藏了该div。 <script type="text/javascript"> function stopPropagation(e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; } $(document).bind('click',function(){ $('#test').css('display','none'); }); $('#test').bind('click',function(e){ stopPropagation(e); }); </script> 这样当点击页面非div区域的时候，直接或层层冒泡会调用document的onclick方法，隐藏该div，而点击div或其子元素的时候，事件总会冒泡的div本身，这时候会阻止事件继续冒泡，不会调用doument的onclick方法致使div被隐藏，从而完成了我们的需求。思路二我们之前提到，在触发DOM上的某个事件的时候会产生一个事件对象event

点击页面其它地方隐藏该div的两种思路

阅读更多关于点击页面其它地方隐藏该div的两种思路

第一种思路分两步第一步：对document的click事件绑定事件处理程序，使其隐藏该div 第二步：对div的click事件绑定事件处理程序，阻止事件冒泡，防止其冒泡到document，而调用document的onclick方法隐藏了该div。 $(document).bind('click',function(){ $('#test').css('display','none'); }); $('#test').bind('click',function(e){ stopPropagation(e); }); //阻止冒泡到document的click事件这样当点击页面非div区域的时候，直接或层层冒泡会调用document的onclick方法，隐藏该div，而点击div或其子元素的时候，事件总会冒泡的div本身，这时候会阻止事件继续冒泡，不会调用doument的onclick方法致使div被隐藏，从而完成了我们的需求。思路二我们之前提到，在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息，思路一中div的click事件处理程序传入的参数就是这个event对象。访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时

点击div之外的地方就隐藏该div

阅读更多关于点击div之外的地方就隐藏该div

效果：点击弹窗外任意一点，取消显示弹窗；这也是一个常用的效果源码demo： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <style type="text/css"> #div1{ width: 200px; height: 200px; border:1px solid black; border-radius: 5px; display: none; } </style> </head> <body> <button onclick="showdiv()">点击显示弹窗</button> <div id="div1">点击弹窗大小外任意一点隐藏弹窗</div> <script type="text/javascript"> function showdiv(){ $("#div1").show(); $(document).one("click", function() { //对document绑定一个影藏Div方法 $("#div1").hide(); }); event.stopPropagation();//阻止事件向上冒泡 } $("

Jquery的鼠标移动上去显示div，鼠标离开的时候隐藏div效果

阅读更多关于 Jquery的鼠标移动上去显示div，鼠标离开的时候隐藏div效果

有时候我们需要这个效果：当鼠标放上去的时候显示一个div，当鼠标移走的时候就将div隐藏了。代码如下，记得引入Jquyer库。（当鼠标移动到id=menu的div上的时候，显示id=list的div，然后将鼠标再次移动到id=list的div上的时候，list的div也不会隐藏） <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> <!-- $(function () { $("#list").hide(); $("#menu").hover(function

DIV 标签很重要的CSS的float属性

阅读更多关于 DIV 标签很重要的CSS的float属性

(通过指定CSS属性 float 的值,使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。) CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式，HTML标签设置了float属性之后，它将不再独自占据一行 (从当前位置开始到这行结束,不包括标签前面的格子,即这一行包括前面标签+这个标签)。没有设置将独占一行. 浮动(float)细节： 1.左(右)浮动元素，尽量靠近父元素左(右)内边沿。 2.浮动元素尽量不去重叠交叉。 3.浮动元素尽可能高，当不会高于父元素顶内边沿。 <style type="text/css">  </style> </head> <body> <div class="t"

Codeforces Round #617 (Div. 3)

阅读更多关于 Codeforces Round #617 (Div. 3)

前言宅在家还是比较无聊的，所以想学着用用python，然后一搜适合python的online judge，发现codeforces居然正好支持，因为python复杂的功能数据结构还不会，所以先试试div3的题 A http://codeforces.com/contest/1296/problem/A 题目大意：给你N个数字，并且允许你用其中出现的数字任意覆盖别的数字，问你能否使得所有数字的和为奇数只要有一个奇数并且有一个偶数，那么就拿偶数覆盖其他所有的数，然后配上这个奇数就可以了而全部是偶数显然不行，全部是奇数就看n是奇是偶了 a = input ( ) Case = int ( a ) print ( 'Case = {:d}' . format ( Case ) ) for T in range ( Case ) : a = input ( ) n = int ( a ) a = input ( ) b = a . split ( ' ' ) count1 = 0 count2 = 0 for i in range ( n ) : if int ( b [ i ] ) % 2 == 0 : count2 += 1 else : count1 += 1 if count1 == 0 : print ( 'NO' ) elif count2 == 0 : if n % 2

js div的显示和隐藏

阅读更多关于 js div的显示和隐藏

<head> <title></title> <style type="text/css"> div { display:block; } </style> <script type="text/javascript"> onload = function () { //隐藏 document.getElementById('btnHidde').onclick = function () { document.getElementById('dv').style.display = 'none'; }; //显示 document.getElementById('btnShow').onclick = function () { document.getElementById('dv').style.display = 'block'; }; //切换 document.getElementById('btn').onclick = function () { var dvObj = document.getElementById('dv'); alert(dvObj.style.display); if (dvObj.style.display == 'none') { dvObj.style.display = 'block'; } else { dvObj.style

订阅 div