第2章WEB02-CSS&JS篇
本文共 11470 字，大约阅读时间需要 38 分钟。
今日任务
Ø 使用CSS完成网站首页的美化Ø 使用CSS完成网站注册页面的美化Ø 使用JS完成简单的数据校验Ø 使用JS完成图片轮播效果教学导航教学目标了解CSS的概念了解CSS的引入方式了解CSS的基本语法和常用的选择器了解CSS的盒子模型,悬浮和定位.了解JS的概念掌握JS的基本语法,数据类型,能够使用JS完成简单的页面交互.教学方法案例驱动法1.1 上次课的内容回顾：HTML:* HTML的概述： * HTML：Hyper Text Markup Language. * HTML就是由一组标签所组成的.* HTML的字体标签: * 标签: * 属性：color,size,face* HTML的排版标签: * h标签：标题标签. * p标签：段落标签. * b标签：加粗标签. * i标签：斜体标签. * u标签：下划线标签. * br标签：换行. * hr标签：水平线.* HTML的图片标签: * img标签: * 属性: * src属性:图片的路径. * 相对路径: ./ 代表当前目录 ../上一级目录 * width,height,alt.* HTML的超链接标签: * a标签: * 属性： * href:链接的路径. * target:链接打开的方式. _self,_blank,_parent* HTML的列表标签: * 无序列表:* 有序列表:
* HTML的表格标签： * table标签: * tr标签：表格的行. * td标签：表格的列.* HTML的表单标签：（*****） * form标签： * action属性：表单提交的路径 * method属性：表单的提交的方式. * GET和POST： * GET：地址栏上会显示提交的数据的信息,大小限制. * POST：地址栏不会显示提交的数据的信息,没有大小限制. * * type=”text”:文本框 * type=”password”:密码框. * type=”radio”:单选按钮. * type=”checkbox”:复选框. * type=”file”:文件上传. * type=”hidden”:隐藏字段. * type=”submit”：提交按钮. * type=”reset”:重置按钮. * type=”button”:普通按钮. * type=”image”:图片按钮. * *
1.2 案例一：使用DIV+CSS方式重新布局网站的首页.
1.2.1 需求：网站首页的设计：采用DIV+CSS的方式完成.
:默认一个div独占一行. :默认在同一行.
【CSS的概述】
Ø 什么是CSS:
- HTML相当于网站的骨架！CSS对骨架进行美化！
Ø CSS在那些地方使用：
任何网站都会使用CSS去美化页面！！！Ø 如何使用CSS
知道CSS的语法.【CSS的基本语法】
CSS的基本语法通常包含两个部分：一个是选择器，一个声明.-
选择器{属性:属性值;属性:属性值...}
【CSS的引入的方式】Ø 行内样式：直接在HTML的元素上使用style属性设置CSS.<h1 style="color:red;font-size:200px ;">标题</h1>
Ø 页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.
<style>h1{ color:blue;font-size: 40px;}</style>Ø 外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />【CSS的选择器】
Ø 元素选择器：div{ border:1px solid blue;width:40px;height:45px;}Ø ID选择器:#d1{ border:2px solid red;}Ø 类选择器：.divClass{ border:2px solid yellow;}【CSS的浮动】
Ø 使用float属性可以完成DIV的浮动.
Ø 案例：
1.2.2.2 步骤分析:
【步骤一】创建一个首页的HTML文件【步骤二】创建一个整体的DIV元素.【步骤三】创建每个部分的DIV元素.【步骤四】为每个部分填充属于自己的那块内容.1.2.3 代码实现:首页
1.2.4 总结：
【CSS的其他选择器】Ø 属性选择器：<style>input[type="text"]{ background-color: red;}</style>Ø 后代选择器:
div span 查找的是所有div中的所有的span元素.h1 strong{ color:red;}<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>This is very really very important.
Ø 子元素选择器：
div > span找这个div中的第一层级的span元素.h1 > strong{ color:red;}<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>This is very really very important.
Ø 并列选择器:
选择器,选择器{ }【CSS的样式】
Ø 背景
Ø 文本
1.3.2 分析:1.3.2.1 技术分析：【CSS中的盒子模型】 
Ø 边框：border Ø 外边距：margin
- relative:相对定位
- absolute:绝对定位使用另外两个属性:left,top
1.3.2.2 步骤分析：
【步骤一】创建一个html页面【步骤二】创建一个整体的DIV【步骤三】在整体DIV中创建5个DIV.【步骤四】为每个DIV添加所属的内容.1.3.3 代码实现:注册页面
1.3.4 总结：
1.3.4.1 超链接的伪类
1.4.2 分析:1.4.2.1 技术分析:
【JS的概述】Ø 什么是JavaScript：运行在浏览器端的脚本语言!
- Java
- int i = 3;
- String s = “abc”;
- JavaScript:
- var i = 3;
- var s = “abc”;Ø 分号可有可无：
Ø 变量命名：
-
原始类型：
- undefined：未定义类型
- boolean:布尔类型
- number:数字类型
- string:字符或字符串.
- null：空
- 引用类型：
- 对象类型.对象类型默认值是null.
【JS的运算符】
JS中的运算符与Java中基本一致！JS中有一个 === 全等于.全等于是类型和值都一致的情况下才为true.【JS的语句】
JS中的语句与Java的语句一致！【JS的通常开发的步骤】
JS通常都由一个事件触发.触发一个函数,定义一个函数.获得操作对象的控制权.修改要操作的对象的属性或值.定义函数:
-
function 函数名称(){
// 函数体} - window.onload = function(){
}
常用事件：onclick,ondblclick,onmouseover,onmouseout,onload...【JS的引入方式】
通常两种方式：一种：页面内直接编写JS代码,JS代码需要使用<script></script>.二种：将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.1.4.3 代码实现：
1.4.4 总结:
将JS的代码定义成一个文件引入:<script src="../js/check.js"></script>获得页面中的元素:
- document.getElementById(“”);
正则的匹配:
JS中有两种匹配正则的方式:- 使用String对象中的match方法.
- 使用正则对象中的test方法.
1.5 案例四：使用JS完成图片滚动的效果:
1.5.1 需求:
使用JS完成该效果：
1.5.2 分析:
1.5.2.1 技术分析:【HTML的window对象】-
setInterval(); :每隔多少毫秒执行某个表达式.
- setInterval(“change()”,5000);
- setTimeout(); :隔多少毫秒执行一个该表达式.
- setTimeout(“change()”,5000);
转载于:https://blog.51cto.com/13587708/2092300
你可能感兴趣的文章
【打CF，学算法——二星级】Codeforces Round #312 (Div. 2) A Lala Land and Apple Trees
查看>>
2017-4-17 类库 委托 通用变量 is和as
查看>>
SQL数据库面试题以及答案
查看>>
软工实践第五次作业-爬虫和自定义词频统计
查看>>
关于WCF访问跨越站点获取文件路径的AppDomain方法区别与HttpContext
查看>>
常见浏览器兼容问题
查看>>
MQTT通配符
查看>>
java获取Linux持续运行时间及友好显示
查看>>
29.怎样扩展现有类功能？
查看>>
iOS安装包瘦身的那些事儿
查看>>
UML类图新手入门级介绍
查看>>
poj 2104: K-th Number 【主席树】
查看>>
回首过去，抚心自问，是什么“毁了”你的大学生活？
查看>>
matlab练习程序（全景图到穹顶图）
查看>>
springboot 多数据源之错误 HikariPool-1 - jdbcUrl is required with driverClassName.
查看>>
windows与OS X下的std::string
查看>>
#include"*.c" 文件问题
查看>>
python初探-copy
查看>>
从C# 3.0说以人为本（一）—— 编译器的支持
查看>>
html5 <script>
查看>>