JavaEE 传智28期day02cssjs参考.docx
- 文档编号：15859587
- 上传时间：2023-07-08
- 格式：DOCX
- 页数：28
- 大小：888.45KB
JavaEE 传智28期day02cssjs参考.docx
《JavaEE 传智28期day02cssjs参考.docx》由会员分享，可在线阅读，更多相关《JavaEE 传智28期day02cssjs参考.docx（28页珍藏版）》请在冰点文库上搜索。
JavaEE传智28期day02cssjs参考
第2章WEB02-CSS&JS篇
今日任务
Ø使用CSS完成网站首页的美化
Ø使用CSS完成网站注册页面的美化
Ø使用JS完成简单的数据校验
Ø使用JS完成图片轮播效果
教学导航
教学目标
了解CSS的概念
了解CSS的引入方式
了解CSS的基本语法和常用的选择器
了解CSS的盒子模型,悬浮和定位.
了解JS的概念
掌握JS的基本语法,数据类型,能够使用JS完成简单的页面交互.
教学方法
案例驱动法
1.1使用CSS对首页进行重新布局：
1.1.1需求分析：
在上次的HTML课程中已经使用表格标签对页面进行布局显示了，但是表格标签有一定的缺陷。
实际开发中都会采用DIV+CSS的方式进行布局。
使用DIV+CSS重新布局网站的首页：
1.1.2分析：
1.1.2.1技术分析
【HTML的DIV标签】
HTML中有两个块标记：
Ø
Ø
【CSS的概述】
Ø什么是CSS：
CascadingStyleSheets层叠样式表.
ØCSS的作用：
CSS主要用来修饰HTML的显示.代码复用.将页面元素与样式进行分离.
ØCSS的使用：
语法：
选择器{属性1:
属性值;属性2:
属性值;..}
【CSS的引入方式】
Ø行内样式：
直接在html的元素上使用style的属性编写CSS：
#00FF00;font-size: 100px;">黑马训练营 Ø内部样式： 在html的
Ø外部样式：
将CSS定义成一个.css的文件，在html中将该文件引入到html中
【CSS的基本选择器】
CSS的选择器为了更能精确的找个某个元素来设计的
Ø元素选择器：
div{
color:
red;
}
Øid选择器：
*****id通常都是唯一的.
Ø类选择器：
HTML:
CSS:
【CSS的悬浮】
ØCSS的float属性：
float属性中常用取值:
ØLeft:
悬浮到左边
ØRight:
悬浮到右边
使用clear属性清除浮动：
ØLeft：
清除左侧浮动
ØRight：
清除右侧浮动
ØBoth：
清除两侧的浮动
1.1.2.2步骤分析：
Ø创建一个外层的div元素
Ø在div中创建代表每块区域div
Ø在每块div引入需要的元素的内容
1.1.3代码实现：
DOCTYPEhtml>
--整体的DIV-->
--LOGO部分的DIV-->
--分成三个小的DIV-->
10px;height: 40px;">
《保险学概论》期末复习指导书蓝本答案要点.docx
