网站开发进阶
关注
分享
扫一扫
文章平均质量分 73
网站设计开发，主要针对电子商务领域，它不仅是网站美工和内容，它可能涉及到网站的一些功能的开发，比制作有更深层次的意思。
针对领域：针对不同的行业领域与市场规模，提供有针对性的解决方案，采用业内最优化的电子商务流程，以及各种受消费者欢迎的营销工具。
No Silver Bullet
业精于勤荒于嬉，行成于思毁于随。
学业由于勤奋而专精，由于玩乐而荒废；德行由于独立思考而有所成就，由于因循随俗而败坏。
——出自（唐）韩愈《进学解》
展开
-
linux应用ssh完成scp复制
在linux操作系统中，可以使用scp命令进行服务器之间的文件复制，但是复制时需要输入远程服务器的密码，这在经常需要进行远程复制操作时会略显麻烦，如果远程复制是在定时任务中执行，更会导致脚本不能自动执行，这时就需要实现无需输入密码进行scp复制。无需输入密码进行scp复制的方法有多种，本博文介绍下使用公私钥来实现无需输入密码完成scp复制。原创 2024-08-13 11:02:18 · 564 阅读 · 0 评论 -
Vue进阶（幺贰零）：父组件获取子组件验证结果
在开发Vue项目过程中，代码复用之自定义组件是常做事情。当子组件为form表单的时候，父组件需要获取子组件（表单）的验证结果。尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。通过这种方式，便可以在父组件中调用子组件方法！子组件原创 2020-05-29 16:35:57 · 4411 阅读 · 4 评论 -
Vue进阶（贰幺幺）前端开发需知悉的浏览器及其内核
只是用户看到仅仅只是浏览器本身，却很少能看到浏览器最核心的部分—浏览器内核。从第一款libwww（Library WorldWideWeb）浏览器发展至今已经经历了无数竞争与淘汰了。现在国内常见的浏览器有：IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等。但目前最为主流浏览器有五大款，分别是IE、Firefox、Google Chrome、Safari、Opera。原创 2023-11-28 11:09:02 · 1613 阅读 · 0 评论 -
网站开发进阶（六十二）最强大的 CSS 布局——Grid 布局
Grid 布局相关的属性以及值众多，需要记忆的不少，建议可以跟 demo 一起结合起来，边敲代码边理解，再利用一些空闲时间记忆一下。笔者会在介绍每个属性的时候，做个小 demo 演示，建议大家可以自己修改看看效果加深记忆。Grid 布局属性可以分为两大类，一类是容器属性，一类是项目属性。我们先来看容器属性。可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置。属性：左边框所在的垂直网格线；属性：右边框所在的垂直网格线；属性：上边框所在的水平网格线；属性：下边框所在的水平网格线；原创 2017-03-15 13:51:46 · 96141 阅读 · 1 评论 -
网站开发进阶(七十一）：css伪元素::before和::after用法详解
文章目录一、前言二、伪元素::before和::after用法三、::before 和 ::after 特点四、::before 和 ::after 常见使用场景4.1 清除浮动4.2 利用attr()来实现某些动态功能4.3 与counter()结合实现序号问题，而不用使用列表元素4.4 超链接特效4.5 特效使用五、拓展阅读一、前言CSS3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常见伪元原创 2022-05-11 16:37:21 · 7706 阅读 · 0 评论 -
网站开发进阶(七十）：CSS 实现圆角有立体感的 DIV 边框
IntelliJ IDEA 2016&2017注册方法和注册码 题外话：看到IntelliJ的启动界面，不得不说画面做的太炫了！ IntelliJ IDEA号称当前Java开发效率最高的IDE工具。IntelliJ IDEA有两个版本：社区版(Community)和旗舰版(Ultimate)。社区版时免费的、开源的，但功能较少，旗舰版提供了较多的功能，是收费的，可以试用30天。原创 2017-03-14 11:05:20 · 50260 阅读 · 0 评论 -
网站开发进阶（六十九）防抖节流
文章目录前言防抖 (debounce)节流 (throttle)总结拓展阅读前言防抖 (debounce)防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。想要了解一个概念，必先了解概念所应用的场景。在 JS 这个世界中，有哪些防抖的场景呢？登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖；调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖；文本编辑器实时保存，当无任何更改操作原创 2021-07-18 17:44:49 · 1556 阅读 · 8 评论 -
网站开发进阶（六十八）CSS3媒体查询@media
文章目录一、前言二、媒体查询语法三、应用示例四、浏览器兼容性一、前言媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有：width、height和color（等）。使用媒体查询可以在不改变页面内容的情况下，为特性的一些输出设备定制显示效果。二、媒体查询语法CSS3中的媒体查询：根据浏览器窗口大小的改变，页面颜色就会改变。CSS3 语法@media mediatype and|not|only (media feature) { CSS-Code原创 2021-07-15 14:28:06 · 1210 阅读 · 6 评论 -
网站开发进阶（六十）：Javascript追加style样式
前言在前端开发过程中，会遇到js实现业务逻辑的时候代码式追加元素样式的应用场景。思路1、通过拼接cssText方式实现。2、通过设置class，累加设置class方式实现 。代码示例1、第一种方式可以应用下面函数实现，el表示待追加样式的dom节点，strCss表示待追加的样式。function setStyle(el, strCss){ function endsWith(str, suffix) { var len = str.length - suffix.len原创 2021-04-22 15:47:09 · 3004 阅读 · 0 评论 -
网站开发进阶（六十七）浅谈css中hsl()和hsla()设置颜色值的方法与应用
实例定义 HSL 颜色：#p1 {background-color:hsl(120,100%,50%);} /* 绿色 */#p2 {background-color:hsl(120,100%,75%);} /* 浅绿 */#p3 {background-color:hsl(120,100%,25%);} /* 暗绿 */#p4 {background-color:hsl(120,60%,70%);} /* 柔和的绿色 */定义与用法hsl() 函数使用色相、饱和度、亮度来定义颜色。H原创 2021-04-13 14:49:54 · 2693 阅读 · 4 评论 -
网站开发进阶（六十三）详解CSS3中的calc()
CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。.foo { width: calc(100px + 50px);}如果你使用过 CSS 预处理器，比如 SASS，以上示例你或许碰到过.foo { width: 100px + 50px;}// Or using SASS variables$width-one: 100px;$width-two: 50px;.bar {原创 2021-04-13 14:49:28 · 3365 阅读 · 0 评论 -
网站开发进阶（五十玖）css实现背景透明，文字不透明
背景透明，文字不透明的解决方法：为元素添加一个绝对定位的子元素，设置大小和该元素一样，把半透明加在绝对定位元素上作为遮罩，z-index设置到最底部，达到背景半透明效果。使用CSS3新属性rgba。实现透明的方法：css3的opacity，取值从 0 到 1，如opacity : 0.5，IE9及以上版本和标准浏览器都支持。IE8 以及更早的版本支持替代的 filter 属性，例如：filter : Alpha(opacity=50)。css3的rgba(red, green, blu原创 2021-04-13 14:45:37 · 1617 阅读 · 0 评论 -
网站开发进阶（六十六）CSS3 - 新单位vmin/vmax与旧单位ex/ch使用详解
前言vw、vh、vmin、vmax 的含义（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。视窗(Viewport)是浏览器实际显示内容区域，换句话说是不包括工具栏和按钮的网页浏览器。（2）具体描述如下：vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）vh：视窗高度的百分比vmin：当前 vw 和 vh 中较小的一个值vmax：当前 vw 和 vh 中较大的原创 2021-04-13 14:45:05 · 2553 阅读 · 0 评论 -
网站开发进阶（六十五）css中 :not() 伪类选择器用法
单条件筛选单个的not写法：/*选中非段落元素*/:not(p){ }在前端项目开发过程中，如果希望某个样式不作用到选择器上，可以使用:not(选择器），如：<input type="text" value="1" /><input type="text" value="2" /><input type="text" class="no-red" value="3"/>input[type="text"] { display: block原创 2021-04-13 14:44:20 · 2445 阅读 · 0 评论 -
网站开发进阶（六十四）CSS 属性选择器讲解
导语自CSS 2 引入了属性选择器，属性选择器可以根据元素的属性及属性值来选择元素。简单属性选择器如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。下面的例子是把包含标题（title）的所有元素变为蓝色：[title]{ color:blue;}如果希望把包含标题（title）的所有元素变为红色，可以写作：*[title] {color:red;}与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：a[href] {color:red;}原创 2021-04-13 14:42:14 · 1375 阅读 · 0 评论 -
网站开发进阶（五十捌）IE9对CSS3属性的支持情况
IE9支持的伪类&伪元素:root:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n):last-child:first-of-type:last-of-typenly-childnly-of-type:empty:target:not(s):enabled:disabled:checked:indeterminate::selectionIE9不支持的伪类&伪元素..原创 2021-01-07 20:46:16 · 1637 阅读 · 3 评论 -
网站开发进阶（五十七）纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
圆形.circle { width: 100px; height: 100px; background: red; border-radius: 50px; }椭圆.oval { width: 200px; height: 100px; background: red; border-radius: 100px / 50px; }上三角...原创 2020-04-19 18:24:00 · 2067 阅读 · 0 评论 -
网站开发进阶（五十六）JS+CSS3实现罗盘样式钟表
主要用到原生态的 JS+CSS3实现罗盘样式钟表，主要可用于自定义网站玩耍，代码示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ...原创 2020-03-28 12:35:22 · 2050 阅读 · 1 评论 -
网站开发进阶（五十五）CSS padding、margin 属性
设置 p 元素的 4 个内边距：p{padding:2cm 4cm 3cm 4cm;}所有浏览器都支持 padding 属性。注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。定义和用法padding 简写属性在一个声明中设置所有内边距属性。说明这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替...原创 2020-01-01 20:47:35 · 2179 阅读 · 0 评论 -
网站开发进阶（五十四）jQuery获取父级元素、子级元素、兄弟元素方法汇总
网站开发进阶（五十四）query获取父级元素、子级元素、兄弟元素的方法 在项目开发过程中，在对元素进行样式控制时应用到的方法如下：function showOthers(obj){ // 通过jquery方式获取元素值 var type = $(obj).attr('_value'); if($(obj).is(':checked'...原创 2018-09-12 20:21:10 · 3073 阅读 · 0 评论 -
网站开发进阶（五十三）浅谈JS、Ajax、JQuery之间的关系
在项目开发过程中，遇到了一个奇怪的问题，详参《由此，而催生出此篇博文。也可以通过jquery下面主要讲解下jquery方面的基础知识，在网站开发过程中，jquery的确是一把利器。Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（jQuery使用户能更方便地处理events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery。原创 2018-09-08 16:43:17 · 2252 阅读 · 2 评论 -
网站开发进阶（五十一）The JSP specification requires that an attribute name is preceded by whitespace
The JSP specification requires that an attribute name is preceded by whitespace在开发Web项目时，报错如下： 错误位置： 解决方法：根据错误提示可知，在type属性之前缺少空格，通过添加空格解决问题。...原创 2019-09-15 09:38:14 · 2025 阅读 · 0 评论 -
网站开发进阶（五十）IE浏览器JS调试方法详解
网站开发进阶（五十）IE浏览器JS调试方法详解前言 在公司项目开发过程中，会经常性的调试jsp页面。下面主要讲解下如何在jsp页面进行js调试。 目前，常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能。在掌握了IE中的调试方...原创 2018-03-10 17:40:21 · 4356 阅读 · 0 评论 -
网站开发进阶(四十九)由JS报“未结束的字符串常量”引发的思考
网站开发进阶(四十九)由JS报“未结束的字符串常量”引发的思考报错 在做公司项目开发过程中，后期生产环境上报JS出现“未结束的字符串常量”错，如下： 后期经过不断调试，发现是由于Js引擎在解析带有换行字符串时引起的异常。解析后的js代码类似...原创 2019-09-15 09:38:36 · 1991 阅读 · 0 评论 -
网站开发进阶(四十八)JSP c:choose标签注释学习
网站开发进阶(四十八)JSP c:choose标签注释学习问题 开发过程中，发现在jsp页面中不可插入<!---->注释语句。具体代码如下：<c:choose> <c:when test="${'03000'==item.ndno}"><ccms:mess原创 2018-03-04 15:50:10 · 2086 阅读 · 0 评论 -
jQuery中的$.ajax()方法参数详解
jQuery中的$.ajax()方法参数详解ajax是异步更新，只需要进行少量的数据交互便可到达页面的局部刷新。其可用参数主要如下：1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.time原创 2017-08-20 17:04:14 · 6805 阅读 · 6 评论 -
网站开发进阶(四十七)html中padding-top与margin-top的区别
网站开发进阶(四十七)html中padding-top与margin-top的区别 padding-top:10px;是指容器内的内容距离容器的顶部有10个像素，是包含在容器内的； margin-top:10px;是指容器本身的顶部距离其他容器有10个像素，不饱含在容器内。 就像墙上挂着的两个相框，margin指的是相框与相框的距离，padding指的是每个相框里照片与相框边框的距离。原创 2017-06-16 09:01:50 · 6543 阅读 · 2 评论 -
网站开发进阶(四十六)JS进行DOM操作
网站开发进阶(四十六)JS进行DOM操作 在项目开发过程中，需要实现JS操作DOM。需要构造object对象，格式如下：<object label="查询" name="search" 查询库="search" 描述="查询".../> 属性设置界面如下图所示： 其获取属性值对应的代码如下：var input22 = createInput(); 相应的，可构造对应的object对象<obj原创 2017-05-25 09:51:57 · 13569 阅读 · 0 评论 -
网站开发进阶(四十五)浅谈XML与HTML的区别
网站开发进阶(四十五)浅谈XML与HTML的区别一、什么是HTML 带着疑问走到这里，一句话：HTML(HyperTextMark-upLanguage)即超文本标记语言，是WWW的描述语言。 二、什么是XML XML即ExtentsibleMarkup Language(可扩展标记语言)，是用来定义其它语言的一种元语言，其前身是SGML(标准通用标记语言)。它没有标签集(tagset)，也没有原创 2017-02-11 10:17:37 · 44448 阅读 · 0 评论 -
HTML5进阶(三)HBuilder实现软件自动升级(优化篇)
HBuilder实现软件自动升级(优化篇)前言受前篇博客《HBuilder实现软件自动升级》(点击查看详情)的影响，测试过程中发现APP自动更新还是存在问题，第一次升级没有任何问题。第二次升级时，若wrt升级包的名字相同，则会出现以下错误提示: 估计是HBuilder的BUG导致出现以上错误。受社区中盆友们思路的启发，在每次更新时提交不同文件名的wrt更新包，方可解决以原创 2016-03-16 11:09:03 · 60669 阅读 · 5 评论 -
HTML5进阶(二)HBuilder实现软件自动升级
HBuilder实现软件自动升级前言 移动APP开发好后需要实现软件自动升级功能，经过一番搜索，发现HBuilder具有“App资源在线升级更新”的功能，遂研究之。经过一番测试，在源码思想的基础之上对其进行了优化。代码如下: var wgtVer = null; function plusReady(){ // 获取本地应用资源版本号 plus.ru原创 2016-03-04 17:44:52 · 59646 阅读 · 1 评论 -
HTML5 LocalStorage 本地存储
HTML5LocalStorage本地存储 说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示： 早的Cookies自然是大家都知道，问题主要就是太小，大概也就4KB的样子，而且IE6只支持每个域名20个cookies，太少了。优势就是大家都支持，而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了，就好原创 2015-12-16 09:11:43 · 49207 阅读 · 0 评论 -
json进阶(一)js读取解析JSON类型数据
js读取解析JSON类型数据一、什么是JSON？JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式，同时，JSON是JavaScript原生格式。非常适合于服务器与JavaScript的交互。二、为什么使用JSON而不是XML他们都是这样说的：尽管有许多宣传关于XML如何拥有跨平原创 2015-07-23 19:18:55 · 55749 阅读 · 0 评论 -
Vue进阶（幺肆叁）：如何用绝对定位（position:absolute）完美定位布局及其注意事项
在《Vue进阶（幺肆贰）：CSS-静态定位，相对定位，绝对定位，固定定位的用法和区别详解》一文中，讲解了常用的几种定位方式。此博文主要讲解如何应用绝对定位实现完美布局，及应用注意事项。在布局过程中我们经常用到绝对定位，很多初学者在一开始用绝对定位经常会达不到预期的效果，因为它们往往会忽略使用绝对定位的两个条件。什么？使用绝对定位还要条件？当然要啦！代码又没有脑子，没法自己思考应该定位到哪里。为了使用的时候方便，使用绝对定位的时候要满足两个条件。在讲这两个条件的之前，我们要先提一个概念——标准流。什么是标准流原创 2020-09-10 10:10:39 · 20181 阅读 · 2 评论 -
Vue进阶（幺肆贰）：CSS-静态定位，相对定位，绝对定位，固定定位的用法和区别详解
CSS 提供了三种基本的定位机制：普通流、浮动和定位；通过这三种方式可实现页面的排版布局。普通流普通流中元素的位置由元素在 (X)HTML 中的位置决定：块级元素独自占一行，在文本流中从上到下一个接一个地排列；行内元素在一行中并排排列，遇到父元素的边沿会换行继续排列；浮动浮动会让元素脱离标准文档流，不再占原来的空间，可以让多个块级元素并排显示。定位定位是将元素定在某个位置，定位元素的层级要高于浮动元素；通过定位可以让元素相对于其正常位置进行偏移出现在别的位置，或者相对于父元素、另一个元原创 2020-09-10 09:14:42 · 11165 阅读 · 0 评论 -
Vue进阶（七十二）：css 样式中 逗号、空格、冒号、点号、~、＞的区别
css中用逗号隔开表示两个不同类的样式类名用同一个样式；空格隔开表示从属包含关系，是当前的元素子元素；逗号隔开表示并列关系，两者之间没有任何关系，可以使用同一个样式。比如下面的代码示例：<div class="content"> <span class="content-child">子内容</span>内容</div><...原创 2019-09-09 20:24:47 · 5603 阅读 · 1 评论 -
Vue进阶（幺幺捌）：CSS3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of-type
1.first-child（IE7兼容）、last-child（IE8不兼容）html：<body> <h2>列表</h2> <ul> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> <li>列表项目4</li> </ul></body>css：原创 2020-05-25 16:00:23 · 6544 阅读 · 0 评论 -
网站开发进阶(三十八)Web前端开发规范文档你需要知道的事
Web前端开发规范文档你需要知道的事规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代原创 2016-06-14 12:07:19 · 48729 阅读 · 0 评论 -
网站开发进阶(四十三)html中，路径前加“/” 与不加“/”的区别
网站开发进阶(四十三)html中，路径前加“/” 与不加“/”的区别前言 scriptsrc="js/downloadify.js">script>表示加载你当前页面目录中名为js的子目录下面名为pic.js的js包。 加“/”是代表绝对路径，不加“/”是代表相对路径。 HTML绝对路径(absolute path)在网页制作中指带域名的文件的完整路径。 HTML原创 2016-07-23 12:01:45 · 48011 阅读 · 0 评论 -
网站开发进阶(四十四)input type=“submit“ 和“button“的区别
网站开发进阶(四十四)input type=”submit” 和”button”的区别 在一个页面上画一个按钮，有四种办法： 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。 这个按钮放在 form 中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多原创 2016-12-27 12:27:11 · 47657 阅读 · 0 评论