上节回顾：
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
544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
