1. 权重
/*权重： 数数 id class 标签*/
/*1000 > 100 > 010 > 001*/
/*行内 > id > 类 > 标签*/
/*1 0 0*/
#box{
200px;
height: 200px;
background-color: red;
}
/*0 1 0*/
.box{
200px;
height: 200px;
background-color: green;
}
/*001*/
div{
200px;
height: 200px;
2. background
#box{
200px;
height: 200px;
/*默认是水平和垂直都平铺*/
border: 1px solid red;
background-image: url("./timg.jpg");
background-repeat: no-repeat;
/*background-position-x: -638px;*/
/*background-position-y: -264px;*/
/*background-position: -20px 50px;*/
background-attachment: fixed;
}
.box2{
24px;
height: 33px;
background:url("taobao.png") no-repeat 0 -265px;
background-attachment: fixed;
}
3.定位
*{
padding: 0;
margin: 0;
}
.box{
200px;
height: 200px;
background-color: red;
/*做子绝父相得参考
不要用相对定位做压盖现象
*/
/*参考点：原来的位置 */
position: relative;
top: 30px;
left: 40px;
/*margin-top: 30px;*/
}
.box2{
200px;
height: 200px;
background-color: green;
}
4.绝对定位
*{
padding: 0;
margin: 0;
}
.father{
500px;
height: 500px;
border: 1px solid yellow;
}
.box{
200px;
height: 200px;
background-color: red;
/*单独设置绝对定位
参考点：是以页面的左上角为参考点
特点：脱标 不占位置
*/
position: absolute;
top: 30px;
}
.box2{
200px;
height: 300px;
background-color: green;
}
默认都是静态定位
position:static;
1.相对定位
position:relative;
2.绝对定位
position:absolute;
3.固定定位
position:fixed;
5.子绝父相
*{
padding: 0;
margin: 0;
}
.father{
500px;
height: 500px;
border: 1px solid yellow;
/*父相对定位*/
position: relative;
margin-left: 50px;
}
.box{
200px;
height: 200px;
background-color: red;
/*如果是嵌套盒子
参考点：是以最近父辈盒子的左上角为参考点
*/
position: absolute;
top: 40px;
left: 30px;
}
.box2{
200px;
height: 300px;
background-color: green;
}
6. 轮播图定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin:0;
}
.header{
100%;
height: 100px;
}
ul{
list-style: none;
}
.header .list{
100%;
height: 100px;
background-color: red;
position: relative;
}
.list .site-category{
position: absolute;
234px;
height: 460px;
background-color: rgba(0,0,0,.6);
top: 100px;
left: 0;
z-index: 10;
}
.slider{
100%;
height: 460px;
}
.container{
1226px;
margin: 0 auto;
height: 100%;
}
.slider .lunbo{
100%;
height: 460px;
background: url("小米.jpg") no-repeat 0 0;
position: relative;
}
.lunbo span{
position: absolute;
41px;
height: 69px;
background: url("icon-slides.png") no-repeat 0 0;
}
.lunbo span.prev{
background-position: -83px 0;
left: 234px;
top: 50%;
}
.lunbo span.next{
background-position: -128px 0;
right: 0;
top: 50%;
}
.lunbo span.prev:hover{
background-position: 0 0;
}
.lunbo span.next:hover{
background-position: -42px 0;
}
.lunbo .circle{
position: absolute;
bottom: 30px;
right: 50px;
6px;
height: 6px;
background-color: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,.3);
border-radius: 10px;
}
.lunbo .circle:hover{
background: #fff;
border: 1px solid #757575;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<ul class="list">
<li>
<a href="#">86</a>
<div class="site-category">
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="container">
<div class="lunbo">
<span class="prev"></span>
<span class="next"></span>
<span class="circle"></span>
</div>
</div>
</div>
</body>
</html>
7.固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.top{
200px;
height: 200px;
background-color: red;
/*固定定位盒子脱标
参考点： 以浏览器的左上角
*/
position: fixed;
bottom: 10px;
right: 30px;
text-align: center;
line-height: 200px;
color: #fff;
font-size: 18px;
}
</style>
</head>
<body style="height: 2000px;">
<div class="top">回到顶部</div>
<!--1.引包-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
console.log($);
$('.top').click(function () {
// alert(1)
$('html,body').animate({
scrollTop:'0'
},1000);
});
</script>
</body>
</html>
8.固定导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding-top: 80px;
}
.header{
100%;
height: 80px;
background-color: red;
position: fixed;
top:0;
z-index: 99999;
}
.wrap{
100%;
height: 500px;
background-color: green;
color: #fff;
}
.wrap p{
position: relative;
z-index: 3;
}
</style>
</head>
<body style="height: 2000px;">
<div class="header"></div>
<div class="wrap">
<p>内容区域</p>
</div>
</body>
</html>
9. z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
300px;
height: 300px;
border: 1px solid red;
position: relative;
z-index: 12;
}
.sendie{
100px;
height: 100px;
background-color: red;
position: absolute;
top: 270px;
left: 320px;
/*z-index: 10;*/
}
.father2{
300px;
height: 300px;
border: 1px solid green;
position: relative;
z-index: 11;
}
.tailiang{
100px;
height: 100px;
background-color: green;
position: absolute;
top: -30px;
left: 320px;
/*z-index: 5;*/
}
</style>
</head>
<body style="height: 2000px">
<div class="father">
<div class="sendie">
</div>
</div>
<div class="father2">
<div class="tailiang"></div>
</div>
</div>
</body>
</html>
10. js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
11.流程控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
/*
var a = 1;
var c = a++;
//2 1 先赋值 后++
console.log(a);
console.log(c);
*/
/*
var a = 1;
var c = ++a;
//2 1 先++ 后赋值
console.log(a);
console.log(c);
*/
var num = 400;
/*
if(num>300){
console.log('走不进来');
} else{
console.log('走进来了');
}
*/
/*
if(num<300){
console.log('走不进来');
} else if(num < 500){
console.log('走进来了');
}else{
console.log('哈哈哈');
}
*/
//不管有没有满足while中的条件do里面的代码都会走一次
// var i = 3;//初始化循环变量
// do{
//
// console.log(i);
// i++;//更新循环条件
//
// }while (i<10) //判断循环条件
var gameScore = 'better2';
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('很遗憾')
}
</script>
</body>
</html>
12.数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// var arr = [1,2,3];
// var arr2 = [4,5,6];
//
// arr = arr.concat(arr2);
// console.log(arr);
//
// var score = [98,78,76,100,0];
// //toString() 直接转换为字符串 每个元素之间使用逗号隔开
//
// var str = score.toString();
// console.log(str);//98,78,76,100,0
//
var arr = ['张三','李四','王文','赵六'];
var popStr = arr.pop();
console.log(popStr);//["张三", "李四"，"王文"]
console.log(arr);
var arr2 = ['张三','李四','王文','赵六'];
//返回值 是该索引
var num = arr2.push('小马哥');
console.log(arr2);//["张三", "李四"，"王文"，"赵六"，"小马哥"]
var isArr = Array.isArray(arr2);
console.log(isArr);
</script>
</body>
</html>
13. date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var date = new Date();
console.log(date.getDate());
console.log(date.getMonth());
console.log(date.getDay());
console.log(date.toLocaleString())
var a = 123.267;
console.log(Math.ceil(a));
console.log(Math.floor(a));
// 200~500之间 min-max min +Math.random()*(max-min)
// console.log(200+Math.random()*(500-200));
</script>
</body>
14.函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// def add()：
// add()
// 声明函数
function add(a,b){
return a+b;
};
console.log(add(1,2));
function hao() {
//伪数组
for(var i = 0; i < arguments.length;i++){
console.log(arguments[i]);
};
console.log(arguments);
console.log([]);
// arguments.push('帅哥');
};
hao('美女','红酒')
document.write("*");
var a = 3;
</script>
</body>
</html>
15.DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="box" id="box">alex</div>
<script>
//DOM Docuemnt Object Model
console.log(window);
//文档对象
console.log(document);
//html对象
console.log(document.documentElement);
//body对象
console.log(document.body);
var oDiv = document.getElementById('box');
console.log(oDiv);
console.dir(oDiv);
// 1. 找 获取DOM对象
// 2.事件
// 3.驱动程序 执行的动作
var isGreen = true;
oDiv.onclick = function () {
// 驱动程序
console.log(oDiv.style);
//样式操作
if (isGreen) {
oDiv.style.backgroundColor = 'red';
isGreen = false;
}else{
oDiv.style.backgroundColor = 'green';
isGreen = true;
}
// oDiv.style.width = '300px';
// oDiv.style.display = 'none';
};
</script>
</body>
</html>
16.属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
100px;
height: 100px;
background-color: red;
}
.active{
display: none;
}
button{
/*cursor: text;*/
cursor: pointer;
}
</style>
</head>
<body>
<button>隐藏</button>
<div class="box"></div>
<img src="" alt="美女出不来了">
<a href=""></a>
<input type="text" name="" value="113">
<a href="javascript:void(0);">百度1</a>
<a href="javascript:void(0);">百度2</a>
<a href="javascript:void(0);">百度3</a>
<a href="javascript:void(0);">百度4</a>
<script>
var oA = document.getElementsByTagName('a');
for(var i = 0;i<oA.length;i++){
oA[i].onmouseover = function () {
console.log(this.innerText);
}
oA[i].onmouseout = function () {
console.log(this.innerText);
}
}
//数据驱动视图
var oBtn = document.getElementsByTagName('button')[0];
//data 数据
oBtn.innerText = '显示';
var oDiv = document.getElementsByClassName('box')[0];
// oDiv.innerText = '<h2>alex</h2>';
oDiv.innerHTML = '<h2>alex</h2>';
var oImg = document.getElementsByTagName('img')[0];
var oInput = document.getElementsByTagName('input')[0];
oInput.value = 'alex';
console.log(oBtn);
var isHide = true;
oBtn.onclick = function () {
oImg.src = './tim.jpg';
if (isHide) {
console.log( oDiv.className);
// oDiv.style.display = 'none';
oDiv.className += ' active';
oDiv.id = 'box';
isHide = false;
}else{
// oDiv.style.display = 'block';
oDiv.className = 'box';
isHide = true;
oDiv.title = '哈哈哈';
}
}
//
</script>
</body>
</html>