一、css的常用属性（2）
1.定位属性
1.1基础使用
position：设置元素的位置，
absolute：绝对定位，参照父标签或者先辈标签设置有效定位，通过left，top，right，bottom设置有效定位【类似于坐标轴，至少需要其中的两个值可以确定一个标签的位置】
参照物：如果给一个元素设置位置，则查看该标签的父标签是否设置有效定位，如果有，则以父标签作为参照物；如果没有设置，则查找所有的先辈标签，如果所有先辈标签没有设置，则以body作为参照物【设置了绝对定位，该标签对象会从流中拖出，会脱离流，不会保留原来的位置】
relative：相对定位，通过left，top，right，bottom设置有效定位
参照物：该标签自身原来的位置【设置了相对定位，该标签对象不会脱离流，会保留原来的位置】
fixed：固定定位
参照物：窗体【脱离流】
使用场景：一般应用在广告中
注意：left，top，right，bottom可以是正数，也可以是负数
z-index:设置元素的优先级
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body{ height: 9999px; background: red; } .abs{ position: absolute; left: 100px; top: 100px; } </style> </head> <body> <h2 class="abs">标题</h2> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .rel1{ position: relative; left: -20px; } .rel2{ position: relative; left: 20px; } </style> </head> <body> <h2>标题标题标题标题标题</h2> <h2 class="rel1">标题标题标题标题标题</h2> <h2 class="rel2">标题标题标题标题标题</h2> <!-- 总结： 绝对路径：参照物为父标签 相对路径：参照物为自身原来默认的位置 --> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ height: 9999px; } p{ position: fixed; left: 100px; top: 50px; } </style> </head> <body> <p>文本问呢不能</p> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> img{ width: 300px; height: 300px; position: absolute; left: 0px; top: 0px; /*根据z-index的值决定哪个元素显示在最上层 * z-index使用的前提：必须先设置pisition属性 * z-index的默认值为0，数值越大，则表示优先级越高，则显示最上层 */ z-index: -1; } </style> </head> <body> <h1>这是一个标题</h1> <img src="img/dog.jpg" /> </body> </html>
1.2百度首页
css文件
*{ padding: 0px; margin: 0px; } #head{ /*向右浮动*/ float: right; margin-top: 10px; } .headlink{ color: black; font-size: 12px; margin: 10px; } .more{ background-color: blue; color: white; text-decoration: none; font-size: 14px; } #middle{ /*清除浮动*/ /*清除浮动的目的：为了前面标签设置的浮动效果不要影响后面标签的坐标计算*/ clear: right; text-align: center; /*设置定位,参照物为父标签body*/ position: absolute; top: 50px; width: 100%; } #key{ width: 40%; height: 28px; } #btn{ width: 10%; height: 30px; background-color: blue; color: white; } #footer{ position: absolute; bottom: 10px; width: 100%; text-align: center; /*height: ;*/ } #p1{ font-size: 14px; } #footlink{ margin: 10px; } #footlink a{ color: gray; font-size: 12px; }html文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/baidustyle.css" /> </head> <body> <!--上面--> <div id="head"> <!--同一个类选择器可以同时作用于多个标签--> <a href="#" class="headlink">新闻</a> <a href="#" class="headlink">新闻</a> <a href="#" class="headlink">新闻</a> <a href="#" class="headlink">新闻</a> <a href="#" class="headlink">新闻</a> <a href="#" class="headlink">新闻</a> <a href="#" class="headlink">新闻</a> <a href="#" class="headlink">新闻</a> <a href="#" class="more">更多产品</a> </div> <!--中间--> <div id="middle"> <img src="http://www.baidu.com/img/bd_logo1.png" /> <div id="sub"> <form action="#" method="get"> <input type="text" name="kw" id="key" /> <!--<input type="button" value="百度一下" />--> <button id="btn">百度一下</button> </form> </div> </div> <!--下面--> <div id="footer"> <!--二维码--> <div> <img src="img/二维码.png" /> <p id="p1">手机百度</p> </div> <!--底部文字--> <div id="footlink"> <a href="#">新闻</a> <a href="#">新闻</a> <a href="#">新闻</a> <a href="#">新闻</a> <br /> <a href="#">新闻</a> <a href="#">新闻</a> <a href="#">新闻</a> </div> </div> </body> </html>
2.过渡和形变属性
2.1基础使用
形变：transform，可以设置标签的放大或者缩小，旋转角度
过渡：transition，结合其他属性使用，一般应用在动画中，主要是为了声明使用动画的是哪个属性
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width: 300px; height: 200px; background-color: orange; margin: 100px; /*设置旋转点*/ /*left right top bottom center*/ transform-origin: center bottom; /*设置形变*/ /*1.设置旋转*/ /*默认沿着z轴旋转 * rotate() * rotateX() * rotateY() * rotateZ() * * xxxdeg * 正数：顺时针，负数：逆时针 */ /*transform: rotate(-30deg);*/ /*2.设置缩放*/ /*scale（） * scaleX（） * scaleY() * * 0~1之间：缩小 * 大于1：放大 */ /*transform: scaleY(1.5);*/ /*3.设置旋转和缩放*/ transform: scale(2) rotate(75deg); } </style> </head> <body> <div id="box">演示形变</div> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 300px; height: 200px; background-color: orange; margin: 100px; /*过渡：当一个标签的某些属性发生改变的时候，设置改变的时间和属性*/ /*添加过渡确定两点*/ /*1.发生过渡需要的时间*/ transition-duration: 10s; /*2.哪个属性的值需要过渡，all表示所有属性*/ transition-property: all; } div:hover{ background-color: yellow; transform: rotate(90deg); font-size: 30px; } </style> </head> <body> <div>过渡</div> </body> </html>
2.2照片墙
css文件
#box{ width: 100%; height: 900px; /*auto表示自适应*/ margin: 100px auto; background-color: orange; } /*设置图片的公共部分*/ img{ width: 160px; height: 200px; border: 1px solid white; margin: 15px; transition-duration: 2s; transition-property: transform; } /*设置鼠标悬浮*/ #box > img:hover{ transform: scale(1.2) rotate(0deg); } /*设置每张图片的旋转角度*/ div img:nth-child(1){ transform:rotate(15deg) } div img:nth-child(2){ transform:rotate(-15deg) } div img:nth-child(3){ transform:rotate(10deg) } div img:nth-child(4){ transform:rotate(35deg) } div img:nth-child(5){ transform:rotate(5deg) } div img:nth-child(6){ transform:rotate(-15deg) } div img:nth-child(7){ transform:rotate(-5deg) } div img:nth-child(8){ transform:rotate(30deg) } div img:nth-child(9){ transform:rotate(-45deg) }html文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/photostyle.css" /> </head> <body> <div id="box"> <img src="img/photowall/pic1.jpg" /> <img src="img/photowall/pic2.jpg" /> <img src="img/photowall/pic3.jpg" /> <img src="img/photowall/pic4.jpg" /> <img src="img/photowall/pic5.jpg" /> <img src="img/photowall/pic6.jpg" /> <img src="img/photowall/pic7.jpg" /> <img src="img/photowall/pic8.jpg" /> <img src="img/photowall/pic9.jpg" /> </div> </body> </html>
3.动画属性
animation:设置动画
3.1基础使用
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 300px; height: 200px; background-color: orange; /*设置动画 * 1.动画的名字，自定义的 * 2.动画执行一次需要的时间 * 3.动画需要执行的次数 ，默认为1次，无限次：infinite * 4.动画的形式 * 线性动画：linear * 由快到慢：ease * */ animation:customAnimate 5s linear infinite; } /*制作动画*/ @keyframes customAnimate{ /*from{background-color: cyan;} to{background-color: red;}*/ /* * from{起始属性操作}------》%0 * to{最终属性操作}-------》100% */ 0%{ background-color: blue; } 20%{ transform: rotate(30deg); } 40%{ font-size: 30px; } 60%{ color: white; } 80%{ margin: 100px; } 100%{ background-color: cyan; } } </style> </head> <body> <div>动画</div> </body> </html>
3.3时钟
css文件
#clock{ width: 300px; height: 300px; border: solid 10px gray; border-radius: 50%; margin: 150px auto; /*设置有效定位：子标签【针，圆点，刻度】可以随着div的移动而移动*/ position: relative; } /*刻度*/ #clock .line{ width: 5px; height:310px; /*设置定位*/ position: absolute; /*left: ;*/ background-color: gray; 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 .hour{ width:6px; height:100px; background-color: purple; top:50px; left:149px ; animation: circle 43200s linear infinite; } /*设置分针*/ #clock .minute{ width:4px; height:120px; background-color: blue; top:30px; left:150px; animation: circle 3600s linear infinite; } /*设置秒针*/ #clock .seconds{ width:2px; height:140px; background-color: red; top:10px; left:152px ; /* steps(60)相当于linear*/ animation: circle 60s steps(60) infinite; } @keyframes circle{ from{transform: rotate(0deg);} to{transform: rotate(360deg);} } /*覆盖层*/ #dotted{ width: 20px; height: 20px; background-color: gray; border-radius: 50%; position: absolute; left: 140px; top:140px; }html文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/clockstyle.css" /> </head> <body> <div id="clock"> <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> <div class="zhen hour"></div> <div class="zhen minute"></div> <div class="zhen seconds"></div> <div id="dotted"></div> </div> </body> </html>
二、Javascript简介
1.概念
Javascript诞生于1995年，网景公司和Sun公司【发布了Java】，是一门脚本语言，Mocha
是基于对象和事件驱动的脚本语言，应用在客户端，简称js
基于对象：提供了很多的对象，可以直接使用
事件驱动：html结合css实现静态网页，js可以实现和用户之间的交互
客户端：主要指的是浏览器
作用：操作html和css
2.js的特点
交互性：实现和用户之间的信息交互
安全性：不可以直接访问本地磁盘上的文件
跨平台型：只要是解析js的浏览器都可以执行，与平台无关
3.和Java之间的关系
没有任何关系，是两门完全独立的编程语言
a.开发公司
java:Sun
js:网景公司和Sun公司
b.对象
java：面向对象
js:基于对象
c.数据类型
java是强类型语言【每个变量都有确定的数据类型】，举例：int num = 10 string str = “hello”
js是弱类型语言【变量的类型由值决定，与Python类似】
Python：num = 10 str = “hello”
js:var num = 10 var str = “hello”
4.js的组成部分
a.ECMAScript
ECMA:欧洲计算机协会，组织制定js的语法【变量，表达式，语句，函数。。。】
b.BOM
Broswer Object Model,浏览器对象模型
c.DOM
Document Object Model,文档对象模型
5.js和html的结合方式
5.1内部结合方式
注意：script标签可以在head中，也可以在body中
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 注意：script标签可以在head中，也可以在body中 但是，如果需要在js代码中操作某个html标签，最好能将script添加到body中 以防在head获取不到相应的内容 --> <script type="text/javascript"> alert("hello world~~~~1111"); </script> </head> <body> <script type="text/javascript"> //向页面弹出一个提示框【ctrl + /】 alert("hello world~~~~2222"); /* * 多行注释 【ctrl + shift + /】 */ </script> </body> </html>
5.2引入外部js文件
仍然使用script标签
语法：
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/text01.js"></script> <!--注意：如果采用了外部引入的方式引入了js文件，则在script标签中将不能再书写js代码，不生效 alert("内部的js代码")--> <!-- 先执行head，然后执行 body 如果出现多个script标签，则从head中开始从上往下依次执行 --> <script type="text/javascript"> alert("javascript~~~111") </script> <script type="text/javascript"> alert("javascript~~~222") </script> </head> <body> <script type="text/javascript"> alert("javascript~~~333") </script> <script type="text/javascript"> alert("javascript~~~444") </script> </body> </html>
三、ECMAScript基本语法
1.变量定义
使用var关键字
注意：书写js代码最好能在每条语句 的后面添加一个分号
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //1.先声明，后定义 var age; age = 10; // alert(age); document.write(age); document.write("<br />"); //2.可以在声明的同时定义变量 var num1 = 10; document.write(num1); //3.同时定义多个变量 //不同的变量之间使用逗号隔开，var只需要出现一次 var name = "abc",num2 = 26,num3 = 37; //4.js是弱类型语言，容错性较高 var b; b = "fhaj"; //给变量重新赋值 b = 10; </script> </body> </html>
2.命名规范
a.变量名可以是数字，字母，下划线，和美元符$组成
b.不能以数字开头
c.不能使用关键字
d.区分大小写
e.遵循驼峰命名法
f.不要使用空格
3.数据类型
Python：数字型，字符串，布尔型，list，tuple。dict，set，函数，类
js：
一般类型：Boolean，Number，String，Array数组，Object对象，Function函数，RegExp正则表达式
特殊类型：
Null:是一个只有一个值的特殊数据类型，就是null，它表示当一个引用指向为空时，通过typeof操作符检测的结果返回object
Undefined:定义一个变量，但是该变量没有初始值
NaN:Not a Number
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> var s1 = "hello"; var num1 = 10; //true和false为小写 var b1 = true; //typeof操作符可以判断一个变量的数据类型 // document.write(typeof num1); document.write(typeof(num1)); //1.Null var n1 = null; document.write(typeof n1); //2.undefined //注意：最好声明变量的同时赋初始值 var u1; document.write(u1); document.write("<br />"); //注意：undefined派生自null，表示值是相同的 document.write(undefined == null); //true document.write("<br />"); document.write(typeof n1); document.write("<br />"); document.write(typeof u1); //3.NaN var num1 = 0 / 0; document.write(num1); document.write("<br />"); //isNaN():判断一个数据是不是NaN,是number返回false，如果不是返回true //isNaN:当接收一个数据的时候，会尝试将该数据转换为number，如果转换失败，则返回true，成功返回false document.write(isNaN("123")); document.write("<br />"); document.write(isNaN("abc123")); document.write("<br />"); document.write(isNaN(123)); document.write("<br />"); //在js中，true代表是1，false代表是0 document.write(isNaN(true)); </script> </body> </html>
4.运算符
4.1算术运算符
+ - * / % ++ ：自增运算符 --：自减运算符代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //基本用法 //++ ：自增运算符，可以写在变量的前面或者后面，让变量自身递增1 var n1 = 2; var r1 = ++n1; document.write(n1); document.write("<br />"); document.write(r1); document.write("<br />"); var n2 = 2; var r2 = n2++; document.write(n2); document.write("<br />"); document.write(r2); document.write("<br />"); //++出现在变量的前面：先递增1，然后再使用该变量 //++出现在变量的后面，先使用变量原来的值，然后再递增1 //不管++出现在变量的前面还是后面，对于变量本身而言，相当num = num +1 //进阶用法：参与运算 var n1 = 2; var r1 = ++n1 + 3; document.write(n1); document.write("<br />"); document.write(r1); document.write("<br />"); var n2 = 2; var r2 = n2++ + 3; document.write(n2); document.write("<br />"); document.write(r2); document.write("<br />"); //--：自减运算符 //变量++ 变量-- ；可以单独称为一条语句 var num1 = 10; //num1++; num1 = num1 + 1; document.write(num1); document.write("<br />"); //+:拼接 //在js中，字符串和任意类型的数据通过+运算，都表示拼接，结果都是字符串 document.write("123" + 10); document.write("<br />"); document.write("123" + "hfaj"); document.write("<br />"); document.write("123" + true); document.write("<br />"); document.write("123" + null); document.write("<br />"); document.write("123" + undefined); document.write("<br />"); document.write(123 + "567"); document.write("<br />"); </script> </body> </html>
4.2关系运算符
注意：
a.和Python中的符号完全相同
b.应用在if语句，循环语句中
c.最终结果都是布尔值
d.两个字符串比较，则比较的是字符串的编码值
e.如果两个变量一个是数字，一个是字符串，则尝试将其中的字符串转换为number然后再比较
4.3逻辑运算符
Python：and or not
js:&& || !
规律和Python中完全相同
仍然存在短路原则
4.4三目【三元】运算符
格式：关系运算符？值1：值2；
工作原理：首先判断关系运算符是否成立，如果成立，则返回值1，如果不成立，则返回值2
注意：
a.值1和值2可以是表达式，可以是常量，可以是变量
b.作用：实现了二选一的操作，类似于if-else语句
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //需求：判断一个数是否是偶数 /* if num % 2 == 0: 偶数 else: 奇数 * * * if(num % 2 == 0): //偶数 else: //奇数 * */ var num = 10; //常量 var result = num % 2 == 0 ? "偶数":"奇数"; document.write(result); var result = num % 2 == 0 ? true:false; document.write(result); //变量 n1 = true; n2 = false; var result = num % 2 == 0 ? n1:n2; document.write(result); //表达式 var result = num % 2 == 0 ? 3 != 5:3 == 5; document.write(result); </script> </body> </html>
4.5赋值运算符
和Python中完全相同
扫一扫
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
