div

理解Div布局

断了今生、忘了曾经 提交于 2019-12-18 13:31:12
很愚昧的用table布局很久,最近开始学习div+css布局,当初就是由于不理解div的位置控制,所以一直也顾不上深入去学习,加上好久不在开发web应用,所以就放下了,现在开始学习ajax,就必须要学习css+div了,呵呵! 要理解div布局, 首先要理解CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术,在HTML中的所有对 象,默认分为两种:块元素(block element)、内联元素(inline element),虽然也存在着可变元素,但只是随上下文关系确定该 元素是块元素或者内联元素。其实CSS的float属性,作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后,它将不再独自占据一行。可以浮动到左侧或右侧。 float属性 : float : none | left | right none :  对象不浮动 left :  对象浮在左边 right :  对象浮在右边 该属性的值指出了对象是否及如何浮动。 当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level)。也就是说,浮动对象display 特性将被忽略。 到此基本明白了float的含义了,一个简单例子 .leftfloat{ width:200px;

10-2-点击生成10个div

匆匆过客 提交于 2019-12-18 09:11:51
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{font-family: "Microsoft YaHei",serif;} body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin: 0;} ol,ul,li{margin: 0;padding: 0;list-style: none;} img{border: none} #wrap div{ float: left; width: 50px; height: 50px; margin: 5px; background-color: pink; } </style> </head> <body> <button id="btn">点击生成10个div</button> <div id="wrap"></div> <script> let oWrap = document.getElementById('wrap'), oBtn = document.getElementById('btn'); // oBtn.onclick = function () { // for (let i = 0; i<10-vue-router ; i++){ // oWrap

纯CSS实现单一div的正多边形变换

只愿长相守 提交于 2019-12-17 23:01:38
纯粹利用CSS,让“单一个”div,从正三角形变换为正八边形(单一div最多只能做到正八边形),最后再搭配动画的效果,变成正多边形的变换动画,也由于正多边形需要用到不少的三角函数计算,为了方便起见,这里将正多边形的边统一都设为100px。 正三角形 正三角形不需要用到伪元素,只需要设定div本身的边框宽度即可产生,先来看一下正三角形的边长与中线,若边长为100px,则中线四舍五入就是87px(100 x sin(60)= 87)。 因此我们要将div的长宽都设为0,接着把底部border的宽度设为87px,左右的border宽度设为50px(颜色设为透明transparent),就可以做出一个漂亮的三角形。 width:0; height:0; border-width:0 50px 87px ; border-style:solid; border-color:transparent transparent #095; web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法 (从零基础开始到前端项目实战教程,学习工具,职业规划 ) 正方形 正方形应该是最简单的,只要设定长宽设定为同样数值就可以了,不过其实还有另外两种方法,第一种你可以把长宽设为0,把上下左右的border设为50px也可以,第二种则是高度设为0

CSS div和css布局

这一生的挚爱 提交于 2019-12-17 10:31:04
一.div和span   DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式   DIV和span的区别在于,span是内联元素,div是块级元素。div占用整行,span只会占用内容大小的部分。div可以改变size,span不可以改变size 二.盒模型   margin  盒子外边距,增加的话,内盒大小不会变   padding  盒子内边距,增加的话,border向外扩大,内盒大小本身不会变   border  盒子边框宽度   width  盒子宽度   height  盒子高度 三.布局相关的属性   1.position定位方式     relative  正常定位     absolute  根据父元素进行定位     fixed  根据浏览器窗口进行定位     static  没有定位     inherit  继承   2.定位     left,right,top,bottom离页面顶点的距离   3.覆盖顺序优先级     z-index  其值是从0,1,2... 数值越大,优先级越高,那么显示就在最上面   4.display显示属性     display:none  层不显示     display:block  块状显示,在元素后面换行,显示下一个块元素。将内联转换成块状     display:inline 

div行内样式style常用属性

假如想象 提交于 2019-12-17 05:26:29
div 行内样式style常用属性 观看演示 下载源代码 〖 作者:Nimitz 〗〖 发布日期:2014-02-16 〗 一、常用属性: 1、Height:设置DIV的高度。 2、Width:设置DIV的宽度。 例: <div style="width:200px;height:200px;"></div> 3、margin:用于设置DIV的外延边距,也就是到父容器的距离。 例: 点击查看效果: <div style="width:300px;height:300px;"> <div style="margin:5px 10px 20px 30px;width:200px; height:200px;"> </div> </div> 说明:margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离;可以看例子中的白色DIV到黑色DIV的边距离效果。还可以分别设置这四个边的距离,用到的属性如下: 4、margin-left:到父容器左边框的距离。 5、margin-right:到父容器右边框的距离。 6、margin-top: 到父容器上边框的距离。 7、margin-bottom:到父容器下边框的距离。 在标准的浏览器中,box模型首先确定的是content的宽度和高度,而margin和padding不会影响content的宽度和高度—

