上节回顾:
day501.前情回顾
CSS属性:
float浮动的规则1. 浮动规则:
浮动只控制自己
如果前面的标签也是浮动的,就挨着放
如果前面的标签不浮动,则下方摆放
如果把块级标签设置成浮动,他们就能在一行显示(inline-block)
如果把内联标签设置成浮动,他们就可以设置长和宽
float清除浮动(父标签塌陷)
clear
none
left
right
both
.clearfix:after {******content:"";
display:"block";
clear:both;
}
定位(position)--根据谁来做定位
static
relative(相对定位)
absolute(绝对定位)
fixed(固定)
返回顶部
.returnTop {
position:"fixed";
right: 10px;
bottom: 10px;
}
模态框(弹出框那个遮罩层)
.cover {
position:"fixed";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3)
}
z-index
.modal {
width: 800px;
height: 400px
position:"fixed";/*固定在屏幕中间*/top:50%;
left:50%;
margin-top: -200px;
margin-left: -400px;
}
display
none 不显示
block 当成块级标签 独占一行 可以设置长和宽
inline 当成内联标签 可以放在一行
inline-block 既能显示在一行又能设置长和宽
:before和:after
border-radius 画圆(把值设置成边框的一半)
list-style-type: none (通过设置CSS属性不显示列表自带样式)
上节回顾 课堂笔记
*{
padding: 0;
margin: 0;
}
body {
background-color: #eeeeee;
}
.head {
height: 45px;
width:100%;
background-color: #2459a2;
position: fixed;
top: 0;
}
.head-content {
width: 1016px;
height: 45px;
margin: 0 auto;
}
.head-content>a {
width: 121px;
height: 23px;
background: url("logo.png") no-repeat 0 0;
float: left;
margin-top: 11px;
}
.head-content ul>li {
float: left;
line-height: 45px;
margin-left: 10px;
}
.head-content ul>li>a {
padding: 11px;
}
a {
text-decoration: none;
color: rgb(192, 205, 223);
}
.head-content ul>li>a:hover {
color: white;
background-color: rgb(57, 107, 179);
}
.main {
margin-top: 45px;
}/*页面主体部分*/.main-content {
width: 960px;
height: 1000px;
background-color: white;
margin: 0 auto;
padding: 5px 15px;
}
.content-left {
width: 630px;
height: 1000px;
float: left;
}
.content-right {
width: 300px;
height: 1000px;
background-color: green;
float: right;
}
.top-left {
padding: 15px 0;
display: inline-block;
}
.top-left >a {
display: inline-block;
min-width: 60px;
height: 26px;
text-align: center;
margin-right: 10px;
color: rgb(51, 102, 178);
font-weight: 700;
line-height: 26px;
}
.icon {
background: url("http://dig.chouti.com/images/tip.png?v=2.9") no-repeat 0 0 ;
}
.ty {
background-position: 0 -299px;
}
.top {
border-bottom: 1px solid rgb(204, 220, 239);
}
.top-center {
display: inline-block;
}
.new-button {
float: right;
padding: 10px 40px;
background-color: rgb(132, 164, 43);
color: white;
border: none;
margin-top: 10px;
}
.new-button:hover {
background-color: #8eb031;
}
.item-img {
float: right;
padding-top: 15px;
}
.item-img>img {
width: 60px;
height: 60px;
}
.item-content {
padding-top: 15px;
}
.part2 span {
display: inline-block;
height: 18px;
width: 18px;
background: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13") no-repeat 0 0;
}
.part2 .thumb {
background-position: 0 -40px;
}
.part2 .thumb:hover {
background-position: 0 -20px;
}
抽屉作业示例
今日内容:
2. 今日内容
要培养自己的自学能力(看文档的能力)
JS (JavaScript)
一门编程语言,和 Python\Java\PHP\Go \C++\C#类似的.
网景
跑在浏览器上的语言 10天
node.js 可以跑在服务器上的JS
ES6(EMCAScript2016) /ES7 语法
JS学习内容: (3天)1.JS语言基础:1.基本数据类型2.变量3.流程控制4.语法/注释5.函数6.对象2.DOM和BOM编程
DOM-->Document Object Model
BOM-->Browser Object Model
JS语法基础:
语句结束之后要写分号;*****$也可以做变量名
推荐使用驼峰命名
JS数据类型:
数字类型
字符串类型
字符串自带的那些属性和方法
字符串转数字
布尔类型
数组
数组的内置属性和方法
数组的遍历
var i=0;
i++; i= i+1; --> i+=1(Python);
对象(简单的对象)
对象的遍历
条件判断和循环if... else...if... else if...elseswitch
case 值1: 要做的事儿;break;
case 值2: 要做的事儿;break;
default: 条件都不满足默认执行的for循环for (var i=0;条件;i++){
循环要做的事儿;
}
while循环while(条件){
循环要做的事儿;
}
三元运算
条件 ? 值1: 值2
今日内容课堂笔记
一、CSS属性补充
height: 100px;
width: 100px;
background-color: wheat;
overflow: auto;
}
在苍茫的大海上,
狂风卷积着乌云,
在乌云和大海之间,
海燕像黑色的闪电,
在高傲地飞翔!
- 111
- 222
- 333
- 444
- 555
- 666
CSS属性补充
二、JS-DOM-BOM操作示例
操作示例
JavaScript引入方式
1、Script标签内写代码
//在这里写你的JS代码
2、引入额外的JS文件
JavaScript语言规范
1、注释(注释是代码之母)
//这是单行注释/*这是
多行注释*/
2、结束符
JavaScript中的语句要以分号(;)为结束符。
三、js 语法基础
JavaScript语言基础
name='Alex'; //赋值变量
console.log(name);
var name2='Egon';
console.log(name2);
var n1=1;
var n2=1234;
var n3=1234.12;
var n4=123e-5;
console.log(n1,n2,n3,n4);//字符串常用方法
var name3="Alex";
var age=18;
console.log(name3+age);//字符串转数字
var a="123";
var ret=parseInt(a);
console.log(ret);
var b="123.346";
ret=parseFloat(b);
console.log(ret);
var c="ABC";
ret=parseInt(c);
console.log(ret);
小练习
1、变量声明
JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。
声明变量使用 var 变量名; 的格式来进行声明
var name = "Alex";
var age= 18;
注意:
变量名是区分大小写的。
推荐使用驼峰式命名规则。
JavaScript数据类型
1、JavaScript拥有动态类型
var x; //此时x是undefined
var x= 1; //此时x是数字
var x= "Alex" // 此时x是字符串
2、数字类型
JavaScript不区分整型和浮点型,就只有一种数字类型。
var a = 12.34;
var b= 20;
var c= 123e5; // 12300000var d= 123e-5; // 0.00123
常用方法:
parseInt("123") //返回123
parseInt("ABC") //返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456") // 返回123.456
3、字符串
var a = "Hello"var b= "world;
var c = a +b;
console.log(c);// 得到Helloworld
常用方法:
方法
说明
obj.length
返回长度
obj.trim()
移除空白
obj.trimLeft()
移除左边的空白
obj.trimRight()
移除右边的空白
obj.charAt(n)
返回第n个字符
obj.concat(value, ...)
拼接
obj.indexOf(substring, start)
子序列位置
obj.substring(from, to)
根据索引获取子序列
obj.slice(start, end)
切片
obj.toLowerCase()
小写
obj.toUpperCase()
大写
obj.split(delimiter, limit)
分割
拼接字符串一般使用“+”
四、运算符
1、布尔类型
区别于Python,true和false都是小写。
var a =true;
var b= false;
2、数组
var a = [123, "ABC"];
console.log(a[1]); // 输出"ABC"
常用方法:
方法
说明
obj.length
数组的大小
obj.push(ele)
尾部追加元素
obj.pop()
获取尾部的元素
obj.unshift(ele)
头部插入元素
obj.shift()
头部移除元素
obj.slice()
切片
obj.reverse()
反转
obj.join(seq)
将数组元素连接成字符串
obj.concat(val, ...)
连接数组
obj.sort()
排序
遍历数组中的元素:
var a = [10, 20, 30, 40];for (var i=0;i
console.log(i);
}
3、null和undefined
undefined表示的是当声明的变量未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
null表示值不存在
undefined表示声明了变量,但是还没有赋值。null声明了变量并且变量是空值。
4、类型查询
typeof "abc" // "string"typeof null// "object"typeof true// "boolean"typeof123 // "number"
typeof是一个一元运算符(就像++,--,!,- 等一元运算符),不是一个函数,也不是一个语句。
运算符
1、算数运算符
+ - * / % ++ --
2、比较运算符
> >= < <= != == === !==
注意:
1 == “1” //true1 === "1" // false
3、逻辑运算符
&& || !
4、赋值运算符
= += -= *= /=
五、流程控制
1、if-else
var a = 10;if (a > 5){
console.log("yes");
}else{
console.log("no");
}
2、if-else if-else
var a = 10;if (a > 5){
console.log("a > 5");
}else if (a < 5) {
console.log("a < 5");
}else{
console.log("a = 5");
}
3、switch
var day =new Date().getDay();
switch (day) {
case 0:
console.log("Sunday");break;
case1:
console.log("Monday");break;
default:
console.log("...")
}
4、for
for (var i=0;i<10;i++) {
console.log(i);
}
5、while
var i =0;while (i < 10) {
console.log(i);
i++;
}
6、三元运算
var a = 1;
var b= 2;
var c= a > b ? a : b