实战前端
零基础入门前端开发,以最终做出项目为导向,学习前端编程开发
程序员buddha
这个作者很懒,什么都没留下…
展开
-
职业技能鉴定服务中心(新闻系统+证书查询系统)
源码:git clone https://gitee.com/3539949703/certificate-website.git。后端采用ThinkPHP8,最新tp框架。采用三种技术实现新闻系统和证书查询系统。前端采用div+css布局。数据库采用MySQL。原创 2024-04-17 16:46:25 · 226 阅读 · 0 评论 -
职业技能鉴定服务中心前端静态页面(官网+证书查询)
有个朋友想做职业技能培训,会发证书,证书可以在自己网站可查。想做一个这样的网站,而且要特别土,一眼看上去像xxx官方网站,像jsp .net技术开发的网站。用html+css+jquery还原了这样子一个前端页面,这里分享给有需要的。源码链接:https://gitee.com/3539949703/frontend-certificate-website.git。3、轮播图jquery定时器实现定时切换、手动切换。小结:前端样式很土、很官方!1、整体div+css布局。原创 2024-02-21 11:33:08 · 664 阅读 · 0 评论 -
html+css+jquery实现轮播图自动切换、左右切换、点击切换
代码如下:效果如下图:需要引入jquery;定时器实现4s自动切换轮播图步骤3:左右切换,左右点击事件手动切换实现代码如下:到目前存在自动切换轮播图,也存在手动切换轮播图。就可能存在手动切换时,又自动切换,客户体验就不太好,可以优化成,手动切换轮播图时,自动切换轮播图关掉,手动切换完成后,又开启自动切换轮播图。优化后,自动切换和左右切换js代码如下:步骤4:点击切换,点击圆点事件手动切换代码如下:html+css+jquery实现轮播图自动切换、左右切换、点击切换,代码如下:原创 2024-02-20 00:03:41 · 1690 阅读 · 0 评论 -
vue+element ui + tp6 前后端分离学徒管理系统
公司跟多个学校有一个校企合作项目,学徒制学生,一边读书,一边实训。公司提供多个公司多个岗位给学生进行轮岗实训。公司给了一个星期叫我撸出来,梳理清晰了业务逻辑就开干了。前端我选择了vue+element ui,后端就选择了tp6,springboot 和 laravel就留来下个系统开撸了。完成后,页面大体如下小结下应用到的技术点:后端应用到中间件,完成token校验、跨域校验、增删改写日志,路由采用的是资源路由,每个控制器7个方法,一般只采用了增删改查save、delete、update、原创 2021-07-19 15:22:03 · 769 阅读 · 2 评论 -
022-企业站:纽曼移动端微官网实战
一、移动端纽曼项目轮播效果实现jquery.touchSwipe.js插件,适合手机客户端手势上下滑屏的jQuery插件滑动事件:swipe (事件,滑动的方向,滑动的距离,一次滑动的时间 , 几根手指)滑动事件还有 方法和上面相同 swipeLeft – 向左滑动 swipeRight-向右滑动 swipeUp-向上滑动 swipeDown-向下滑动其他常用事件还有:doubleTap (双击屏幕) click (单击屏幕) longTap (长按屏幕)二、移动端纽曼项目产品中心页面实现原创 2020-11-10 09:10:58 · 354 阅读 · 0 评论 -
021-企业站:纽曼移动端微官网实战
一、移动端纽曼项目首页菜单栏模块二、移动端纽曼项目首页产品中心模块三、移动端纽曼项目首页新闻列表模块四、移动端纽曼项目首页公司简介模块五、课后作业完成移动端纽曼项目...原创 2020-11-09 09:22:57 · 164 阅读 · 0 评论 -
020-CSS3用户体验
一、CSS3 函数(一)、calc()**calc()**从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度calc()语法calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:.elm { width: calc(expression);}其中**“expression”**是一个表达式,用来计算长度的表达式。需要注意的是,运原创 2020-11-06 09:12:21 · 116 阅读 · 0 评论 -
019-CSS3过渡动画实战
一、CSS3 过渡实战(一)、CSS3 2D汉堡包按钮展示页面动画效果htmlcss(二)、CSS3 3D立方体实战htmlcss二、CSS3 动画实战(一)、CSS3 汉堡包按钮展示页面动画效果htmlcss(二)、CSS3 旋转木马展示页面动画效果htmlcss三、课后作业尝试css3过渡实战,充分发挥想象力,完成过渡实战模块尝试完成CSS3 旋转木马 汉堡包原创 2020-11-05 09:24:23 · 62 阅读 · 0 评论 -
018-CSS3动画
一、CSS3 动画介绍CSS3动画是使元素从一种样式逐渐变化为另一种样式的效果您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器二、CSS3 动画(一)、CSS3@keyframes定义创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中,您可以更改CSS样式的设定多次。指定原创 2020-11-04 10:33:03 · 173 阅读 · 0 评论 -
017-CSS3转换&过渡
一、CSS3 2D转换transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜(一)、2D平移translate(x, y)**translate(x, y)**方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动div { transform: translate(300px, 200px);}translateX()translateX(n) 定义 2D 平移,沿着 X 轴移动元素div { tra原创 2020-11-03 09:20:16 · 714 阅读 · 0 评论 -
016-CSS3新特性
一、CSS3选择器(一)、CSS3介绍CSS 用于控制网页的样式和布局,CSS3 是最新的 CSS 标准CSS3 被划分为模块,其中最重要的 CSS3 模块包括选择器框模型背景和边框文本效果2D/3D 转换动画多列布局用户界面(二)、属性选择器E[attribute^=‘val’]E[attribute^=‘val’]:选择具有att属性且属性值为以val开头的字符串的E元素/* 匹配具有class属性且属性值以a为开头的div元素 */div[class^="原创 2020-11-02 10:01:07 · 92 阅读 · 0 评论 -
015-HTML5介绍
一、HTML5 介绍(一)、背景信息什么是 HTML5?HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。HTML5 是如何起步的?HTML5 是 W3C 与 WHATWG 合作的结果WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,原创 2020-10-31 11:15:55 · 483 阅读 · 0 评论 -
014-jQuery在企业站的应用
一、官网轮播图效果(一)、自动轮播htmlcssjQuery(二)、小圆点轮播切换htmlcssjQuery(三)、左右箭头轮播切换htmlcssjQuery六、课后作业完成首页banner轮播完成产品图旋转木马模块...原创 2020-10-30 11:04:32 · 149 阅读 · 0 评论 -
013-jQuery实现地址三级联动功能
一、图片功能的实现(一)、点击缩略图显示大图(二)、点击切换按钮切换一组物品小图片二、点击验证码图片或刷新按钮进行刷新验证码三、JSON介绍(一)、概念JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)是轻量级的文本数据交换格式 具有自我描述性,更易理解,独立于语言JSON建构于两种结构:“名称/值”对的集合。不同的语言中,它被理解为对象(object),记录(record),结构(struct),字典(dictiona原创 2020-10-29 11:11:31 · 86 阅读 · 0 评论 -
012-jQuery项目场景应用
一、jQuery知识回顾(一)、核心部分核心$(selector, [context]) 核心函数$(“selector”).size() 获取dom元素的个数$(“selector”).length 获取dom元素的个数$(“selector”).get(i) 根据索引号获取指定dom元素$(“selector”).get() 获取所有dom元素,返回一个数组$(“selector”).each() 迭代所有的dom元素(二)、选择器选择器$(“element”) 根原创 2020-10-28 09:25:43 · 184 阅读 · 0 评论 -
011-jQuery动画以及事件
一、jQuery元素筛选(一)、元素过滤$(“selector”).eq(i)$(“selector”).eq(i):根据索引号匹配元素$("p").eq(1); //匹配到所有P元素的第二个P元素,下标从0开始$(“selector”).first()$(“selector”).first():匹配的第一元素$("p").first(); //匹配到所有P元素的第一个P元素$(“selector”).last()$(“selector”).last():匹配最后一个元素原创 2020-10-27 09:59:06 · 109 阅读 · 0 评论 -
010-jQuery常用函数使用
一、jQuery核心函数(一)、jQuery(selector, [context])jQuery(selector, [context]):用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素参数selector {string}: 必选,用来查找的字符串context {Dom}:可选,作为待查找的DOM元素集,文档或jQuery对象实例$('div > p') // 找到div下面所有的p元素(二)、$(“sele原创 2020-10-26 11:44:10 · 95 阅读 · 0 评论 -
009-jQuery介绍、安装、引用、使用及其JavaScript基础
一、jQuery基础知识(一)、jQuery介绍jQuery库可以通过一行简单的标记被添加到网页中。jQuery:它是一个开源的ajax框架.在企业中用得最多的一个Ajax框架jQuery 宗旨write less, do more : 写更少,做更多。jQuery库的特性jQuery是一个JavaScript函数库HTML元素选取HTML元素操作CSS操作HTML事件函数JavaScript特效和动画HTML DOM遍历和修改AJAX市面上较流行A原创 2020-10-24 15:51:19 · 129 阅读 · 0 评论 -
008-企业网站纽曼官网实现
一、纽曼企业官网视频中心模块完成纽曼电器视频中心模块二、纽曼企业官网底部栏目模块完成纽曼主页底部栏目模块三、联系我们完成联系我们 百度Api地图引用四、课后作业完成纽曼电器视频中心模块完成纽曼主页底部栏目模块完成联系我们 百度Api地图引用...原创 2020-10-23 10:16:38 · 568 阅读 · 0 评论 -
007-企业网站纽曼官网实现
一、纽曼企业官网首页菜单栏完成纽曼主页菜单栏二、纽曼企业官网介绍模块完成纽曼官网效果:欢迎来到纽曼模块三、纽曼企业官网首页产品中心模块实现纽曼电器官网效果:产品中心四、纽曼企业官网首页新闻中心模块完成纽曼电器官网效果:新闻中心五、课后作业完成纽曼主页菜单栏完成纽曼官网效果:欢迎来到纽曼模块完成纽曼主页产品中心模块完成纽曼主页新闻中心模块...原创 2020-10-22 09:14:01 · 751 阅读 · 0 评论 -
006-CSS定位布局
一、display:table-cell垂直居中(一)、适用背景垂直居中是让我们最头疼的一个问题,但是有很多时候又需要垂直居中,如果只是一行文字,垂直居中非常简单,只需要设置元素的 高 = 行高但是如果是一张图片呢?这样的设置能让图片垂直居中吗? 可能有的人认为直接设置margin就可以了,但是这样的方式是非常固定的,一旦图片的大小改变了,则不再居中。那又有一种可能,我们需要一个段落在一个指定的高度内垂直居中呢?这时又该怎么做呢?因为段落的内容会随着用户增加或者减少,所以段落就不再只有一行,或者原创 2020-10-21 09:14:27 · 261 阅读 · 2 评论 -
005-CSS浮动布局&盒模型
一、CSS 浮动介绍(一)、浮动的介绍浮动元素会脱离文档的普通流,根据float的属性值向左或向右移动,直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块级元素表现得就像浮动元素不存在一样(二)、浮动的原理浮动"从流程中被移除出来", 但是与绝对位置的元素(层次)不同,浮动是在他们前面的最后一个块元素之后直接被显示出来(就像块盒一样)。如果该浮动是在一个“行块”中,该浮动的上边界被放置在行块顶部的水平上。当除此以外,浮动与绝对元素相原创 2020-10-20 09:37:36 · 164 阅读 · 0 评论 -
004-CSS基础
层叠样式表(CSS),又称串样式列表,由W3C定义和维护的标准,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力一、CSS 介绍(一)、CSS的使用使用CSS可以让结构(HTML)与表现(CSS)分离,方便维护过去我们写网站都用table来布局,然后样式都直接加在table上面,这样一来页面显得特别的臃肿,然后想修改一下也显得非常困.原创 2020-10-19 14:58:53 · 130 阅读 · 0 评论 -
003-HTML标签与属性
HTML除了基本的布局标签以外,还有部分标签拥有强大的交互功能,比如表单标签,可以实现基本的登录注册操作。再者各种标签通过设置不同的属性,也可以实现一些交互效果。一、HTML 标签属性(一)、HTML属性HTML属性指的是对元素的一种描述方式,其提供了更多有关HTML元素的信息(二)、通用属性通用属性指的是所有标签都拥有的属性id 规定元素的唯一 idclass 规定元素的类名style 规定元素的行内样式title 规定元素的额外信息,当鼠标放在元素上,提示的文本内容&.原创 2020-10-16 10:57:13 · 85 阅读 · 0 评论 -
002-前端入门基础介绍
超文本标记语言(英文:HyperText Markup Language,HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言一、HTML介绍(一)、什么是浏览器解释和执行HTML源码的工具五大浏览器:Internet Explorer (IE),FireFox(火狐),Chrome(谷歌),Opera(欧朋),Safari(苹果)浏览器内核Trident内核:代表产品IE,又称为IE内核。是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器有:IE.原创 2020-10-15 09:23:35 · 247 阅读 · 1 评论 -
001-Photoshop基础操作
Adobe Photoshop,简称“PS”,是由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具,可以有效地进行图片编辑工作。一、Adobe Photoshop(一)、Adobe Photoshop的安装(二)、Adobe Photoshop的介绍二、图像基础(一)、图像的基本概念位图Photoshop使用位图来表示黑白图像,其逻辑是每一个像素对应1个数据位。位图图像又称为点阵图像,是由一系列像素组成的.原创 2020-10-14 10:17:05 · 233 阅读 · 0 评论