python为主:
js基础语法
jsDOM
jsBOM
jQuery框架****
Bootstrap框架****
今日内容:
1.css的定位
background-position: -20px -40px;
(1)相对定位
如果仅仅对当前盒子设置相对定位,那么它与原来的盒子没有任何变化、
只有一个作用:父相子绝
不要使用相对定位来做压盖现象
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css" media="screen"> div{ width: 200px; height: 200px; } .box1{ background-color: red; } .box2{ background-color: green; position: relative; top: 200px; left: 0px; } .box3{ background-color: blue; } </style> </head> <body> <div class="box1"> </div> <div class="box2"> </div> <div class="box3"> </div> </body> </html>
效果:
二种现象:
1.不脱标
2.形影分离老家留坑(恶心)
(2)绝对定位
现象:
1.设置绝对定位的盒子,脱离标准流
参考点:
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。(爱立信)
二、以父辈盒子作为参考点
1.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸,它也可以是爷爷,曾爷爷。
2.如果父亲设置了定位,那么以父亲为参考点。那么如果父亲没有设置定位,那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点
注意了:父绝子绝,没有实战意义,做站的时候不会出现父绝子绝。因为绝对定位脱离标准流,影响页面的布局。相反‘父相子绝’在我们页面布局中,是常用的布局方案。因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置。
还要注意,绝对定位的盒子无视父辈的padding
设置绝对定位之后,margin:0 auto;不起任何作用,如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位,然后left:50%; margin-left等于元素宽度的一半,实现绝对定位盒子居中
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css" media="screen"> *{ padding: 0; margin: 0; } .father{ width: 500px; height: 500px; background-color: green; position: relative; top: 50px; left: 100px; } .father2{ width: 300px; height: 300px; background-color: yellow; margin-left: 30px; position: relative; padding: 30px; } .box1{ width: 200px; height: 200px; background-color: red; position: absolute; top: 30px; left: 40px; } </style> </head> <body style="height: 2000px"> <div class="father"> <div class="father2"> <div class="box1"> </div> </div> </div> </body> </html>
效果:
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css" media="screen"> *{ padding: 0; margin: 0; } input,button{ outline: none; border: 0; } .search{ width: 296px; height: 48px; margin: 100px auto; } .search form{ position: relative; } .search input[type='text']{ width: 223px; height: 48px; font-size: 14px; border: 1px solid #e0e0e0; padding: 0 5px; position: absolute; } .search span{ font-size: 12px; background-color: #eee; padding: 0 5px; position: absolute; top: 0; right: 0; } .search span.t{ top: 20px; right: 162px; z-index: 2; } .search span.s{ top: 20px; right: 82px; z-index: 1; } .search input[type='submit']{ height: 48px; width: 50px; border: 1px solid #e0e0e0; background: #fff; position: absolute; right: 12px; top: 0px; } </style> </head> <body> <div class="search"> <form> <input type="text" name=""><input type="submit" value="按钮"> <span class="t">小米8</span> <span class="s">小米MIX 2S</span> </form> </div> </body> </html>
效果:
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css" media="screen"> .box{ width: 100%; height: 657px; border: 1px solid red; /*left center bottom left center bottom */ background: url(./1.jpg) no-repeat center top; } </style> </head> <body> <div class="box"> </div> </body> </html>
效果:(原来这是张大图,左右还有,定位到中间了)
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css" media="screen"> *{ padding: 0; margin: 0; } .father1{ position: relative; z-index: 5; } .father2{ position: relative; z-index: 4; } .box{ width: 500px; height: 500px; background-color: red; position: absolute; left: 50%; margin-left: -250px; z-index: 20; } .box2{ width: 300px; height: 300px; background-color: green; position: absolute; left: 50%; margin-left: -150px; z-index: 1000000; } /*z-index*/ </style> </head> <body> <!-- <div class="t" style="width: 1000px;height: 200px;background-color: yellow;"> --> <!-- </div> --> <div class="father1"> <div class="box"> </div> </div> <div class="father2"> <div class="box2"> </div> </div> </body> </html>
效果:
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css" media="screen"> .cart{ width: 100px; height: 50px; background-color: #000; position: relative; margin: 100px auto; cursor: pointer; } .cart-info{ position: absolute; width: 300px; height: 100px; background-color: red; top: 50px; left: -200px; display: none; } .cart:hover .cart-info{ display: block; background-color: green; } </style> </head> <body> <div class="cart"> <span class="cart-info"></span> </div> </body> </html>
效果:
(3)固定定位
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css" media="screen"> *{ padding: 0; margin: 0; } body{ padding-top: 80px; } .head{ width: 100%; height: 80px; background-color: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; z-index: 99999; } .wrapper{ width: 100%; height: 500px; background-color: red; } .top{ width: 100px; height: 100px; background-color: purple; position: fixed; bottom: 20px; right: 20px; line-height: 100px; text-align: center; } </style> </head> <body style="height: 2000px;"> <div class="head"> 导航栏 </div> <div class="wrapper"> 中心内容 <p style="position: absolute; color: #fff;background-color: green;"> heiheihei</p> </div> <div class="top"> 返回顶部 </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('.top').click(function(){ $('html,body').animate({ scrollTop:'200px' },2000); }); </script> </body> </html>
效果:
2.z-index
1.z-index 值表示谁压着谁,数值大的压盖住数值小的,
2.只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
3.z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
4.从父现象:父亲怂了,儿子再牛逼也没用
css的重要知识点:
(1)每个标签 span==> 1.display属性 none|inline|inline-block|block 2.浮动 3.绝对定位
(2)浮动原理:为了实现并排
清除浮动三种方式:
1.给父盒子设置固定高度
2.给父元素设置类clearfix,伪元素清除法
.clearfix:after{
content:'.',
clear:both;
display:block;
visibility:hidden;
height: 0;
}
3.overflow:hidden(小心点)
(3)定位:
相对定位:不脱标 position:relative;
作用:1.做父相子绝的参考 2.微调元素
参考点:以原来的自身的位置进行定位
绝对定位:脱标 position: absolute
作用:1.父相子绝,页面排版布局 2.压盖现象
参考点:
1个盒子:以页面左上角
父子盒子:以父辈元素左上角为参考点
固定定位:position: fixed;
1.脱标 2.固定导航栏 3.小广告
body{
padding-top: 80px;
}
.head{
width: 100%;
height: 80px;
background-color: rgba(0,0,0,.5);
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
(4)z-index的用法
js:JavaScript
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- <script type="text/javascript" src="./index.js"></script> --> <script type="text/javascript"> /* var a = '2'; var b = 3; var c = 4; console.log(window); console.log(window.a); */ /* 普通函数 console.log(add(1,2)); function add(x,y){ return x+y; }; */ // 函数对象 /* var add = function(x,y) { console.log(x+y); }; add(5,6); */ // var a = 2; // var b = '3'; // console.log(a+b); // var a = prompt('今天是什么天气?'); // console.log(a); // console.log(a); // var a; // a = 10; // console.log(typeof(a)); // def add(x,y): // return x+y // add(1,2) //全局对象 window /* var name = '张三'; var age = 18; var str = name+"今年"+age+"岁了"; console.log(str); */ // es6的语法 模板字符串`` ${} // var name = '张三'; // var age = 18; // console.log(`${name}今年${age}岁了`); // document.write(`<h1>${name}</h1>`); /* var a = "哈哈哈"; var b = 2; console.log(a-b); console.log(parseInt("2018你真帅!!")); var a = parseInt(5.8 + 4.7); console.log(a); var a1 = 5/0; console.log(a1); // NaN:number Infinity:number var d1; //表示变量未定义 console.log( d1); var x1 = 3; var x2 = ++x1; console.log(x1);//4 console.log(x2);//3 */ var x = 5; console.log(x==='5'); var a1 = '1'; var a2 = '2'; console.log(a1+a2) //12 var n1 = 122; var str1 = String(n1); console.log(typeof str1); var stringNum = '1233.33yudasdiusaudsaugd'; var num2 = Number(stringNum); console.log(num2); console.log(parseInt(stringNum)) console.log(parseFloat(stringNum)); var b4 = Infinity; //true //都是为false、 var b5 = NaN; var b6; //undefined var b7 = null; // 非0既真 console.log(Boolean(b7)); </script> </body> </html>
1.ECMAScript5基础语法
es1 2 4 5
es5: 没有类的概念(伪面向对象)
es6:
es7
es8
print()
console.log();
nodejs npm install jquery --save
import ooo from 'xxx'
ooo.find()
python pip3 install
from xxx import ooo
(1)声明变量 var
(2)String Number boolean undefine
(3) Array Math
toNumber()
toString()
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script> // if (1) { // console.log('哈哈哈') // }else if(){ // }; // console.log(2222); var gameScore = 'better'; switch(gameScore){ //case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break,那么直到该程序遇到下一个break停止 case 'good': console.log('玩的很好') //break表示退出 break; case 'better': console.log('玩的老牛逼了') break; case 'best': console.log('恭喜你 吃鸡成功') break; default: console.log('很遗憾') } // //不管有没有满足while中的条件do里面的代码都会走一次 // var i = 3;//初始化循环变量 // do{ // console.log(i) // i++;//更新循环条件 // }while (i<10) //判断循环条件 // for(var i = 0;i < 10;i++){ // console.log(i); // } // for(var i=1;i<=3;i++){ // for(var j=0;j<6;j++){ // document.write('*') // } // document.write('<br>') // } </script> </body> </html>
效果:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script> // //不管有没有满足while中的条件do里面的代码都会走一次 var i = 3;//初始化循环变量 do{ console.log(i) i++;//更新循环条件 }while (i<10) //判断循环条件 </script> </body> </html>
效果:
for(var i = 0;i < 10;i++){ console.log(i); } 结果为: 0 1 2 3 4 5 6 7 8 9
二、jsDOM
Document Object Model
(1)获取DOM的三种方式:
var oDiv = document.getElementById('box');
//获取的是集合,跟数组不同,它没有数组的方法
var oDiv = document.getElementsByTagName('div')[0];
var oDiv = document.getElementsByClassName('box')[0];
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script> var arr = [1,2,3]; console.log(arr); </script> </body> </html>
效果:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script> // 构造函数的方式创建(造对象) var arr = [1,2,3]; var arr2 = new Array(); arr2.push(10); console.log(arr2.concat(arr)); </script> </body> </html>
效果:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script> var arr = ['张三','李四','王文','赵六']; arr.pop(); console.log(arr);//["张三", "李四","王文"] </script> </body> </html>
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script> var num = 132.32522; var newNum = num.toFixed(2) console.log(newNum) </script> </body> </html>
效果:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script> var myDate = new Date(); console.log(myDate.getDate()); console.log(myDate.getMonth()+1); console.log(myDate.getFullYear()); console.log(myDate.getDay()); </script> </body> </html>
效果:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script> var myDate = new Date(); console.log(myDate.toLocaleString()); </script> </body> </html> 效果: 2018/7/13 上午12:26:56
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script> // 100~600 min+Math.randowm()*(max-min)公式背过 console.log(Math.floor(100+Math.random()*500)); </script> </body> </html> 结果:107
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script> function add() { //body... console.log(arguments); // console.log(arguments[1]); // arguments.push(888); for(var i=0;i<arguments.length;i++){ console.log(arguments[i]); } }; add('1',2,3); console.log(window); console.log(document); console.log(document.documentElement); console.log(document.body); </script> </body> </html>
效果:
(2)设置style样式
oDiv.style.width
oDiv.style.height
oDiv.style.marginLeft
.......只要是css中的属性都能通过style对象点出来,所有的css中类似margin-left,都要写成驼峰,marginLeft
(3)设置标签中的属性
console.log(oDiv.id);getter方法 获取id的属性值
oDiv.id= '123';setter方法 设置id的属性值
除了id,还有class,使用className,title
<!DOCTYPE html> <html> <head> <title></title> <style> .box1{ width: 200px; height: 200px; background-color: red; /**/ } .active{ background-color: yellow; } </style> </head> <body> <div id="box" class="box1"> </div> <img src="./xinyuan.jpg" alt="女优" title='黑' id="nv"> <!-- <img src="./xinyuan.jpg" alt="女优" title='黑'> --> <button class="btn">切换</button> <script> //js中入口函数 //当文档和图片都加载完成之后 入口函数才调用 window.onload = function() { console.log(111); var oDiv = document.getElementById('box'); console.dir(oDiv); console.log(oDiv.id); console.log(oDiv.className); var isRed = true; oDiv.onclick = function() { // if (isRed) { // console.log(oDiv.style); // oDiv.style.backgroundColor = 'green'; // oDiv.style.width = '300px'; // isRed = false; // }else{ // oDiv.style.backgroundColor = 'red'; // oDiv.style.width = '200px'; // isRed = true; // } oDiv.className += ' active'; }; var oImg = document.getElementsByTagName('img')[0]; console.log(oImg); var oBtn = document.getElementsByClassName('btn')[0]; oBtn.onclick = function() { // 点语法 setter和getter语法 oImg.src = './1.jpg'; console.log(oImg.id); oImg.id = 'lv'; // oImg.alt= // oImg.className // oImg.title } }; </script> </body> </html>
效果:DOM操作
<!DOCTYPE html> <html> <head> <title></title> <style> .box1{ width: 200px; height: 200px; background-color: red; /**/ } .active{ background-color: yellow; } </style> </head> <body> <div id="box" class="box1"> </div> <img src="./xinyuan.jpg" alt="女优" title='黑' id="nv"> <!-- <img src="./xinyuan.jpg" alt="女优" title='黑'> --> <button class="btn">切换</button> <script> //js中入口函数 //当文档和图片都加载完成之后 入口函数才调用 window.onload = function() { console.log(111); var oDiv = document.getElementById('box'); console.dir(oDiv); console.log(oDiv.id); console.log(oDiv.className); var isRed = true; oDiv.onclick = function() { if (isRed) { console.log(oDiv.style); oDiv.style.backgroundColor = 'green'; oDiv.style.width = '300px'; isRed = false; }else{ oDiv.style.backgroundColor = 'red'; oDiv.style.width = '200px'; isRed = true; } oDiv.className += ' active'; }; var oImg = document.getElementsByTagName('img')[0]; console.log(oImg); var oBtn = document.getElementsByClassName('btn')[0]; oBtn.onclick = function() { // 点语法 setter和getter语法 oImg.src = './1.jpg'; console.log(oImg.id); oImg.id = 'lv'; // oImg.alt= // oImg.className // oImg.title } }; </script> </body> </html>
效果: