前端学习实例
前端学习过程中,相对应的简单开发实例
大熊软糖M
满足是危机之始
展开
-
『前端学习实例』 CSS渐变色与渐变文字
文章目录渐变色渐变文字渐变色htmldivcssbackground: linear-gradient(90deg, red , blue);结果渐变文字htmldiv里放点文字cssbackground-image: linear-gradient(90deg, red , blue);background-clip: text;-webkit-text-fill-color: transparent;结果...原创 2021-04-16 11:31:10 · 217 阅读 · 0 评论 -
『前端学习实例』 商品页面的增删查(Bootstrap + Vue)
官方文档: Bootstrap 中文文档 · Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。官方文档:Vue.js文章目录功能需求结果展示源代码文件目录index.html功能需求实现商品页面 (基于Bootstrap)实现具体功能 (基于Vue)添加删除查找结果展示源代码文件目录css文件夹bootstrap.cssjs文件夹vue.jsindex.html 网页源文件index.html<!D原创 2020-08-11 18:44:17 · 335 阅读 · 0 评论 -
『前端学习实例』 表单验证-注册(Javascript正则表达式)
参考文档:JavaScript 教程 W3school文章目录功能需求结果展示源代码index.html功能需求实现用户注册界面。(自定义CSS样式)实现表单验证。(使用Javascript正则表达式)结果展示默认状态:用户名:默认状态(点击)不符合要求(鼠标移出)符合要求(鼠标移出)手机号 / 身份证号 / 电子邮箱:和用户名相同《密码:弱密码中密码强密码源代码index.html<!DOCTYPE html原创 2020-08-05 17:54:01 · 766 阅读 · 0 评论 -
『前端学习实例』 HTML文本编辑功能实现(Javascript)
参考文档:JavaScript 教程 W3school文章目录功能需求结果展示源代码index.html功能需求实现HTML界面文字内容的可编辑(H5中的contenteditable属性)。(使用Javascript DOM和点击事件)结果展示默认状态:点击文本内容:编辑内容:点击输入框之外:再次点击(还可以继续修改):源代码index.html<!DOCTYPE html><html lang="en"><head>原创 2020-07-28 15:06:07 · 980 阅读 · 0 评论 -
『前端学习实例』 标签页实现(Javascript + CSS)
参考文档:JavaScript 教程 W3school参考文档:CSS 教程 W3school文章目录功能需求结果展示源代码文件目录index.html功能需求实现动态标签页,包含一系列按钮和文本。切换功能:点击按钮可以切换到相应文本。(切换效果使用JSDOM,效果内容使用CSS)结果展示默认状态:点击按钮(P2):点击按钮(P1):同默认状态。源代码文件目录根目录index.html 网页源代码index.html<!DOCTYPE html&g原创 2020-07-26 22:46:13 · 880 阅读 · 0 评论 -
『前端学习实例』 标签页的动态增删改(Javascript + Bootstrap)
参考视频:【极客学院】一周学会Bootstrap官方文档: Bootstrap 中文文档 · Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。文章目录功能需求结果展示源代码文件目录index.htmlmycss.cssmyjs.js功能需求实现动态标签页,包含一系列按钮和文本。切换功能:点击按钮可以切换到相应文本。(使用bootstrap的js标签页)添加功能:可以动态添加新的按钮和文本。(使用按钮监听器,DOM添加节点和属性)删除功能:可以删除指定按钮和对应文原创 2020-07-26 19:19:00 · 704 阅读 · 0 评论 -
『前端学习实例』 静态网页(Bootstrap)
参考视频:【极客学院】一周学会Bootstrap官方文档: Bootstrap 中文文档 · Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。文章目录文件目录结果展示源代码index_test1.htmlindex_test1_css.css文件目录根目录源代码文件index_test1.htmlindex_test1_css.css文件夹image 包含图片css 包含bootstrap样式结果展示源代码index_test1.html&原创 2020-07-16 17:33:10 · 1559 阅读 · 0 评论