第八周
作者：互联网
周一
布局
CSS的大三模型
标签显示模式：
- 块级元素
h1_h6 p div ul ol li table
独占一行
可设置高度
- 行内元素
a strong b i u span
多个元素可以在一行
不能改变其高度
- 行内块
img input td 可以对他们设置宽度和对齐属性
和相邻行内元素在一行上，但是之间会有空白缝隙
默认宽度就是它本身内容的宽度
显示模式的转换
display：block 块级元素
display：inline 行内元素
display:inline-block 行内块元素
盒子模型
四大元素 ：
外边距：margin
边框：border
内边距：padding
内容区域：content
设置内边距可能会撑开父级div我们就用 box-sizing: border-box;属性来控制它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿新浪</title>
<style>
* {
margin: 0;
}
.container {
height: 41px;
border-top: 3px solid #ff8500;
background: #fcfcfc;
border-bottom: 1px solid #edeef0;
line-height: 41px;
/*设置DIV内元素垂直居中，可以将line-heiht设置成容器的高度*/
}
a {
color: #4c4c4c;
font-size: 13px;
text-decoration: none;
/*去除a标签的下划线 */
display: inline-block;
height: 41px;
padding: 0 15px;
}
a:hover {
color: #fe8b10;
background-colorAS: #edeef0;
}
</style>
</head>
<body>
<div class="container">
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
</div>
</body>
</html>
浮动
让块级元素显示在一行
清除浮动的步骤：
先定义一个样式：
.类名：：after{
content: "";
display:block;
clear:both;
}
再在父级元素上加样式
<div class="class1 类名">
</div>
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 300px;
height: 300px;
border: 1px solid black;
}
.left{
background-color: #ccc;
display: inline-block;
height: 300px;
width: 100px;
float: left;
}
.right{
background-color: red;
display: inline-block;
height: 300px;
width: 200px;
float: right;
}
.container2{
width: 400px;
height: 200px;
background-color: pink;
}
/* 清除浮动的第一步：定义一个选择器，名字叫clearfix */
.clearfix::after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 清除浮动的第二步，在我们的浮动元素的父级盒子 上加上第一步定义的选择器 -->
<div class="container clearfix" >
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="container2">
第二个div盒子
</div>
</body>
</html>
定位
周二
继周一的定位
属性：position
浮动的主要目的是让多个块级元素一行显示，定位的主要目的就是移动位置，让盒子到我们想要的位置上去
定位模式
- 静态定位
- 相对定位
- 绝对定位
- 固定定位
定位属性
元素的定位属性主要包括定位模式和边便宜两部分
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左测偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
静态定位
默认为静态定位。静态定位就是所有元素的默认定位方式。
静态位置就是各个元素在HTML文档流中默认的位置
相对定位（保留原位置）
position:relative;
要点：
1、每次移动的位置是以自己的左上角为基点移动
2、移动后，原来所占的位置继续占有。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
div:first-child {
height: 200px;
width: 200px;
background-color: palevioletred;
position: relative;
top: 100px;
left: 230px;
}
div:last-child {
width: 300px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div>第一个盒子</div>
<div>第二个盒子</div>
</body>
</html>
绝对定位（不保留原位置）
position:absolute;
要点：
若所有的父元素都没有定位，则以浏览器为准对齐父级有定位，则根据最近的已经定位的元素（绝对，相对，固定）进行定位。
快捷键：
<div class="father">
<div class="son">
</div>
</div>
等同于：
.father>.son
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
height: 400px;
border: 5px solid red;
margin-top: 150px;
margin-left: 150px;
position: absolute;
}
.son {
width: 100px;
height: 100px;
background-color: plum;
position: absolute;
top: 10px;
left: 10px;
}
.son1 {
width: 100px;
height: 100px;
background-color: rgb(17, 35, 87);
position:absolute;
top: 110px;
left: 110px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
孩子盒子
</div>
<div class="son1">孩子2</div>
</div>
</body>
</html>
子绝父相
子元素绝对定位，父元素相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子绝父相</title>
<style>
.banner {
margin: 30px auto;
width: 960px;
border: 1px solid plum;
position: relative;
}
.content {
width: 230px;
margin: 3px;
}
.leftIcon {
width: 30px;
position: absolute;
top: 38%;
left: 0px;
}
</style>
</head>
<body>
<div class="banner">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f18ac756fa2cedb16ea429b9c0001af.png?w=632&h=340" alt=""
class="content">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f18ac756fa2cedb16ea429b9c0001af.png?w=632&h=340" alt=""
class="content">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f18ac756fa2cedb16ea429b9c0001af.png?w=632&h=340" alt=""
class="content">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f18ac756fa2cedb16ea429b9c0001af.png?w=632&h=340" alt=""
class="content">
<img src="向左.png" alt="" class="leftIcon">
</div>
</body>
</html>
固定定位
1、固定定位的元素跟父亲没有任何关系，只认浏览器
2、固定定位完全脱标，不占有位置 ，不随着滚动条滚动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fixed{
width: 50px;
position: fixed;
right: 10px;
bottom: 10px;
}
body{
height: 40000px;
}
</style>
</head>
<body>
<img src="向左.png" alt="" class="fixed">
</body>
</html>
创建层
叠放次序：
当多个元素同时设置定位时，定位元素之间有可能会发生重叠。使用z-index调整堆叠顺序。取值越大，跃居上。
<style>
.father {
width: 400px;
height: 400px;
border: 5px solid red;
margin-top: 150px;
margin-left: 150px;
position: absolute;
}
.son {
width: 100px;
height: 100px;
background-color: plum;
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
.son1 {
width: 100px;
height: 100px;
background-color: rgb(98, 107, 134);
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
孩子盒子
</div>
<div class="son1">孩子2</div>
</div>
</body>
总结知识：
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
|---|---|---|---|
| 静态定位 | 不脱标，正常模式 | 不可以 | 正常模式 |
| 相对定位 | 不脱标，占有位置 | 可以 | 相对自身位置移动 |
| 绝对定位 | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置 |
| 固定定位 | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置 |
周三（JavaScript）
JavaScript简介
- JavaScripe
NetScape公司开发的一种脚本语言
在W3C、ECMA的不懈努力下，随着Microsoft的IE浏览器的不断改进。
JavaScript特点
脚本语言
基于对象
简单性
安全性
动态性
跨平台性
JavaScript的解释和介绍
JavaScript和Java的区别
面向对象和基于对象
解释和编译
代码格式不一样
嵌入方式不一样
强类型和弱类型
静态联编和动态联编
基础语法
JavaScript支持的数据类型共有5种：
数值型
布尔值
字符串形
未定义
变量与表达式
创建变量
表达式与操作符
注意：== 与 === 的区别：
== 会做一定的类型转换
===不做类型转换，接受的相等条件更加严格（全等于 类型都要一样）
常用类
函数
Array
Math
Date
String
Array
声明数组
var 数组名 = new Array(size)
var emp = new Array（2）
添加元素
emp[2] = "aa";
也可以
var empp = new Array("AA","BB")；
<script>
var arr1 = new Array(3);
document.write(arr1+"</br>")
document.write(arr1.length + "<hr/>")
var arr2 = new Array("aa", 123, "W",5543);
document.write(arr2 + "</br>");
document.write(arr2.length + "</br>")
document.write("<hr/>");
//创建数组的第三种方法
var arr3 = ["问天一部",666,123,345,"lwww"];
document.write(arr3 + "</br>");
document.write(arr3.length + "<hr/>")
//遍历数组
for(var i = 0;i<arr3.length;i++){
document.write(arr3[i]+"<br/>")
}
Array的属性
length，指明数组的长度
方法：
join（） 将数组值连接变为一个字符串
reverse（） 将数组值倒序
sort（） 排序
<script>
var arr = [11, 2, 33, 4, 21, 213];
document.write(arr + "</br>");
arr.sort(); //是按照数组的第一位数字大小排序的
document.write(arr + "<hr/>");
//join方法
document.write(arr.join("-"))
</script>
Math
Function
function 函数名 （参数）{
函数体；
return 表达式；
}
特点：
方法定义是，参数的类型不用写，返回值类型也不写
方法是一个对象，如果定义名称相同的方法，会覆盖
在JS中，方法的调用只与方法的名称有关，和参数列表无关
在方法声明中有一个隐藏的内置对象（数组），arguments封装所有的实际参数
调用:方法名称（实际参数列表）；
<script>
//方法中的参数可以不写，默认提供了arguments来接收所有参数
function method1() {
print("调用了method1方法");
for(var i = 0 ; i<arguments.length ; i++){
print(arguments[i])
}
}
method1(1, "333", true);
function print(param) {
document.write(param + "</br>")
}
</script>
Date
<script>
var date = new Date();
print(date);
print("FullYear:"+date.getFullYear()+"</br>");
print("Moneth:"+date.getMonth()+"</br>");
print("Day:"+date.getDay()+"</br>");
print("date:"+date.getDate()+"</br>")；
function print(param){
document.write(param + "</br>");
}
BOM（浏览器对象）
DOM操作（文档对象）
事件
周四
继周三的Math Function 与Date函数
例子（轮播图、倒计时）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1、创建图片容器并初始化
var pics = [];
pics[0]="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11829e973197010c1f012f70aafde8f4.jpg?thumb=1&w=1349&h=506&f=webp&q=90";
pics[1]="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d498c673c14fac077c37869cd82e38a9.jpg?w=2452&h=920";
pics[2]="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a532e33470d046b3f044d5ea49fc5e9e.png?thumb=1&w=1349&h=506&f=webp&q=90";
//2、定义一个函数来切换图片
var picIndex = 0;
function show(){
//得到img对象
var imgElement = document.getElementById("bannerImg");
//按顺序取容器中的图片
var imgsrc = pics[picIndex]
picIndex++;
if(picIndex == pics.length){
picIndex = 0;
}
//将取到的图片src赋值给第一步得到的img对象的src
imgElement.src = imgsrc
}
//3、设置一个定时器
setInterval(show,2000)
</script>
<style>
div {
width: 700px;
margin: 0 auto;
}
#bannerImg{
width: 100%;
}
</style>
</head>
<body>
<div>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d498c673c14fac077c37869cd82e38a9.jpg?w=2452&h=920" alt="" id="bannerImg">
</div>
</body>
</html>
倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//1、定义方法改变秒数
var second = 5
function changeSeconds() {
//1得到秒数的element对象
var spanElement = document.getElementById("seconds");
//2 秒数 --
second--;
//3 将秒数赋值给1获得的Element对象
spanElement.innerHTML = second;
//4 当前秒数等于0的时候，跳转网页
while (second == 0) {
location.href = "http://www.cqyti.com/";
}
}
//2、定义一个定时器，重复执行1的方法
setInterval(changeSeconds, 1000)
</script>
<style>
#seconds {
color: pink;
font-weight: bold;
}
</style>
</head>
<body>
<span id="seconds">5</span>秒之后跳转到学校官网
</body>
</html>
DOM
动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口
- DOM的分类
Core DOM
定义了一套标准的针对任何结构化文档的对象
XML DOM
定义了一套标准的针对XML文档的对象
HTML DOM
定义了一套标准的针对Html文档的对象
Node层次
节点列表
事件
JavaScript事件：
- 事件是发生并得到处理的操作
JavaScript事件处理程序就是一组语句，在时间发生时执行。
JavaScript常用事件
- 鼠标移动事件
- 鼠标点击事件
- 加载与卸载事件
- 聚焦事件
- 提交与重置事件
- 选择与改变事件
标签：定位,元素,第八,height,width,var,document 来源： https://www.cnblogs.com/lijinyu08/p/15490140.html