最新消息:

我的php学习第八天之javascript篇:css兼容性

PHP zhongweiziliudi 169浏览 0评论

1.昨日回顾

CSS定位

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

定位的坐标:

Top:定位元素距离上边的距离

Bottom:定位元素距离底边的距离

Left:定位元素距离左边的距离

Right:定位元素距离右边的距离

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

Fixed:固定定位:相对于浏览器窗口来进行定位

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

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

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

QQ浮动面板的结构图

我的php学习第八天之javascript篇:css兼容性

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(滚动)

我的php学习第八天之javascript篇:css兼容性

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代码。

<script type=”text/javascript”>

document.write(“我是由document对象的write方法输出来的!”);

window.alert(“嘿嘿,我是弹出来!”);

</script>

(2)外链式

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

说明:

JS文件的扩展名是.js

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

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

<head>

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

<script type=”text/javascript” src=”js/public.js”></script>

</head>

<body></body>

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多个小格子构成的,每个“小格子”都可以用来存储一个“变量”,网页一旦运行完毕,变量就从内存中消失了,因此,“小格子”内存永远够你用。

我的php学习第八天之javascript篇:css兼容性

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学习 » 我的php学习第八天之javascript篇:css兼容性

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址