php赋值给js我的php进修第八天之javascript篇css兼容性

position：定位的类型，取值：static(静态)、fixed(固定)、relative(相对)、absolute(绝对)

定位的坐标：

Top：定位元素间隔上边的间隔

php赋值给js我的php进修第八天之javascript篇css兼容性 HTML

Bottom：定位元素间隔底边的间隔

Left：定位元素间隔左边的间隔

Right：定位元素间隔右边的间隔

如果只设置了定位类型，并没有指定定位的坐标，在它原来的地方(没有定位前)原封不动。

Fixed：固定定位：相对付浏览器窗口来进行定位

浏览器窗口，是一个固定大小的窗口，没有滚动条。

网页指<body>，每个网页的内容不一样，网页有滚动条。

特点：不占用空间，层级要高于普通元素，是一个块元素。

QQ浮动面板的构造图

2.CSS兼容性

在一个浏览器中效果正常，换到另一个浏览器就会发生错乱，这种征象叫“不兼容性”。
由于不同的浏览器对CSS代码的解析不一样造成的。
最随意马虎涌现兼容性问题的是：padding、margin、手形光标等。

兼容性，便是一种方法，利用该方法去调度网页去适应不同的浏览器。

通过以下三种方法来实现兼容性：

默认值设置(全局设置)

常用的不兼容的处理

CSS HACK

一样平常来说，涌现兼容性问题的浏览器是：IE6、IE7、IE8

火狐浏览器叫标准浏览器。

浏览器市场份额统计：http://tongji.baidu.com/data/browser

IE兼容性测试软件：IETEST

一、全局样式设置

（1）打消所有的标记的内外间隔

Body,ul,li,a,p,h2{margin:0px;padding:0px;}

（2）列表样式

ul,li{list-style:none;}

（3）网页中文今年夜小、颜色等设置

