摘要：今日目标使用完成网站首页的优化使用完成网站注册页面的优化使用完成简单的数据校验使用完成图片轮播效果教学目标了解的概念了解的引入方式了解的基本用法和常用的选择器了解的盒子模型，悬浮和定位了解的概念掌握的基本语法，数据类型，能够使用完成简单的页
今日目标 使用CSS完成网站首页的优化 使用CSS完成网站注册页面的优化 使用JS完成简单的数据校验 使用JS完成图片轮播效果 教学目标：
了解CSS的概念
了解CSS的引入方式
了解CSS的基本用法和常用的选择器
了解CSS的盒子模型，悬浮和定位
了解JS的概念
掌握JS的基本语法，数据类型，能够使用JS完成简单的页面交互
去年的内容简单回顾
什么HTML : 超文本标记语言
p标签: 段落标签
br标签: 简单换行
h1-h6: 标题标签
hr标签: 水平分割线, 华丽的分割线
font标签: color属性改变颜色 , size
b标签: 加粗
i标签: 斜体
strong标签: 带语义的加粗
em标签: 斜体标签,带语义
img标签: 图片标签 显示图片
src: 指定图片路径(相对路径)
width: 宽度
height: 高度
alt: 图片加载失败时的提示
相对路径:
./ 代表当前路径
../ 代表的是上一级路径
../../ 代表的是上上一级路径
ul标签: 无序列表
ol标签: 有序列表
li标签: 列表项
a标签: 超链接标签:
target: 打开方式
href: 指定要跳转的链接地址
table标签: table > tr > td
tr标签: 行
td标签: 列
合并行: rowspan
合并列: colspan
网站注册案例:
form 标签: 表单标签,主要是用来向服务器提交数据
method: 提交方式 get post
action : 提交的路径
input 标签:
type:
password: 密码框
text : 文本
submit: 提交
button: 普通的按钮
reset: 重置按钮
radio: 单选按钮 设置name属性让它们是一组
checkbox: 复选按钮
email:
date:
tel:
frameset : 框架标签
rows:
cols:
frame:
使用CSS完成网站首页的优化 需求分析: 由于我们昨天使用表格布局存在缺陷,那么我们要来考虑使用DIV+CSS来对页面进行优化
表格布局的缺陷:
1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果 2. 采用表格布局,页面不够灵活, 动其中某一块,整个表格布局的结构全都要变技术分析
HTML的块标签:
div标签: 默认占一行,自动换行
span标签: 内容显示在同一行
CSS概述:
Cascading Style Sheets : 层叠样式表
红砖, 抹了一层水泥, 白灰
主要用作用:
用来美化我们的HTML页面的
HTML 决定网页的骨架 ,CSS 化妆
将页面的HTML和美化进行分离
CSS的简单语法:
在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中
CSS选择器: 帮助我们找到我们要修饰的标签或者元素
元素选择:
元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}
ID选择器:
以#号开头 ID在整个页面中必须是唯一的s
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}
类选择器:
以 . 开头
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}
CSS的引入方式:
外部样式: 通过link标签引入一个外部的css文件
内部样式: 直接在style标签内编写CSS代码
行内样式: 直接在标签中添加一个style属性, 编写CSS样式
CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
float属性:
left
right
clear属性: 清除浮动
both : 两边都不允许浮动
left: 左边不允许浮动
right : 右边不允许浮动
流式布局
步骤分析:
创一个最外层div
第一部份: LOGO部分: 嵌套三个div
第二部分: 导航栏部分 : 放置5个超链接
第三部分: 轮播图
第四部分:
第五部分: 直接放一张图片
第六部分: 抄第四部分的
第七部分: 放置一张图片
第八部分: 放一堆超链接
代码实现:
扩展:
CSS的优先级
按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器
就近原则: 哪个离得近,就选用哪个的样式
CSS: 层叠样式表
主要作用:
1. 美化页面 2. 将页面美化和HTML代码进行分离,提高代码的服用型
选择器:
元素选择器: 标签的名称{}
类选择器: 以. 开头 .类的名称
ID选择器: 以#开头 , #ID的名称 (ID必须是页面上面唯一)
CSS浮动:
float : left, right 不再占有正常文档流中的空间 , 流式布局
clear : both left right
CSS中的其它选择器
选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}
属性选择器:
a[title] a[titile="aaa"] a[href][title] a[href][title="aaa"]
后代选择器: 爷爷选择器 孙子选择器 找出所有的后代
子元素选择器: 父选择器 > 儿子选择器
伪类选择器: 通常都是用在A标签上
使用DIV+CSS完成注册页面的优化 需求分析由于我们的注册页面也是用table布局的,存在与首页同样的问题,所以我们需要使用div+css对我们的注册页面进行美化
总共是5部分内容
技术分析CSS的盒子模型: 万物皆盒子
内边距:
padding-top:
padding-right:
padding-bottom:
padding-left:
padding:10px; 上下左右都是10px padding:10px 20px; 上下是10px 左右是20px padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px padding: 10px 20px 30px 40px; 上右下左, 顺时针的方向
外边距:
margin-top:
margin-right:
margin-bottom:
margin-left:
CSS绝对定位:
position: absolute
top: 控制距离顶部的位置
left: 控制距离左边的位置
步骤分析:总共是5部分
第一部分是LOGO部分
第二部分是导航菜单
第三部分是注册部分
第四部分是FOOTER图片
第五部分是一堆超链接
代码实现:
CSS部分的回顾:
CSS: 层叠样式表.
CSS作用: 美化页面,提高代码的复用性
选择器:
需要掌握的:
元素选择器: 标签的名称
类选择器: 以 . 开头
ID选择器: 以#开头, #ID的名称 ID必须是唯一的
优先级: 按照选择精确度: 行内样式 > ID选择器 > 类选择器 > 元素选择器
就近原则
扩展选择器:
选择器分组: 选择器1,选择器2 以逗号隔开
后代选择器: 爷爷 孙子 中间以空格隔开
子元素选择器: 爸爸 > 儿子
属性选择器: 选择器[属性的名称=""]
伪类选择器: 超链接标签上使用
浮动: float属性 left right
清除浮动: clear: both left right
盒子模型: 顺时针 : 上右下左
padding : 内边距 ,控制的是盒子内容的距离
margin : 外边距 控制盒子与盒子之间的距离
绝对定位:
position: absolute
top:
left:
使用JS完成简单的数据校验 需求分析使用JS完成对注册页面的简单数据校验,不允许出现用户名或密码为空的情况
技术分析什么是javascript: JavaScript一种直译式脚本语言，
什么是脚本语言?
java源代码 ----> 编译成.class文件 -----> java虚拟机中才能执行
脚本语言: 源码 -------- > 解释执行
js由我们的浏览器来解释执行
HTML: 决定了页面的框架
CSS: 用来美化我们的页面
JS: 提供用户的交互的
ECMAScript : 核心部分 ,定义js的语法规范
DOM: document Object Model 文档对象模型 , 主要是用来管理页面的
BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高
变量弱类型: var i = true
区分大小写
语句结束之后的分号 ,可以有,也可以没有
写在script标签
基本类型
string
number
boolean
undefine
null
引用类型
对象, 内置对象
类型转换
js内部自动转换
运算符和java 一样
"===" 全等号: 值和类型都必须相等
== 值相等就可以了
语句和java 一样
alert() 直接弹框
document.write() 向页面输出
console.log() 向控制台输出
innerHTML: 向页面输出
获取页面元素: document.getElementById("id的名称");
JS声明变量:
var 变量的名称 = 变量的值
JS声明函数:
var 函数的名称 = function(){
}
function 函数的名称(){
}
JS的开发步骤1. 确定事件 2. 通常事件都会出发一个函数 3. 函数里面通常都会去操作页面元素,做一些交互动作步骤分析: 代码实现
javascript : 它是一门脚本语言 , 直接解释执行的语言
javascript:
ECMAScript : 定义的语法
DOM: document Object Model
BOM: 浏览器对象模型
会定义变量: var 变量的名称 = 变量的值
会定义函数:
function 函数的名称(参数的名称){
}
使用JS完成图片的轮播效果 需求分析在我们的网站首页,通常需要有一块区域,用来显示广告,但是这块区域如果仅仅显示一张图片肯定是不够的, 故我们需要采用动态循环播放我们所有的广告. 显示效果照抄黑马程序员的网站首页
技术分析: 步骤分析: 代码实现:
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/53144.html
摘要：今日目标使用完成网站首页的优化使用完成网站注册页面的优化使用完成简单的数据校验使用完成图片轮播效果教学目标了解的概念了解的引入方式了解的基本用法和常用的选择器了解的盒子模型，悬浮和定位了解的概念掌握的基本语法，数据类型，能够使用完成简单的页 今日目标 使用CSS完成网站首页的优化 使用CSS完成网站注册页面的优化 使用JS完成简单的数据校验 使用JS完成图片轮播效果 教学目标： 了解...
摘要：协议版本请求头客户端向服务器端表示，我能支持什么类型的数据。在地址栏上输入项目名称向报告，我这个应用里面有这个，名字叫做具体的路径是注册的映射。的配置，通过这个对象，可以获取在配置的时候一些信息先说，在写怎么用，最后说有什么用。 1.Http协议 什么是协议 双方在交互、通讯的时候， 遵守的一种规范、规则。 http协议 针对网络上的客户端 与 服务器端在执行http请求的时候...
摘要：列名字段名表单中的属性名要一至创建数据库及表开发应用搭建开发环境添加包创建实现类层业务层接口实现类数据访问层接口实现类添加工具类表示层要注意注册页面登录页面 一、JavaWeb开发模式 C/S：客户端 / 服务器 （胖客户端）B/S：浏览器 / 服务器 （瘦客户端） JavaBean: 就是一个普通类（实体bean），包含三样标准：一个无参构造、私有属性、公共的getter和se...
摘要：张三标签可以自定义。区非法字符严格地讲，在中仅有字符和是非法的。添加包依赖在查找指定节点的时候，根据语法规则来查找后续的代码与以前的解析代码一样。这在生活中是不可能出现的。元素的格式化情况。网页游戏，优点客户端只要有浏览器就可以了。 1.Xml概念 eXtendsible markup language 可扩展的标记语言 2.XML 有什么用? 1.可以用来保存数据 2.可以用来...
阅读 2938·2021-11-25 09:43
阅读 3542·2021-11-24 11:13
阅读 3338·2021-10-14 09:42
阅读 2501·2021-09-23 11:53
阅读 3581·2021-09-22 15:57
阅读 3196·2021-09-02 09:54
阅读 3477·2019-08-30 13:47
阅读 1623·2019-08-29 16:55
