您的位置:首页 > Web前端 > JavaScript

css的常用属性(2)+Javascript简介+ECMAScript基本语法

2019-03-24 20:17 465 查看

一、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中完全相同

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: