div | 易学教程

hmtl div水平、垂直居中

阅读更多关于 hmtl div水平、垂直居中

最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。水平居中直接加上<center>标签即可，或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中（水平居中+垂直居中）的方法放上示范的html代码： <body> <div class="main"> <h1>MAIN</h1> </div> </body> 方法一： div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。 .main{ text-align: center; /*让div内部文字居中*/ background-color: #fff; border-radius: 20px; width: 300px; height: 350px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } --------------------- 作者：qq_32623363 来源：CSDN 原文：https://blog.csdn.net/qq_32623363/article/details/77101971 版权声明：本文为博主原创文章，转载请附上博文链接！

html DIV透明黑色浮层提示加载中

阅读更多关于 html DIV透明黑色浮层提示加载中

<!doctype html> <html> <head> <title>遮罩层</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style> #cover{ display:none; position:fixed; z-index:1; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.44); } #coverShow{ display:none; position:fixed; z-index:2; top:50%; left:50%; width:300px; height:100px; margin-left:-150px; margin-top:-150px; } </style> <script> function clickfunc() { alert("clicked, 遮住之前’测试‘按钮是起作用的"); } function coverit() { var cover = document.getElementById("cover"); var

用css实现正方形div

阅读更多关于用css实现正方形div

目标：实现一个正方形，这个正方形边长等于方法一：使用单位vw，（ps我觉得这个是最简单的方法） html结构也很简单，只有一个div即可 <html> <body> <div class="square"> </div> </body> </html> .square{ width: 50vw; height: 50vw; background: blue; } 方法二：使用padding-bottom 要点： height: 0，内容会溢出到padding里，不用担心~~ padding-bottom 值设置为百分比时候，相对于包含块的宽度。需要设置包含块 html结构： <html> <body> <div class="container"> <div class="square"> </div> </div> </body> </html> css: *{ margin: 0; } /* 设置撑满页面可见区域 */ .container{ height: 100vh; width: 100vw; background: palegoldenrod; } .square{ width: 50%; /* 相对与container的width */ padding-bottom: 50%; /* 相对与container的width */ background:

Div垂直水平居中（CSS篇）

阅读更多关于 Div垂直水平居中（CSS篇）

方式一： .pdiv{ width: 500px; height: 400px; margin: 100px auto; border: 1px solid green; position: relative; } .div{ width: 300px; height: 100px; line-height: 100px; text-align: center; border: 1px solid red; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -150px; } 方式二： .pdiv{ width: 500px; height: 400px; margin: 100px auto; border: 1px solid green; text-align: center; position: relative; } .div{ margin: auto; width: 300px; height: 100px; line-height: 100px; text-align: center; border: 1px solid red; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } 方式三： .pdiv{

小div在大div中垂直居中方式

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

　　代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div居中</title> <style> * { margin:0; padding:0; } .content { width:400px; height:400px; background:orange; border: 1px solid green; position:relative; margin: 100px auto; } .nav { width:80px; height:80px; line-height:80px; text-align:center; background:green; margin: auto; position:absolute; left: 0; top: 0; bottom:0; right: 0; } </style> </head> <body> <div class="content"> <div class="nav">这是内容</div> </div> </body> </html> 　　效果：来源： https://www.cnblogs.com/songtianfa/p/11752422.html

解决 chrome 浏览器对 div 的 display : none 不支持

阅读更多关于解决 chrome 浏览器对 div 的 display : none 不支持

试了很久，发现在style设置display：none的时候，IE是可以的，但是chrome不行 <div style="display:none"> 测试测试 </div> 在chrome下，“测试测试”这几个字还是占位置的，即时display：none不起效，最后将代码改成下面这样才可以。 <div style="display:none"> <span style="display:none"> 测试测试 </span> </div> 个人认为，chrome浏览器下，只要div还有内容，display：none就不起效，所以要将div下的标签也置为display：none，这样div就没有东西了，display：none才有效，纯属个人观点，不是官方的，有错的话请高人指教一下。来源： CSDN 作者： keyler 链接： https://blog.csdn.net/keyler/article/details/17285723

css3实现div自动左右动

阅读更多关于 css3实现div自动左右动

1 <!DOCTYPE html> 2 <meta charset="UTF-8"/> 3 <html> 4 5 <head> 6 <style> 7 div { 8 width: 100px; 9 height: 100px; 10 background: red; 11 position: relative; 12 animation: myfirst 5s infinite alternate; 13 } 14 15 @keyframes myfirst { 16 0% { 17 background: red; 18 left: 0px; 19 top: 0px; 20 } 21 22 100% { 23 background: blue; 24 left: 200px; 25 top: 0px; 26 } 27 28 } 29 //鼠标划过停止动画效果 30 div:hover{ 31 -webkit-animation-play-state:paused; 32 animation-play-state:paused; 33 } 34 </style> 35 </head> 36 <body> 37 <div></div> 38 </body> 39 40 </html> 来源： https://www.cnblogs.com/520yh/p/11751576.html

jquery+js实现修改div元素的背景色

阅读更多关于 jquery+js实现修改div元素的背景色

效果展示这是效果样式代码参考这是CSS代码 <style type="text/css"> .blue { width : 200px ; height : 200px ; background-color : blue ; } </style> 这是HTML代码 < div class = " blue " > </ div > 这是js代码 $ ( function ( ) { $ ( ".blue" ) . on ( "click" , function ( ) { $ ( "div" ) . hover ( ) . css ( "background-color" , "red" ) ; } ) ; } ) ; 这只是一个不太完善的代码哦。来源： https://blog.csdn.net/cyrrgt/article/details/102772400

Codeforces Round #596 (Div. 2)B2. TV Subscriptions(Hard Version)

阅读更多关于 Codeforces Round #596 (Div. 2)B2. TV Subscriptions(Hard Version)

Codeforces Round #596 (Div. 2)B2. TV Subscriptions(Hard Version) 题目： http://codeforces.com/contest/1247/problem/B2 题意：给出一个序列，可以选择K个数字，标记选择的数字，求能够在原序列中有连续d个数字被标记的最小的K 做法：记录下长度为d的区间中，存在多少个不同的数字。发现区间长度是一定的，就可以不断递推过去 AC代码： # include <bits/stdc++.h> # define ll long long # define pb push_back # include <set> # define rep(x,a,b) for(int x=a;x<=b;x++) using namespace std ; const int maxn = 2e6 + 7 ; int a [ maxn ] ; int num [ maxn ] ; int main ( ) { int t , n , k , d ; scanf ( "%d" , & t ) ; while ( t -- ) { int ans = 0 , maxx = 0 ; scanf ( "%d%d%d" , & n , & k , & d ) ; rep ( i , 1 , n ) { scanf

div超出宽度自动换行

阅读更多关于 div超出宽度自动换行

div内容超出宽度自动换行，设置宽度之后，再设置word-break、word-wrap这两个属性即可。如果div里面的内容自动换行后，两行距离过远，可以设置line-height属性，控制行高。 div{ width: 500px; /** word-break: normal(使用浏览器默认的换行规则)|break-all(允许在西文单词中换行)|keep-all(只能在半角空格或连字符处换行);通过该属性规定自动换行的处理方法，即遵循何种方式换行。 */ word-break: break-all; /** word-wrap: normal(只在允许默认的断字点处换行，浏览器默认)|break-word(在长单词或URL内部换行);通过该属性允许长单词或URL换行到下一行。 */ word-wrap: break-word; /** 行高一般设置20-24px即可 */ line-height:24px; } 来源： https://blog.csdn.net/weixin_44306005/article/details/102516466

订阅 div