body{font-size:12px;color:#333;}

（4）标题样式

h1{padding:11px 0 0; margin-bottom:4px;font:normal 20px/30px 黑体;text-align:center;}

h2 { padding:6px 0 0; margin-bottom:4px; font:normal 20px/30px 黑体; text-align:center; }

h3{font-size:12px}

h4{font-size:12px;font-weight:normal}

（4）全局类样式

.font1{font-size:12px;}

.font2{font-size:14px;}

.clear{clear:both;}

.float1{float:left;}

.float2{float:right;}

#noline{border:none;}

.blank10{height:10px;clear:both;}

a:link,a:visited{color:#0000ff;text-decoration:none;}

a:hover{color:#ff0000;}

.red{color:#ff0000;}

.blue{color:#0000ff;}

……

二、常用兼容性的设置

1、实现网页绝对居中

在Firefox下居中用 margin:0px auto;

在IE下居中用 text-align:center;

body{

background:#F1F1F1 url(../images/bg-body.gif) repeat-x left top;

font-size:12px;

color:#444444;

text-align:center; /实现IE中主页居中/

}

ul,li{list-style:none;}

.box{

width:973px;

text-align:left; /BOX中的内容规复左对齐/

margin:0px auto;/Firefox居中/

}

2、单行文本高下居中（一样平常用于新闻标题）

.title{height:30px;line-height:30px;}

3、实现1px高的容器

Overflow：当内容超出容器时，该怎么处理。
取值：hidden(隐蔽)、auto(自动)、visible(可见)、scroll(滚动)

div{

height:1px;

background-color:#0033FF;

margin:50px;

overflow:hidden; /当内容溢出时，该如何处理：hidden(隐蔽)/

}

4、高下margin会合并，旁边margin会更加

高下margin合并的问题

当两高下的块元素，高下的两个margin会发生合并，取个中较大的一个。

办理办法：

高下两个元素，不要同时设置高下外边边，或者只设置个中一个。

通过一个空的<div>来隔开高下两个元素。

当两个加了旁边margin的元素进行浮动时，左边的margin会更加

办理方法：display:inline;

CSS HACK

针对不同浏览器书写CSS代码的过程，叫CSS HACK。
CSS HACK紧张针对IE浏览器。

（1）CSS属性的HACK（偶尔用一下）

：表示可以被IE6或IE7支持

_：表示只能被IE6支持

body{

margin:0px;

padding:0px;

background-color:#ff0000; /所有浏览器都支持/

background-color:#00FF00; /IE6和IE7都支持/

_background-color:#0000FF; /IE6支持/

}

（2）CSS选择器的HACK（基本上用不着）

+html .title{height:30px;} /针对IE7认识/

html .title{height:30px;} //IE6认识

+html body{background-color:#00ff00; /IE7支持/}

html body{ _background-color:#0000FF; /IE6支持/}

3. JavaScript是什么

（1）JavaScript是一种轻量级、面向工具、跨平台的客户端脚本措辞。

JavaScript是一种平台无关性的脚本措辞，只要安装了浏览器，JS集成到了浏览器中。

浏览器是一个阐明器(翻译器)，可以直接翻译HTML、CSS、JavaScript；

现实天下中所有的东西都可以算作一个工具，一个工具应具有属性和方法。
所谓“属性”就指某个工具具有什么特色。
比如：汽车是一个工具，汽车有颜色、什么牌子的汽车。
所谓的“方法”就工具能干什么？

JS只能运行在客户端浏览器，不能运行在做事器上；

JS的源代码是可见，但PHP做事器端脚本程序，源代码在发往到客户端后，源代码不可见；

JS根本班8天课

前3天，JS的根本部分

中间2天，JS的内置工具

后3天，DOM工具

（2）JavaScript是基于事宜和事宜驱动的脚本措辞（交互性的操作）

当鼠标放到滚动新闻上时，停滞滚动；当鼠标移出新闻模块时，开始滚动

事宜(条件)：鼠标放上，对就原事宜是onMouseOver

动作：停滞滚动，对应的JS代码是：stop();

4.JavaScript能做什么？

（1）表单客户端验证：是JS最基本的功能；

（2）动态的HTML(DHTML)；

（3）交互式的操作；比如：鼠标放上，停滞滚动

JavaScript的历史和发展

JavaScript最初叫LiveScript，是给Netscape(网景公司) Navigator浏览器设置的客户端脚本程序。
想借助于Java的盛行发展起来，因此改名为JavaScript。
以是，JavaScript和Java一点关系。

后台Microsoft公司把JavaScript引入到IE3.0中，因此没有授权，因此它的名称叫Jscript。

1994年，JavaScript被提升到了一个标准，ECMAScript-262标准。
JavaScript和JScipt都是ECMAScript-262标准下的一个详细的运用。

5.常用的两个客户端方法

document.write(str)在网页中输出一个字符串

解释：

document代表当前文档(网页)，是一个文档工具；

document工具具有很多的属性和方法；

write( )是document工具的一个输出的方法；

write( )输出的内容必须放在引号中；比如：document.write(大家好)

方法和属性的紧张差异是：方法名后带括号，属性不带。

举例：document.write(“大家好”)

window.alert( str )：在浏览器窗口中，弹出一个警告对话框

解释：

window代表当前浏览器窗口；

window工具具有很多的属性和方法；

alert( )是window工具的一个方法，功能是“弹出一个警告对话框”

str表示输出的内容，该内容必须是加引号的字符串；

举例：window.alert(“Welcome To GuangZhou”)

6.HTML文件引入JavaScript的方法

（1）嵌入式

通过<script type=“text/javascript”></script>来书写JS代码；

这个<script>标记可以放在任何地方；

这种办法不能被多个网页共享JS代码。

document.write(\"大众我是由document工具的write方法输出来的！
\"大众);

window.alert(\"大众嘿嘿，我是弹出来！
\"大众);

</script>

（2）外链式

格式：<script src=“js/public.js” type=“text/javascript”></script>

解释：

JS文件的扩展名是.js

这种办法可以实现多个网页共享同一个JS文件代码。

为什么网页背景没有改变？

<head>

<title>无标题文档</title>

</head>

JS文件的内容是：

document.body.bgColor = \"大众#990000\公众;

document.title = \公众HTML文件引入JS的方法\公众;

缘故原由：

（1）网页的实行顺序是：从上往下一行一行代码实行；

（2）<body>标记必须先出来，才能给其加bgColor属性；

（3）行内式：写到HTML元素中的JS代码

举例：<img src=\"大众images/img08.jpg\"大众 width=\公众300\公众 onclick=\"大众javascript:window.alert('讨厌！
')\"大众 />

解释：

HTML标记与事宜进行绑定，当事宜发生时，干什么；

当单击图片时，弹出一个警告对话框；

onclick便是一个事宜，含义：当鼠标点击时；

onMouseOver当鼠标放上时；

7.变量

现在天下中有很多的数据：身高、体重、年事、学历、人为、奖金、姓名；

打算机便是来处理、存储现实数据的工具；

打算机中用一种叫“变量”的符号来表示数据；比如：name、height、age、salary、bonus、edu

变量便是一种代号，好比宾馆的“房间号”，至于“房间”中住什么人，相称于变量中存储什么样的数据；

Name=“张三”

Name=“李四”

Name=“王五”

变量是一种变革的量，也便是说，个中的内容在不断的变革；

变量是存在内存中的，变量是在内存中运行的；内存是存储变量的临时区域；

内存是由N多个小格子构成的，每个“小格子”都可以用来存储一个“变量”，网页一旦运行完毕，变量就从内存中消逝了，因此，“小格子”内存永久够你用。

1、声明变量、定义变量

声明变量，利用关键字var

举例：var name; //在内存中开僻一个空间，这个空间叫name

同时声明多个变量：var name,sex,age,edu,city; //同时开僻多个房间，各个变量间用逗号隔开

2、变量名称的命名规则

1）变量名称可以包含a-z、A-Z、0-9、_(下划线)字符；

2）变量名称必须以字母或下划线开头；

缺点：90az

精确：a90、_getObjectName、name

3）变量名称不能是关键字

If 、else switch for break continue case while等

4）多个单词的变量名称的命名

“驼峰式”命名：getUserName、getUserPass

“下划线”命名：get_user_name、 get_user_pass

8.3、给变量赋值

格式：变量名=变量值

把稳：“=”不是即是的意思，而是将“=”右边的值赋给左边的变量

“＝”左边只能是一个变量名称，而不能一个打算表达式。
比如：nameage = 3000+450

举例：name=“张三”

//（1）声明变量

var name,sex,age, str;

name = \"大众周重生\"大众;

sex = true;

age = 20;

//（2）构建输出的字符串

str = name + \"大众的年事是\公众 + age + \"大众岁\"大众;

//（3）在网页中输出结果

document.write(str);

9.变量的数据类型

JS中变量的数据类型分两大类：

（1）基本数据类型：每个一个基本数据类型的变量，只能存储一个值

String(字符型)、boolean(布尔型)、number(数值型)、undefined(未定义)、null(空型)

（2）复合数据类型：复合数据类型的变量，至少存储一个值

Array(数组)、object(工具)、function(函数)

数值型数据

包含整型和浮点型(小数)。

JS的数值数据有一个分外的数值NaN(Not a number)不是一个数字。
一样平常用在，逼迫将其它数据类型转成数值时，转不过去时，将返回NaN。

举例：

A = 120;

A = 120.45;

A = -120;

A = .3; //相称于0.3

A = NaN;

A = 100 + 200;

//（1）逼迫将一个字符串转成数值型

var str = \公众234abc\公众;

var num = Number(str); //Number()是将一个字符逼迫转成数值

document.write(num);

字符型数据类型

字符型数据是指加了单引号或双引号的字符串。

字符型数据，内外引号要担保不一致；比如str=“PHP’根本班’学习体系”

双引号内，如果要输出双引号，请利用转义字符()：

//（2）双引号内嵌套双引号

var str = \"大众<h1>PHP\公众根本班\公众课程体系</h1>\"大众;

document.write(str);

单引号内，如果要输出单引号，请利用转义字符()

//（2）双引号内嵌套双引号

var str = \"大众<h1>PHP'根本班'课程体系</h1>\"大众;

document.write(str);

布尔型数据类型

布尔型，便是真或假，是与否。
布尔型只有两个值：true或false

举例：

Sex = true;

Sex = false;

//构建输出的结果

str = \公众<h2>\公众+name+\公众的基本资料如下</h2>\公众;

str += \"大众姓名：\公众+name+\"大众<br />\"大众;

str += \"大众性别：\"大众+sex+\公众<br />\公众;

str += \"大众年事：\"大众+age;

document.write(str);

“+”的含义有两层：

（1）如果“+”的旁边都是数值时，实行“加法”运算

Var a = 10;

Var b = 20;

Var c = a + b; //30

（2）如果“+”的旁边个中有一个是字符串，则实行“连接”运算

Var a = 10;

Var b = “abc”;

Var c = a + b; //c = “10abc”

“+=”的含义

Var a = 10;

Var b = “abc”

b += a; //表示：b = b + a

php赋值给js我的php进修第八天之javascript篇css兼容性

泪眸人作者

调试jsp显示端口被占用JAVA WEB快速编写一个JSP WEB网站懂得网站的根本构造调试安排

记事本中运行jsp微信小法式记事本后台治理体系

php赋值给js我的php进修第八天之javascript篇css兼容性

泪眸人作者

调试jsp显示端口被占用JAVA WEB快速编写一个JSP WEB网站懂得网站的根本构造 调试 安排

记事本中运行jsp微信小法式记事本后台治理体系

猜你喜欢

调试jsp显示端口被占用JAVA WEB快速编写一个JSP WEB网站懂得网站的根本构造调试安排