
前端
文章平均质量分 82
程序边界
step by step, all the way up!
展开
-
【笔记】Bootstrap入门视频-吴华-CSDN
文章目录第一章:bootstrap基本标签样式标题段落文字文字颜色文字对齐列表代码表格栅格系统样式列偏移列排序列嵌套按钮图片图标警示框可以移除的警示框缩略图表单复选框表单验证状态下拉菜单基本样式带小标题的下拉菜单带下拉菜单的按钮组导航栏导航条带搜索框分页标签徽章列表组面板模态框滚动监听工具提示框按钮实现选项卡折叠手风琴进度条媒体对象轮播图附加导航Bootstrap入门-吴华的在线视频教程-C...原创 2020-04-14 23:50:40 · 388 阅读 · 0 评论 -
【笔记】vue2.x轻松入门-谢榭-CSDN
vue2.x轻松入门-谢榭的在线视频教程-CSDN学院脚本在前必须写在以下代码内window.onload = function(){}数组遍历var app = new Vue({ el: "#app", data: { arr: [1,2,3,4,5] }})<div id="app"> <ul>...原创 2020-04-14 23:45:35 · 282 阅读 · 0 评论 -
【笔记】玩转CSS3新特性_from_JSPang
文章目录第一章:环境搭建,伪类选择器,伪元素1.1、嫁汉嫁汉穿衣吃饭1.2、新特性简介和浏览器支持情况1.新特性简介2.浏览器对CSS3的支持情况3.渐进增强和优雅降级1.3、伪类选择器(1)1.动态伪类选择器2.UI元素状态伪类选择器1.4、伪类选择器(2)1.结构伪类选择器1.5、伪元素案例精讲第二章:CSS3的变形,画多边形,星形2.1、CSS3用border-radius画图形2.2、画三...原创 2020-04-14 20:01:39 · 642 阅读 · 0 评论 -
《Bootstrap实战》笔记系列目录及说明
为建立演示页面fork到了码云,地址:bootstrap site blueprints sample code,在每个章节的笔记都有效果预览地址哦《Bootstrap实战》David Cochran , Ian Whitley (作者) 李松峰 (译者)笔记目录:【笔记】《Bootstrap实战》——第1章 初识Bootstrap【笔记】《Bootstrap实战》——第2章 ...原创 2020-04-14 18:54:38 · 326 阅读 · 0 评论 -
【笔记】《Bootstrap实战》——附录C 让传送带支持手势
文章目录选择方案下载使用选择方案Adding swipe support to Bootstrap Carousel 3.0 - Laz Creativemattbryson/TouchSwipe-Jquery-PluginjQuery.touchswipe插件 - 博客园手机滑动touchSwipe-CSDN博客jquery.touchswipe | BootCDN - Bo...原创 2020-04-14 18:45:01 · 211 阅读 · 0 评论 -
【笔记】《Bootstrap实战》——附录B 实现响应式图片
文章目录选择方案准备响应式图片使用JS选择方案Choosing A Responsive Image Solution — Smashing Magazine选择Scott Jehl的Picturefill技术picturefill | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务响应式图片填充工具picturefill-CSDN博客scottje...原创 2020-04-14 18:43:13 · 274 阅读 · 0 评论 -
【笔记】《Bootstrap实战》——附录A 优化站点资源
文章目录一、优化图片二、优化css三、优化JS一、优化图片Photoshop,保存为Web格式工具:http://www.smushit.com/ysmush.it/https://tinypng.com/RIOT for Windows二、优化css在__main.less中注释掉不必要的less文件,只留下需要的注释掉之后重新编译,全面测试测试没有问题,选中编...原创 2020-04-14 18:40:26 · 212 阅读 · 0 评论 -
【笔记】《Bootstrap实战》——第6章 单页营销网站
文章目录一、概况二、初始文件三、了解页面内容四、调整导航条五、定制高清图六、美化功能列表七、装饰用户评论区1.定位及美化说明2.调整说明元素的位置3.添加 Bootstrap 的网格类4.下载并链接 JavaScript 插件5.初始化 Masonry 插件6.切齐图片7.适应小微屏幕八、吸引人的价目表1.准备变量、文件和标记2.表格头3.表体和表脚4.为不同的价目表添加不同的样式5.适配小视口6...原创 2020-04-14 18:35:18 · 1465 阅读 · 4 评论 -
【笔记】《Bootstrap实战》——第5章 电子商务网站
文章目录一、商品页的标记二、面包屑、页面标题和分页导航三、调整商品网格四、侧边栏和筛选选项1.基本布局2.Clearance Sale按钮3.选项列表4.为选项链接添加Font Awesome图标复选框5.使用LESS混入在栏中对齐选项6.针对平板和手机调整选项列表布局7.在手机上折叠选项面板构建了公司网站之后,接下来就可以考虑设计一个在线商店了。此次的设计以上一章的设计为基础, 只是添加...原创 2020-04-14 18:30:57 · 1642 阅读 · 0 评论 -
【实战】教你如何使用 Bootstrap 搭建一个企业网站——《Bootstrap实战》
文章目录一、准备启动文件1.完成之前的效果:2.完成之后的效果3.文件清单4.本章目标二、页头区1.需要完成的效果特性:2.将Logo放在导航条上方3.调整导航条三、添加实用导航1.要实现的效果2.添加代码和样式四、调整响应式导航五、调整配色六、调整折叠后的导航条配色1.调整响应式导航条2.调整水平导航条七、设计复杂的响应式布局1.调整中、宽布局2.调整标题、字体大小和按钮3.增大主栏4.调整第三...原创 2020-04-14 18:15:53 · 3293 阅读 · 1 评论 -
【笔记】《Bootstrap实战》——第3章 WordPress主题【自】
文章目录一、导航部分1.引入 bootstrap 和 jquery2.添加导航二、添加首页内容1.上传并处理图片2.添加首页内容三、自定义页面模板四、理解Roots的基准模板五、创建自定义的基本模板六、在自定义结构中使用自定义栏目七、创建自定义的内容模板八、通过自定义栏目构建传送带九、加入页脚内容十、更换我们的assets资源wordpress主题添加资源文件(js、css)还是不熟悉一、导航...原创 2020-04-14 16:56:52 · 652 阅读 · 0 评论 -
【实战】《Bootstrap实战》——第2章 作品展示站点
文章目录@[toc]一、搭建传送带(轮播图)1.主要代码2.使用说明二、创建响应式分栏1.网格系统引入2.使用说明三、链接转按钮1.关键类说明2.代码四、理解LESS1.[嵌套(Nesting)](https://less.bootcss.com/#-nesting-)2.[变量(Variables)](https://less.bootcss.com/features/#variables-fe...原创 2020-04-14 15:57:04 · 660 阅读 · 0 评论 -
【实战】《Bootstrap实战》——第1章 初识Bootstrap
文章目录一、下载二、准备项目模板文件夹1.下载2.文件目录3.删除不必要的样本文件4.理解样本中的.htaccess文件5.更新必要的样本文件6.更新图标文件三、加入Bootstrap文件1.字体2.JavaScript3.暂不考虑css文件4.复制less文件5.盘点四、构造HTML模板1.原有代码2.新增代码3.编译less文件4.完成响应式导航条5.支持IE8五、小结一、下载http...原创 2020-04-14 15:35:50 · 741 阅读 · 0 评论 -
【实战】Vue Element+Node.js开发企业通用管理后台系统——项目需求分析
文章目录一、项目技术架构1.三个应用2.项目目标二、技术难点分析1.登录2.电子书上传3.电子书解析4.电子书增删改5.epub 电子书三、Nginx 服务器搭建1.安装 nginx2.修改配置文件3.启动服务4.资源文件5.常见问题(1)解决 macOS operation not permitted 问题(2)解决 Windows 同学路径配置错误启动出现 500 异常(3)如何申请 http...原创 2020-04-14 01:34:06 · 2030 阅读 · 43 评论 -
【实战】Vue Element+Node.js开发企业通用管理后台系统——服务端开发框架搭建
文章目录一、Node 简介二、Express 简介三、项目初始化1.创建项目2.安装依赖3.创建 app.js三、Express 三大基础概念1.中间件2.路由3.异常处理五、项目框架搭建1.路由后端框架搭建 | 「小慕读书」管理后台一、Node 简介nodejs/node: Node.js JavaScript runtimeNode 是一个基于 V8 引擎的 Javascr...原创 2020-04-12 23:27:15 · 2655 阅读 · 0 评论 -
【实战】Vue Element+Node.js开发企业通用管理后台系统——前端框架搭建
文章目录一、项目初始化前端框架搭建 | 「小慕读书」管理后台一、项目初始化vue-element-admingit clone https://github.com/PanJiaChen/vue-element-admincd vue-element-adminnpm inpm run dev项目精简删除 src/views 下的源码,保留:dashboard:首页...原创 2020-04-12 20:39:20 · 2083 阅读 · 0 评论 -
【实战】Vue Element+Node.js开发企业通用管理后台系统——Vuex 和 Vue-router 进阶
文章目录一、Vuex 原理解析二、vue-router 实现原理三、vue-router 路由守卫全局守卫局部守卫四、路由元信息五、路由 API一、Vuex 原理解析github:vuex 源码案例:Vuex 原理解析Vuex 的原理关键:使用 Vue 实例管理状态 <body> <div id="root">{{data}}</div&g...原创 2020-04-12 12:00:43 · 869 阅读 · 0 评论 -
【实战】JavaScript版数据结构与算法 —— 课程导学
文章目录一、前端刚需二、快速入门三、课程内容介绍四、课程特色五、适用对象六、注意事项JavaScript版数据结构与算法-慕课网实战一、前端刚需前端开发门槛低、人员参差不齐前端开发只会写页面,不懂算法,伪程序员面试考算法,通过率极低看过C、C++、Java版算法,JavaScript版的却不会写程序 = 算法 + 数据结构二、快速入门通过“解题”夯实基础算法理解算...原创 2020-04-11 12:01:50 · 740 阅读 · 1 评论 -
【实战】Vue Element+Node.js开发企业通用管理后台系统——Element-UI 入门
文章目录一、简介二、基本用法三、按需加载四、插件引用五、表单基本用法六、表单校验基本用法七、表单校验高级用法用法一:动态改变校验规则用法二:手动控制校验状态八、表单属性解析disabledsize:设置表单组件尺寸九、分析element-ui源码1.入口文件分析2.form.vue3.form-item.vueElement-UI 入门 | 「小慕读书」管理后台一、简介饿了么开源组件...原创 2020-04-10 23:51:53 · 1264 阅读 · 0 评论 -
【实战】Vue Element+Node.js开发企业通用管理后台系统——Vue进阶(下)
文章目录一、组件通信 provide 和 injectVue 进阶一、组件通信 provide 和 inject<html> <head> <title>组件通信 provide 和 inject</title> <script src="https://cdn.jsdelivr.net/npm/vue/dis...原创 2020-04-10 00:25:31 · 2557 阅读 · 1 评论 -
Vue.observable源码解读(by实例)
Vue.observable官方文档:https://cn.vuejs.org/v2/api/#Vue-observable实例:Vue.observable<body> <div id="root"> {{message}} <button @click="change">Change</button>...原创 2020-04-09 21:33:19 · 1993 阅读 · 0 评论 -
vue.js中watch的六种用法(附实例解析)
文章目录监听器 watchWatch 用法1:常见用法Watch 用法2:绑定方法Watch 用法3:deep + handlerWatch 用法4:immediateinitWatchcreateWatchWatch 用法5:绑定多个 handlerWatch 用法6:监听对象属性监听器 watch官方文档:https://cn.vuejs.org/v2/api/#watch官方文档:...原创 2020-04-09 13:06:22 · 18391 阅读 · 1 评论 -
【实战】Vue Element+Node.js开发企业通用管理后台系统——Vue进阶(上)
文章目录一、$emit 和 $on1.$on2.$emit二、directive 用法三、Vue.component 用法源码分析四、Vue.extend 用法五、Vue.extend 进阶用法六、Vue.use 用法http://www.youbaobao.xyz/admin-docs/guide/base/vue.html一、$emit 和 $on$emit 和 $on主要负责事...原创 2020-04-07 13:45:26 · 2320 阅读 · 0 评论 -
【实战】Electron 实战 ——疫情实况 桌面应用
接下来在main,js调用BrowserWindow的构造方法中修改窗口大小、初始位置、无边框,并隐藏标题栏。在package.json中配置nodemon命令,并将默认指定入口文件改为main.js。然后新加style样式,使得.app-control可以拖拽,文字居中,并带下边框。在index.html的div#title上新增div作为自定义的app头部。制作图标并用工具制作为256*256的ico格式,存放于项目根目录。在开发工具中打开工程目录,并初始化项目。原创 2020-04-04 23:32:26 · 921 阅读 · 0 评论 -
【实战】Electron桌面下雪特效实战文字版(附视频链接)
文章目录一、构建环境二、窗口透明化三、添加雪花四、移动雪花五、雪花旋转六、参数随机七、完成下雪特效八、打包成可执行文件打包方法1打包方法2九、全部代码展示工程目录package.jsonindex.htmlmain.jsSnowFlower.jsrenderer.jsElectron桌面下雪特效_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili配套源码地址一、构建环境git ...原创 2020-04-01 16:18:48 · 1374 阅读 · 2 评论 -
electron打包(electron-builder/electron-packager)及打包过程中的报错解决
文章目录一、electron-packager二、electron-builder1.`electron-builder`的配置(1)在`package.json`中直接配置nsis配置命令行参数(CLI)Commands(命令):Building(构建参数):Publishing(发布):Deprecated(废弃):Other(其他):Examples(例子):TargetConfigurat...原创 2020-04-01 14:46:23 · 15115 阅读 · 0 评论 -
【已解决】Html Webpack Plugin Error;html-withimg-loader无法正常解析html内的img
升级webpack之后发现原本之前用的好好的配置报错了:控制台报错:ERROR in Error: Parse Error: <img src={"default":"../images/6f9cab6b23e95a073e6ac0facf4b9a2a.jpg"}> </body></htm l> - htmlparser.js:240 n...原创 2020-03-18 16:01:47 · 2845 阅读 · 0 评论 -
【已解决】webpack css分离后图片路径不对应的问题
开局先填个几年前的坑。。。PS:⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.css分离使用 extract-text-webpack-plugin 已经不行了,请 @next 或改用 mini-css-e...原创 2020-03-17 21:53:38 · 262 阅读 · 0 评论