
Web前端开发工程
HTML4,CSS,HTML5,CSS3,JavaScript
gegejiawei
啊
展开
-
前端综合 油画商城案例
项目阶段1、项目需求分析 – 分析需求,做判断2、接口设计 – 接口设计,包含到后台3、环境搭建 – 开发和生产4、功能模块开发 – 编码遇到问题1、环境搭建失败2、编译错误 – java JavaScript – 调试3、代码跑不通4、运行错误 – java课程目标1、综合运用之前知识2、掌握页面布局的方法,独立开发商品展示页3、具有构思和规划项目的方法和思路4、熟练使用div+css+js完成项目页眉和banner区需求:图片上下排列整齐,点击原创 2020-05-29 15:36:59 · 917 阅读 · 1 评论 -
JavaScript特效部分 学习打卡
需求分析1、点击上图得左右箭头,分别跳转上一图和下一图点击上一张图其实就是让一个变量进行递增,点击下一张图就是让变量递减2、点击右下角小圆点也可以进行图片得轮播通过索引让变量进行随意得修改3、每间隔2s进行轮播图得自动切换定时器4、Typeof id 或者 typeof(id)补充知识点DOM0级事件 和 DOM2级事件 得区别1、DOM0级事件:只能给一个元素得某一个行为绑定一次方法,第二次绑定得话会把前面得覆盖掉;2、DOM2级事件:可以给某一个元素得同一个行为绑定原创 2020-05-27 14:08:07 · 236 阅读 · 0 评论 -
JavaScriptBOM基础 学习打卡
本节介绍:1、掌握BOM核心是window对象2、掌握什么是BOM3、掌握window对象的控制,弹出窗口方法BOM概念bom:(browser object model) – 浏览器对象模型window是浏览器的一个实例1、是通过JavaScript访问浏览器窗口的一个接口2、又是ecmascript规定的global对象 – 全局对象Window 对象所有浏览器都支持 window 对象。它代表浏览器的窗口。所有全局 JavaScript 对象,函数和变量自动成为 wind原创 2020-05-25 13:47:06 · 342 阅读 · 0 评论 -
JavaScriptDOM事件 学习打卡
本节介绍1、掌握什么是事件2、掌握HTML事件3、掌握DOM0级事件4、掌握常用的鼠标和键盘事件5、掌握this的指向事件1、就是文档或者浏览器窗口中发生的一些特定的交互瞬间。2、主要2种:a. HTML事件b. DOM0级事件HTML事件1、直接在HTML元素标签内添加的事件,执行脚本。2、语法:<tag 事件=“执行脚本”></tag>3、功能:在html元素上绑定事件4、说明:执行脚本可以是一个函数的调用鼠标事件1、onload – 页面加原创 2020-05-22 14:05:10 · 230 阅读 · 0 评论 -
JavaScriptDOM基础 学习打卡
DOM基础1、JavaScript由ECMAScript+DOM+BOM组成的。2、DOM: DOCUMENT OBJECT MODEL(文档对象模型)的缩写课程介绍1、如何获取一个元素2、如何访问一个元素的样式3、如何设置和删除属性掌握基本的DOM查找方法1、document.getElementById() – 根据id获取唯一的一个元素2、document.getElementsByTagName() – 返回所有的tag标签引用的集合 – 返回的是数组设置元素的样原创 2020-05-22 13:46:34 · 238 阅读 · 0 评论 -
JavaScript数组 学习打卡
数组//声明或者创建一个不指定长度的数组,又称之为实例化创建// var arrayObj = new Array();//声明或者创建一个数组并指定长度的数组// var arrayObj = new Array(5);//声明或者创建一个带有默认值的数组// var arrayObj = new Array(2,4,"a","y",8);//创建一个数组并赋值的简写,又称之为隐式创建数组var arrayObj = [2,4,"a","y",8];console.log(arrayOb原创 2020-05-21 13:41:25 · 143 阅读 · 0 评论 -
JavaScript循环及内置函数 学习打卡
循环类控制语句for循环//for循环//1+2+3+4+5+...+100=5050 var i; var sum=0; for(i=0;i<=100;i++){ sum+=i; }console.log(sum);while循环//1+2+3+4+5+...+100=5050//while循环是先判断条件,条件满足了再继续执行var i=0;var sum=0;while(i<=100){ sum=sum+i; i++;}conso原创 2020-05-19 15:49:09 · 197 阅读 · 0 评论 -
JavaScript运算符及条件判断 学习打卡
变量作用域1、局部变量:在函数内部创建的变量,称为局部变量,其他函数不能使用。2、全局变量:在函数外部创建的变量,称为全局变量,在函数之间可以共享使用。运算符比较运算符1、比较运算符:用于比较两个值,结果true或者false2、运算符的范围: > >= != < <=3、实例:x < 10为true //x=2逻辑运算符1、包含逻辑与 或 非 等,结果是true或者false2、&& and原创 2020-05-18 14:20:22 · 394 阅读 · 0 评论 -
JavaScript基础语法 学习打卡
本节介绍1、JavaScript的重要作用,HTML+CSS+JavaScript的之间关系2、JavaScript脚本语言的程序控制语法3、JavaScript脚本语言函数,自定义函数4、JavaScript脚本语言事件响应及处理、表单处理5、JavaScript脚本语言DOM模型及操作6、使用本课程所学技术完成综合练习JavaScript简介1、什么是JS – JavaScript的简称,是一种动态脚本语言。2、什么是动态页面 – 人机交互 静态页面 – 没有人机交原创 2020-05-15 14:01:43 · 258 阅读 · 0 评论 -
CSS3动画 学习打卡
简介:使用animation属性,实现以往要用flash动画软件才能实现的效果CSS3动画1、动画(animation) – 动画可以定义为使用绘画的手法,创造生命运动的艺术。2、视觉暂留原理 – 人的眼睛看到一幅画或者一个物体后,在0.34s之内不会消失。3、动画原理 – 把人物的表情等分解后画成许多动作瞬间的画幅,利用视觉暂留原理,在0.34s还没消失之前播放下一幅画。4、兼容性:IE10+ FIREFOX16+ CHROME 43+ SAFARI9+ OPERA30+原创 2020-05-14 13:57:23 · 290 阅读 · 0 评论 -
CSS3过渡 学习打卡
简介:通过CSS3属性变化实现动画,产生交互过渡1、控制css样式变化的过程2、过渡 – transition允许css属性值在一定的时间区间内平滑的过渡(动画形成的过程)在鼠标点击,获得焦点,被单击或者对元素任何改变中触发并圆滑的以动画效果改变css属性值3、兼容性:ie10+ firefox16+ chrome26+ safari6.1+ opera12.1+总结:过渡就是一个元素,他的属性从一个值变化到另一个值。transition-property属性1、检索或者设置对原创 2020-05-13 13:45:37 · 193 阅读 · 0 评论 -
CSS3转换 学习打卡
解析:深入讲解元素如何扭曲,移位或旋转,可以自由的装饰和变形HTML的组件本节介绍CSS3的TransformCSS3的2D转换CSS3的3D转换CSS3坐标系统和Transform扩展属性CSS3的变形1、Transform 变形属性 – 让一个元素在坐标系统中变形,这个属性会包含一系列的变形函数,可以移动,旋转和缩放元素2、语法:transform :none – 没有变形 – 默认值<transform-function>[<transform原创 2020-05-12 14:10:38 · 225 阅读 · 0 评论 -
CSS3文本和字体 学习打卡
本节介绍CSS3文本阴影CSS3换行CSS3新文本属性CSS3文本阴影1、text-shadow 应用于阴影文本2、语法:text-shadow: h-shadow(水平偏移) v-shadow(垂直偏移) blur(模糊距离) color(颜色)3、兼容:ie10+ firefox3.5+ chrome4+ safari4+ opera9.5+4、注意:模糊程度不能是负数,不然会失去效果CSS3文本轮廓1、text-outline 规定文本轮廓2、语法:text-o原创 2020-05-11 15:13:31 · 226 阅读 · 0 评论 -
CSS3背景和渐变 学习打卡
课程目标背景图像区域背景图像定位背景图像大小背景属性整合渐变线性渐变径向渐变CSS3背景图像background-clip1、指定背景绘制区域2、background-clip: border-box(背景被裁减到边框盒 - 默认值) padding-box(背景被裁减到内边距框) content-box(背景被裁减到内容框)3、兼容:IE9+ firefox chrome safari operabackground-origin1、设置元素背景图原创 2020-05-09 16:59:29 · 194 阅读 · 0 评论 -
CSS3边框和圆角 学习打卡
课程介绍1、CSS3圆角2、CSS3盒阴影3、CSS3边界图片CSS3圆角1、border-radius:一个最多可以指定四个border-*-radius属性的复合属性,为元素添加圆角边框2、语法:border-radius:1-4 length|%/1-4 length|%3、兼容:IE9+ firefox4+ chrome safari5+ operaCSS3指定每一...原创 2020-05-08 15:11:27 · 214 阅读 · 0 评论 -
CSS3选择器 学习打卡
基本选择器回顾选择器通配符、元素、类、ID、后代新增基本选择器子元素、相邻兄弟元素、通用兄弟、群组子元素选择器1、概念:只能选择某元素的子元素2、语法格式:父元素>子元素 (father>children) – 只能是儿子,孙子一下都不可以3、兼容性:Ie8+、firefox、chrome、opera、safari相邻兄弟元素选择器1、概念:可以选择紧接在另一...原创 2020-05-07 17:13:50 · 178 阅读 · 0 评论 -
HTML5属性变化 学习打卡
input新增的标签 – email、url、tel、number电子邮件input类型<input type="email" name="email"/>电话类型input类型<input type="tel" name="tel"/>数字input类型<input type="number" name="number"/>Date P...原创 2020-05-06 19:55:00 · 327 阅读 · 0 评论 -
HTML5标签变化2 学习打卡
状态标签 – Web应用标签meter – 状态标签(实时状态显示:气压、气温)meter标签定义度量衡,仅用于已知最大最小的度量,是HTML5的一个新标签例如:磁盘使用空间,查询结果相关等注意!meter不能作为一个进度条来使用!Meter属性:High 界定为高的范围Low 低的范围Max 范围内的最大值Min 最小值Optimum 最优值Value 实...原创 2020-04-30 11:24:22 · 149 阅读 · 0 评论 -
HTML5标签变化1 学习打卡
课程概述标签变化 – DTD、新增的标签、删除标签、重定义的标签页面布局 – 新的页面布局、区别和意义属性变化 – Input、表单属性、链接属性、其他属性DOCTYPE声明定义和用法 – 必须是HTML文档的第一行html:5按下tab键 / !+ctrl+e —> 生成html5的标准形式不是HTML标签DTD – 文档类型定义DTD:可定义合法的X...原创 2020-04-29 16:10:30 · 210 阅读 · 0 评论 -
CSS定位 学习打卡
具体分类position:1、relative – 相对2、absolute – 绝对3、static – 无定位4、fixed – 固定相对定位1、相对定位的偏移参考元素是元素本身,不会使元素脱离文档流,元素的初始卫视占据的控件会被保留。2、position:relative3、案例代码演示4、总结:相对定位的偏移是自己之前的位置作为参照进行的一个偏移相对定位不作为元素...原创 2020-04-28 17:33:37 · 181 阅读 · 0 评论 -
CSS浮动 学习打卡
课程目标1、 学习边框,轮廓等块级元素设置,盒子模型2、 标准流、文档流、脱标流等技术术语3、 浮动的设置,浮动的特点4、 使用浮动技术进行特效的制作课程安排1、div 块级元素和行级元素的区别2、盒子模型 盒子模型的概念,用途,设置盒子模型的间距3、浮动 浮动的作用、包裹、奔溃特性,清除浮动4、块和行如何转换 块状元素和行级元素的相互转换d...原创 2020-04-27 16:27:52 · 519 阅读 · 0 评论 -
CSS入门2 学习打卡
字体类样式 – font系列作用:定义文本的字体系列,大小,加粗,风格(斜体)、变形(大小写字母等)font-style:normal 默认的正常显示italic 斜体-绝大多数斜体,个别不斜体的效果oblique 所有都实现斜体效果font-weight:中间数值没有效果的,因为浏览器差异性的问题只有100和900有效果...原创 2020-04-26 16:09:07 · 164 阅读 · 0 评论 -
CSS入门1 学习打卡
CSS概念层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。C...原创 2020-04-25 10:38:34 · 254 阅读 · 0 评论 -
HTML综合 学习打卡
补充的课程知识点:现在的大部分的网页布局DIV+CSS方式,最常见的标签如下:div标签div之间是一个容器,这个容器可以包裹段落、表格、图片等各种html元素span标签没有实际意义,为了应用样式块级标签占据一行,换行。div, ul, ol, li, dl, dd, h1~h6, p, form, hr, …行级标签在一行,不换行。b, em, img, input, a...原创 2020-04-25 10:23:30 · 265 阅读 · 0 评论 -
HTML表单 学习打卡
介绍:掌握利用表单进行交互式的页面的设计1、作用:用于收集用户的信息,进行人机交互的操作。人机交互:收集数据之后将其传递给后台,后台处理完再次返回响应到前台的过程。2、包含元素:文本框、单选、复选、隐藏域、列表框、图片框等,统一称为控件。表单控件的常用属性1、name 指定控件的名称,可重复2、id 指定标签的唯一识别(类似身份证)3、value 输入的控件的值(收集,设置) 用于传递...原创 2020-04-25 10:03:08 · 310 阅读 · 0 评论 -
HTML表格 学习打卡
介绍:表格作为布局的基础表格由 table 标签来定义。每个表格均有若干行(由 tr 标签定义),每行被分割为若干单元格(由 td 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的完整的结构<table> <caption>表格标题</caption>...原创 2020-04-25 09:50:06 · 308 阅读 · 0 评论 -
HTML基础 学习打卡
HTML概念HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中...原创 2020-04-25 09:24:29 · 657 阅读 · 0 评论