如何将一个div覆盖在另一个div上

丶灬走出姿态 提交于 2019-12-16 17:47:49
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 我需要一个个人 div 覆盖另一个个人 div 。 我的代码如下所示: <div class="navi"></div> <div id="infoi"> <img src="info_icon2.png" height="20" width="32"/> </div> 不幸的是,我无法将 div#infoi 或 img 嵌套在第一个 div.navi 。 如图所示,它必须是两个单独的 div ,但是我需要知道如何将 div#infoi 放在 div.navi ,最右侧并居中于 div.navi 顶部。 #1楼 通过使用样式为 z-index:1; 的 div z-index:1; 和 position: absolute; 您可以将 div 覆盖在其他任何 div 。 z-index 确定div“堆栈”的顺序。 z-index 较高的div将出现在 z-index 较低的div的前面。 请注意,此属性 仅适用于定位的元素 。 #2楼 这是您需要的: function showFrontLayer() { document.getElementById('bg_mask').style.visibility='visible'; document.getElementById('frontlayer')

Codeforces Round #604 (Div. 2)D(构造)

ぃ、小莉子 提交于 2019-12-16 01:23:01
构造,枚举起点,如果一个序列成立,那么将它reverse依然成立,所以两个方向(从小到大或从大到小)没有区别,选定一个方向进行探测,直到探测不到以后回头,只要所给数据能成立,那么能探测进去就能探测出来,否则就不能构造。 1 #define HAVE_STRUCT_TIMESPEC 2 #include<bits/stdc++.h> 3 using namespace std; 4 int num[7]; 5 int sum; 6 int main(){ 7 ios::sync_with_stdio(false); 8 cin.tie(NULL); 9 cout.tie(NULL); 10 int a[7]={0}; 11 for(int i=1;i<=4;++i) 12 cin>>a[i]; 13 for(int i=1;i<=4;++i){ 14 num[i]=a[i]; 15 sum+=num[i]; 16 } 17 for(int i=1;i<=4;++i){ 18 for(int i=1;i<=4;++i) 19 num[i]=a[i]; 20 vector<int>v; 21 int now=i; 22 for(int i=1;i<=sum;++i){ 23 if(!num[now]) 24 break; 25 --num[now]; 26 v.push_back(now

Codeforces Round #608 (Div. 2)D(贪心)

a 夏天 提交于 2019-12-16 01:08:28
1 #define HAVE_STRUCT_TIMESPEC 2 #include<bits/stdc++.h> 3 using namespace std; 4 int a[5007],b[5007],c[5007]; 5 int u,v; 6 int remain[5007],least[5007]; 7 pair<int,int>pc[5007]; 8 vector<int>road[5007]; 9 bool cmp(int a,int b){ 10 return a>b; 11 } 12 int main(){ 13 ios::sync_with_stdio(false); 14 cin.tie(NULL); 15 cout.tie(NULL); 16 int n,m,k; 17 cin>>n>>m>>k; 18 for(int i=1;i<=n;++i){ 19 cin>>a[i]>>b[i]>>c[i]; 20 pc[i]={c[i],i}; 21 } 22 for(int i=1;i<=m;++i){ 23 cin>>u>>v; 24 road[v].push_back(u); 25 } 26 int num=k; 27 int flag=0; 28 for(int i=1;i<=n;++i){ 29 if(num>=a[i]){ 30 num+=b[i]; 31

Codeforces Round #607 (Div. 2)

荒凉一梦 提交于 2019-12-15 20:21:47
太久没做题就会变得很菜。 题目链接: https://codeforces.com/contest/1281/ A: 白给。 1 /* basic header */ 2 #include <bits/stdc++.h> 3 /* define */ 4 #define ll long long 5 #define dou double 6 #define pb emplace_back 7 #define mp make_pair 8 #define sot(a,b) sort(a+1,a+1+b) 9 #define rep1(i,a,b) for(int i=a;i<=b;++i) 10 #define rep0(i,a,b) for(int i=a;i<b;++i) 11 #define eps 1e-8 12 #define int_inf 0x3f3f3f3f 13 #define ll_inf 0x7f7f7f7f7f7f7f7f 14 #define lson (curpos<<1) 15 #define rson (curpos<<1|1) 16 /* namespace */ 17 using namespace std; 18 /* header end */ 19 20 int t; 21 const int maxn=1010; 22 char s

Div CSS常用布局方式代码集锦

末鹿安然 提交于 2019-12-14 21:48:20
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 现在都Div CSS布局了,本文收集整理了一些常用的DivCSS布局代码,比如两行一列、三行一列、两行两列、三行两列、两行三列、单行三列以及float定位的代码集锦,下面逐一帖出各个布局的代码: CSS一行一列布局代码: body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;width:350px;} CSS两行一列布局代码: body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:350px;} #content-end{margin-left:auto;margin-right:auto;width:400px;width:350px;} CSS三行一列布局代码: body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width