CSS

 

　　1、css概述

 

　　* Cascading Style Sheets：层叠样式表

 

　　** 层叠：一层一层（优先级，最终以哪个样式为准）

 

　　** 样式表：很多的属性和属性值

 

　　* 增强页面的显示效果

 

　　2、css和html的结合方式

 

　　（1）每个html标签都有一个属性 style，在style里面设置样式

 

　　*

 

　　天之道，损有余而补不足，是故虚胜实，不足胜有余。

 

　　* 格式 style=”属性名1:属性值1;属性名2:属性值2”

 

　　（2）使用html的一个标签

 

　　* 一般style标签写在头标签里面

 

　　* div {

 

　　background-color:black;

 

　　color:white;

 

　　}

 

　　* 应用场景：只是在一个页面设置这个样式，其他页面设置其他的样式

 

　　3、css的基本选择器

 

　　* 在哪个标签上设置样式

 

　　（1）标签选择器

 

　　* 使用标签名作为选择器

 

　　* p {

 

　　background-color:green;

 

　　}

 

　　（2）class选择器

 

　　* 每个html标签都有一个属性class

 

　　* .haha {

 

　　background-color:red;

 

　　color:green;

 

　　}

 

　　4、css的扩展选择器

 

　　（1）关联选择器(设置嵌套标签里面的样式)

 

　　*

 

　　aaaaa

 

　　*

 

　　bbbbb

 

　　** 设置div里面的p标签里面的内容

 

　　5、CSS的盒子模型

 

　　* 要进行布局，首先要把数据封装到一块区域里面去（div）

 

　　* 边框 border : border-width || border-style || border-color

 

　　** 上下左右 border-top border-bottom border-left border-right

 

　　* 内边距：padding：length

 

　　** 有上下左右四个内边距

 

　　* 外边距 ：margin：length

 

　　** 有上下左右四个外边距

 

　　6、css的布局（漂浮）

 

　　* float属性:left right

 

　　7、案例：实现图文混排效果

 

　　8、css布局（定位）

 

　　* position：absolute relative

 

　　** absolute：将对象从文档流中拖出，使用 left ， right ， top ， bottom 进行定位

 

　　** relative: 不会把对象从文档流中拖出，使用 left ， right ， top ， bottom 进行定位

 

　　9、案例：图像签名（在图片上加文字）

 

　　1、javascript简介

 

　　* javascript是一个基于对象和事件驱动的语言，应用与客户端。

 

　　2、js与html结合方式 （两种）

 

　　1、 通过html标签

 

　　*

 

　　js代码

 

　　3、js的原始数据类型和变量声明

 

　　* js的注释

 

　　- 单行注释 //

 

　　- 多行注释

 

　　* 原始数据类型

 

　　* Boolean：布尔类型 true false

 

　　- var flag = true;

 

　　4、js的语句

 

　　* java里面语句

 

　　- 循环 for while do-while

 

　　- if() { } else {}

 

　　- switch() String类型在jdk1.7开始支持

 

　　* js里面的语句

 

　　- if else

 

　　* if(i == 3) {

 

　　5、案例：实现99乘法表

 

　　* document.write(“

 

　　“);

 

　　//循环行

 

　　for(var i=1;i<=9;i++) {

 

　　document.write(““);

 

　　//循环列

 

　　for(var j=1;j<=i;j++) {

 

　　document.write(““);

 

　　}

 

　　//增加换行

 

　　//document.write(“

 

　　”);

 

　　document.write(““);

 

　　}

 

　　document.write(“

 

　　“);

 

　　document.write(j+”*”+i+”=”+i*j+”?”);

 

　　document.write(““);

 

　　6、js的运算符

 

　　* i++ ++i

 

　　* js的字符串的加减操作

 

　　- var str = “123”;

 

　　- document.write(str+7);//字符串拼接 = 1237

 

　　- document.write(str-1);//做相减操作 = 122

 

　　7、js的数组

 

　　* 存很多值

 

　　** java里面定义数组 int[] arr = {1,2,”3”};不正确

 

　　8、js的函数（方法）

 

　　* java里面定义方法

 

　　- public void/int 方法名(参数列表) {

 

　　方法体;

 

　　返回值;

 

　　}

 

　　9、js的全局变量和局部变量

 

　　* 全局变量：在script里面定义的一个变量，这个变量在页面中都有效

 

　　* 局部变量：在方法内部定义一个变量，这个变量只能在方法内部使用