一、上堂回顾
1.css和html的结合方式
内嵌样式：style中书写选择器
链接样式：link引用外部的css文件
2.css的常用属性
font-size:字体大小
text-decoration:设置文本的装饰效果【将超链接的下划线取消】
text-indent:设置段落缩进【p】
text-align:设置文本的对齐方式【center】
border：设置盒子的边框【边框颜色 样式 宽度】
border-radius:削圆角【50%】
padding：内边距
margin：外边距
width/height:宽高
line-height:行高【设置文字的垂直居中】
background-color:背景色
background-image/background：背景图
float:设置浮动【将竖向排列的标签变成横向的】
display：设置标签的显示方式【block，inline，inline-block】
positon:设置标签的定位方式【absolute:父标签，relative：标签自身的位置，fixed】
二、css的常用属性
百度首页
*{ /*去除默认的内外边距*/ padding: 0; margin: 0; } /*设置head*/ #head{ /*向右浮动*/ float: right; margin-top: 20px; } /*设置超链接*/ .first{ color: black; font-size: 14px; margin-left: 10px; font-weight: bold; } .second{ color: black; font-size: 14px; margin-left: 10px; } .more{ background-color: blue; color: white; text-decoration: none; margin-left: 10px; margin-right: 10px; } /*设置中间部分*/ #middle{ /*清除浮动*/ clear: right; /*参照body将div放置到中间位置*/ position: absolute; /*子标签和文本内容都属于一个标签的内容*/ text-align: center; width: 100%; /*设置有效定位*/ top: 40px; } /*输入框的样式*/ #key{ width: 60%; height: 25px; } /*按钮*/ #btn{ background-color: blue; color: white; height: 30px; width: 80px; font-weight: bold; font-size:16px; } /*下面部分*/ #footer{ position: absolute; text-align: center; width: 100%; bottom: 10px; } #footer p{ font-size: 14px; color: darkgray; } #footlink{ margin-left: 20px; } #footlink>a{ color: gray; font-size: 14px; }<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>百度一下，你就知道</title> <link href="css/baiduhome.css" type="text/css" rel="stylesheet" /> </head> <body> <!--上面部分--> <div id="head"> <a href="#" class="first">新闻</a> <a href="#" class="first">好123</a> <a href="#" class="first">地图</a> <a href="#" class="first">贴吧</a> <a href="#" class="first">视频</a> <a href="#" class="first">学术</a> <a href="#" class="second">登录</a> <a href="#" class="second">设置</a> <a href="#" class="more">更多产品</a> </div> <!--中间部分--> <div id="middle"> <img src="https://www.baidu.com/img/bd_logo1.png"/> <div id="sub"> <form action="#" method="get"> <input type="text" id="key" name="kwd"/> <button id="btn">百度一下</button> </form> </div> </div> <!--下面部分--> <div id="footer"> <div> <img src="img/二维码.png"/> <p>手机百度</p> </div> <div id="footlink"> <a href="#">百度推广</a> <a href="#">百度推广</a> <a href="#">百度推广</a> <a href="#">百度推广</a> <br /> <a href="#">百度推广</a> <a href="#">百度推广</a> </div> </div> </body> </html>
1.形变和过渡
1.1形变transform
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: orange; color: white; /*通过形变设置标签的放大或者缩小，也可以设置标签的旋转角度*/ /*设置旋转点,取值为center,left,right,top,bottom*/ transform-origin: center; /*放大或者缩小 * 放大：scale（大于1的整数） * 缩小：scale(0~1之间的小数) * scale表示宽高同时放大一定的倍数 * scaleX()表示只放大或者缩小宽度 * scaleY()表示只放大或者缩小高度 */ /*transform: scale(0.5);*/ margin: 200px; /*旋转 * rotate(30deg),默认沿着z轴顺时针方向旋转 * rotate(-30deg),默认沿着z轴逆时针方向旋转 * rotateX() * rotateY() * rotateZ() * */ /*transform: rotate(-30deg);*/ /*既要缩放，也要旋转*/ transform: scale(2) rotate(30deg); } </style> </head> <body> <div>演示形变</div> </body> </html>
1.2过渡transition
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: orange; color: white; transform: rotate(-90deg); /*使用过渡属性需要注意两点 * 1.指明哪个属性需要被过渡 * 2.该属性过渡需要的时间 */ transition-duration: 5s; /*可以单独指明需要过渡的是哪个属性，也可以直接使用all,表示作用与该标签上的所有的属性需要过渡*/ transition-property: all; /*注意问题：过渡属性要起作用必须使得对应的属性要从一个状态改变到另一个状态*/ } /*鼠标悬浮：伪类选择器*/ div:hover{ background-color: red; transform: rotate(90deg); font-size: 30px; } </style> </head> <body> <!--过渡属性一般是为了辅助形变属性使用的--> <div>过渡属性</div> </body> </html>
1.3照片墙
#box{ width: 80%; height: 800px; background-color: orange; /*auto：自动【自适配】*/ margin: 10px auto; } /*img的共同特点*/ img{ width: 170px; height: 170px; border: solid 2px white; margin: 15px; /*阴影 * 参数：大小 颜色 */ box-shadow: 5px 5px 10px gray; /*过渡属性*/ transition-property: transform; transition-duration: 2s; } /*鼠标悬浮*/ #box>img:hover{ transform: scale(1.2) rotate(0deg); } /*注意：选择器的优先级*/ /*没张图片的个性：旋转一定的角度*/ div img:nth-child(1){ transform: rotate(15deg); } div img:nth-child(2){ transform: rotate(-20deg); } div img:nth-child(3){ transform: rotate(5deg); } div img:nth-child(4){ transform: rotate(-10deg); } div img:nth-child(5){ transform: rotate(5deg); } div img:nth-child(6){ transform: rotate(20deg); } div img:nth-child(7){ transform: rotate(-15deg); } div img:nth-child(8){ transform: rotate(5deg); }<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="css/photowall.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="box"> <img src="img/photowall/pic1.jpg" /> <img src="img/photowall/pic1.jpg" /> <img src="img/photowall/pic1.jpg" /> <img src="img/photowall/pic1.jpg" /> <img src="img/photowall/pic1.jpg" /> <img src="img/photowall/pic1.jpg" /> <img src="img/photowall/pic1.jpg" /> <img src="img/photowall/pic1.jpg" /> </div> </body> </html>
2.动画
2.1基本使用
animation
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ background-color: orange; width: 200px; height: 200px; /*设置旋转点 * 水平方向：left center right * 垂直方向：top center bottom * */ transform-origin: left right; /*给标签添加动画*/ /* * animation:动画的名称 动画执行一次需要的时间 动画进行的次数 动画执行的形式 * * 动画的名称：自定义的,需要自己实现动画的效果 * * 动画进行的次数:默认为1次，正数表示动画需要执行的次数，如果需要执行无限次则需要书写infinite * * 动画执行的形式： * 线性动画：【匀速】linear * 由快到慢：ease * * * 说明：当按照指定的要求执行完动画之后，则会恢复到最初状态 * */ animation: divanimate 5s linear infinite; } /* * @keyframes divanimate{ from{起始的状态} ------》0% to{最终的状态} -------》100% } * * */ @keyframes divanimate{ /*from{ background-color: blue; margin-left: 400px; } to{ transform: rotate(90deg); background-color: cyan; }*/ 0%{ background-color: blue; margin-left: 400px; } 20%{ background-color: yellow; margin-top: 200px; } 50%{ font-size: 30px; color: blue; } 65%{ transform: rotate(30deg); } 100%{ transform: scale(2); } } </style> </head> <body> <div>动画</div> </body> </html>
2.2时钟
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="css/clockstyle.css" type="text/css" rel="stylesheet" /> </head> <body> <!--整体--> <div id="clock"> <!--刻度--> <!--line用于设置所有线条的公共部分，line1等用于设置每条线的不同的部分【旋转角度】--> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class="line line4"></div> <div class="line line5"></div> <div class="line line6"></div> <!--覆盖层--> <div id="cover"></div> <!--时分秒针--> <!--zhen用于设置时分秒针的公共部分--> <div class="zhen hour"></div> <div class="zhen minute"></div> <div class="zhen seconds"></div> <!--中间的旋转点--> <div id="dotted"></div> </div> </body> </html>#clock{ width: 300px; height: 300px; border-radius: 50%; border: solid 10px gray; margin: 150px auto; /*clock的div作为所有其他子标签的父标签，必须要有一个有效定位*/ position: relative; } /*设置线条的公共部分*/ #clock .line{ width: 5px; height: 310px; background-color: gray; /*定位属性*/ position: absolute; left:50%; } /*设置线条的个性部分*/ .line2{ transform: rotate(30deg); } .line3{ transform: rotate(60deg); } .line4{ transform: rotate(90deg); } .line5{ transform: rotate(120deg); } .line6{ transform: rotate(150deg); } /*覆盖层*/ #cover{ position: absolute; width: 260px; height: 260px; border-radius: 50%; background-color: white; left: 20px; top: 20px; } /*设置针*/ #clock .zhen{ position: absolute; /*设置旋转点*/ transform-origin:center bottom; } /*秒针*/ #clock .seconds{ width: 2px; height: 130px; background-color: blue; top: 20px; left: 150px; /*动画*/ animation: circle 60s steps(60) infinite; } /*分针*/ #clock .minute{ width: 4px; height: 110px; background-color: cyan; top: 40px; left: 149px; /*动画*/ animation: circle 3600s infinite linear; } /*时针*/ #clock .hour{ width: 6px; height: 100px; background-color: red; top: 50px; left: 148px; /*动画*/ animation: circle 43200s infinite linear; } /*圆心*/ #dotted{ width: 20px; height: 20px; border-radius: 50%; background-color: gray; position: absolute; left:141px; top: 140px; } /*实现时分秒针的动画*/ @keyframes circle{ from{transform: rotate(0deg);} to{transform: rotate(360deg);} }
三、JavaScript简介
1.概念
出现在1995年，由网景【Netspace】公司和Sun公司联手开发的一门脚本语言，最初的名称Mocha
是基于对象和事件驱动的脚本语言，应用在客户端，简称为js
基于对象：js中提供好了一部分对象，可以不通过创建直接使用
事件驱动：html和css实现静态网页，js实现动态效果【和用户进行交互】
客户端：专门指的是浏览器
作用：操作html和css
2.特点
交互性：实现信息的动态交互
安全性：不可以直接访问本地磁盘上的文件
跨平台型：只要是能够解析js的浏览器都可以，和平台无关
3.javascript和java之间的关系
a.开发公司
js:网景【Netspace】公司和Sun公司
java:Sun公司
b.对象
js:基于对象
java:面向对象
c.数据类型
js:和Python类似，是弱类型的语言 var num = 10
java：强类型语言 int num = 10
d.运行
js:只需解析就可以执行
java：先编译【将代码编译为字节码文件】，后运行
4.js的组成
a.ECMAScript
ECMA:欧洲计算机协会，指定js的基本语法【变量，运算符，语句，函数等】
b.BOM
Broswer Object Model，浏览器对象模型
c.DOM【重点和难点】
Document Object Model:文档对象模型
5.js和html的结合方式
5.1内部结合方式
在script标签中书写js代码
注意：script可以写在head中，也可以写在body中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--script标签的特点： 1.在同一个html文件中，script标签可以出现多次 2.如果出现多个script标签，先加载head中，然后再加载body，按照从上往下的顺序执行 --> <script type="text/javascript"> // ctrl +/,单行注释 /* * ctrl+shift + / 多行注释 */ //函数，向页面弹出一个警告框 alert("hello") </script> <script type="text/javascript"> alert("hello~~~~~") </script> </head> <body> <script type="text/javascript"> alert("hello~~~1111") </script> <script type="text/javascript"> alert("hello~~~~2222") </script> </body> </html>
5.2外部结合方式
使用script标签，只是引入一个外部的js文件
alert("hello js")<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript" src="js/text01.js"> //注意：如果在script标签中引入了外部文件，则在该标签的内部将不能再书写js代码，否则无效 //alert("script标签的内部~~~1111") </script> <script type="text/javascript"> alert("script标签的内部~~~1111") </script> </body> </html>
四、ECMAScript
1.变量定义
使用var关键字 【varity】
注意：在书写js或者java代码的时候，在每条语句的后面会添加分号，但是，js中可以省略的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //1.先声明，后赋值 var age; age = 10; //2.可以在声明的同时赋值 var age1 = 18; //3.同时定义多个变量 var name = "zhangsan",age2 = 18; //4.js是弱类型的语言 //特点：容错性较高，在赋值的时候才能确定当前变量的数据类型 var b; //不确定类型 b = 19; //整型 b = "hello"; //字符串 </script> </body> </html>
2.命名规范
a由字母，数字和下划线以及美元符组成
b.和Python完全相同【驼峰命名法】
3.js的数据类型
Python的数据类型：数字型，字符串型，布尔型，列表，元组，字典，集合，函数和类
js的数据类型：
一般数据类型：
Boolean，Number，String，Array【数组】，Object【对象】，函数
特殊数据类型：
Null，空，相当于Python中的None
Undefined：定义一个变量，但是未给该变量赋值
NaN:Not a Number,不是一个数字
4.运算符
4.1算术运算符
++ –
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //基本用法 //作用：将变量自增或者自减1 var n1 = 2; // n1 = n1 + 1; var r1 = ++n1; document.write(n1); document.write("<br />"); document.write(r1); document.write("<br />"); var n1 = 2; // n1 = n1 + 1; var r1 = n1++; document.write(n1); document.write("<br />"); document.write(r1); //2 document.write("<br />"); //结论：如果++出现在变量的前面，则先递增1，然后再参与其他的运算； //如果++出现在变量的后面，则先用该变量原来的值参与运算，然后再递增1 //二 var n1 = 2; // n1 = n1 + 1; var r1 = ++n1 + 3; document.write(n1); //3 document.write("<br />"); document.write(r1); //6 document.write("<br />"); var n1 = 2; // n1 = n1 + 1; var r1 = n1++ + 3; document.write(n1); //3 document.write("<br />"); document.write(r1); //5 document.write("<br />"); //++或者--可以单独使用 var i = 10; i++; document.write(i); document.write("<br />"); //+：加法运算，拼接 //在Python中，只能是字符串和字符串之间进行拼接，如果字符串和其他类型的变量拼接，则报错 //结论：在js中，字符串可以和任意类型的变量进行拼接，得到的结果都是一个字符串 var v1 = "hello" + "js"; var v2 = "hello" + 19; var v3 = 18 + "hello"; var v4 = true + "abc"; var v5 = "abc" + false; document.write(v1); document.write("<br />"); document.write(v2); document.write("<br />"); document.write(v3); document.write("<br />"); document.write(v4); document.write("<br />"); document.write(v5); document.write("<br />"); document.write(typeof v3); </script> </body> </html>
4.2关系运算符【比较运算符】
和Python的用法完全相同
== 和 ===之间的区别
4.3逻辑运算符
Python：and or not
js：&& || ！
和Python的用法完全相同,注意短路原则
4.4赋值运算符
简单：=
复合：+= -= *= /= %=
4.5三目运算符【三元运算符】
格式：关系运算符？值1：值2
说明：
a.判断关系运算符是否成立，如果成立，则返回的值1，如果不成立，则返回的是值2
b.值1和值2可以是变量，常量，表达式，只要能够得到一个结果即可
c.实现了二选一的操作，类似于if-else语句
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //需求：判断一个数是否是偶数 /* *Python * num = 10 * if num % 2 == 0: * print("是") * else: * print("不是") * */ var num = 10; //常量 // var result = num % 2 == 0 ? "是" :"不是"; var result = num % 2 == 0 ? true :false; //变量 var r1 = true; var r2 = false; var result = num % 2 == 0 ? r1 :r2; //表达式 var result = num % 2 == 0 ? 3 != 5 :3 == 5; </script> </body> </html>