判断提交表单中邮箱格式及文章中含有某些特定单词及文章太短 html部分<form id="formbox" action="/a.php" method="post"> <table border="0" width="100%" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="left"><input type="text" class="abilityContact-left-input" name="contacts" placeholder="* Name"></td> <td align="center"><input type="text" class="abilityContact-left-input" name="mobile" placeholder="Phone"></td> <td align="right"><input type="text" id="email" class="abilityContact-left-input" name="email" placeholder="* Email" onchange="checkEmail(this.value)"></td> </tr> <tr> <td colspan="3"> <textarea class="contactUsFont-textarea" id="content" placeholder="* Message" name="content" onchange="checkNum(this.value)"></textarea> </td> </tr> <input type="hidden" name="company" value="Google Ads source"> <tr> <td colspan="3"> <input type="submit" class="abilityContact-left-button" name="submit" id="submit" value="Send Message"> </td> </tr> </tbody> </table> </form>js部分<script> function checkEmail(str){ var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/ if(!re.test(str)){ alert("Please enter the correct mailbox format"); return false; }else{ return true; } } function checkNum(str){ if(str.length<50){ alert("Please enter more words so that we can better understand your needs"); return false; }else{ if(str.indexOf(' porn') != '-1') { alert("Please enter the requirements related to the website. We don't accept advertisements"); return false; }else{ return true; } } } $("#submit").click(function(){ var email=$("#email").val(); if(checkEmail(email)){ var content=$("#content").val(); // console.log(checkNum(content)); if(checkNum(content)){ return true; }else{ return false; } }else{ return false; } }); </script>

使用百度编辑器ueditor时,屏蔽不被过滤 1.在ueditor.config.js文件中将下面的过滤项，设置成如下所示// xss 过滤是否开启,inserthtml等操作 ,xssFilterRules: false //input xss过滤 ,inputXssFilter: false //output xss过滤 ,outputXssFilter: false // xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js ,whitList: { }2.在uedtior.all.js找到UE.plugins['defaultfilter'] = function () {加一个return;如下所示UE.plugins['defaultfilter'] = function () { return; var me = this; me.setOpt({ 'allowDivTransToP':false, 'disabledTableInTable':true });同时，将 autoClearEmptyNode:true, 改成false3.在uedtior.all.min.js找到UE.plugins.defaultfilter=function(){后面加一个return;4.最重要的最后一步ctrl+f5，强刷之后，再试有没有用

前端图片懒加载插件jquery.lazyload.min.js 使用方法引用jquery和jquery.lazyload.js到你的页面<script src="jquery-1.11.0.min.js"></script> <script src="jquery.lazyload.js?v=1.9.1"></script>html图片调用方法为图片加入样式lazy 图片路径引用方法用data-original<img class="lazy" data-original="img/bmw_m1_hood.jpg"> <img class="lazy" data-original="img/bmw_m1_side.jpg"> <img class="lazy" data-original="img/viper_1.jpg"> <img class="lazy" data-original="img/viper_corner.jpg"> <img class="lazy" data-original="img/bmw_m3_gt.jpg"> <img class="lazy" data-original="img/corvette_pitstop.jpg">js出始化lazyload并设置图片显示方式<script type="text/javascript" charset="utf-8"> $(function() { $("img.lazy").lazyload({effect: "fadeIn"}); }); </script>在图片中也可以不使用 class="lazy"，初始化时使用： $("img").lazyload({effect: "fadeIn"}); 这样就可以对全局的图片都有效！

CSS实现单行、多行文本溢出显示省略号（…） 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。实现方法：overflow: hidden; text-overflow:ellipsis; white-space: nowrap;效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号，如下。实现方法：display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；注：1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：2.display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。3.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。实现方法：p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;} p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px; background: -webkit-linear-gradient(left, transparent, #fff 55%); background: -o-linear-gradient(right, transparent, #fff 55%); background: -moz-linear-gradient(right, transparent, #fff 55%); background: linear-gradient(to right, transparent, #fff 55%); }适用范围：该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。注：1.将height设置为line-height的整数倍，防止超出的文字露出。2.给p::after添加渐变背景可避免文字只显示一半。3.由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。

2020 设计师最佳配色工具盘点（58+网站合集） 众所周知，配色是设计中非常重要的部分，一个好的配色不仅能让我们的设计更加出彩，还能对用户产生情感影响。小编今天给大家整理了Muzli上 58个今年最佳的配色工具，相信一定能对你们有所帮助~<p>1.Muzli Colors</p><p>https://colors.muz.li</p><p>可以在线快速生成和编辑多种配色方案，并根据我们自己的颜色选择预览和下载自定义UI工具包。</p><p><noscript></noscript></p><p>2. Colorable</p><p>https://colorable.jxnblk.com/</p><p>一款非常实用、用来评估配色可访问性的工具。</p><p><noscript></noscript></p><p>3. History’s Palettes</p><p>https://colorleap.app/home</p><p>一键生成复古配色，搜索过去4000年来最具有代表性的的180个配色方案。</p><p><noscript></noscript></p><p>4. Picular</p><p>https://picular.co/</p><p>Picular是一款基于谷歌图像搜索的色彩生成器，只需输入描述词，就能快速生成配色方案。</p><p><noscript></noscript></p><p>5. Colourcode</p><p>https://colourco.de/</p><p>Colourcode是一个让色彩理论可视化的配色网站，选定一个颜色即就能看到它的互补色、相似色等等。</p><p><noscript></noscript></p><p>6. Palettte App</p><p>https://palettte.app/</p><p>palettte是一款色彩编辑和重映射工具，能够可视化的看到不同颜色之间的过渡流畅度，匹配出更和谐的色彩，还支持单个颜色微调。我们还可以导入、分析和编辑现有的色彩方案。</p><p><noscript></noscript></p><p>7. Colorinspire</p><p>https://www.colorinspire.io/</p><p>收录了很多场景的精选配色方案，为我们提供源源不断的色彩灵感。</p><p><noscript></noscript></p><p>8. ColorSpace</p><p>https://mycolor.space/</p><p>Color Space是一款非常实用的渐变生成器，我们只需要选择一个颜色，就可以快速生成20~30种不同风格的配色方案。</p><p><noscript></noscript></p><p>9. Pigment</p><p>https://pigment.shapefactory.co/</p><p>Pigment可以通过饱和度、色温以及色系来生成我们独特的配色方案，还可以查看不同配色的配色场景图片。</p><p><noscript></noscript></p><p>10. Adobe Color</p><p>https://color.adobe.com/create</p><p>Adobe Color通过拖拽色轮或输入自定义色值，我们可以创造出基于相似、互补、三原色等不同色彩规则的配色方案。除此之外，还支持CMYK、RGB、HSV多种色彩模式的配色调整。</p><p><noscript></noscript></p><p>11. Colors & Fonts</p><p>https://www.colorsandfonts.com/</p><p>Colors&Fonts是由国外一名设计师Michael Andreuzza创建的配色网站，里面收录了超多他精心收藏的配色方案，我们只需要输入描述词，网站就会推荐相应的配色方案，除此之外还有渐变、字体等多种选择，一键复制色值。</p><p><noscript></noscript></p><p>12. HueSnap</p><p>https://www.huesnap.com/</p><p>「HueSnap」是一款实用的取色工具，我们可以从图像中捕捉到色彩的详细信息，包括十六进制、RGB、CMYK、HSV、HSL等等。除此之外，我们还可以在社区中浏览超多非常棒的配色方案灵感，并收藏和保存它们。</p><p><noscript></noscript></p><p>13. Culrs</p><p>https://culrs.com/</p><p>Culrs是一个综合型的配色网站，可以通过邻近色、三色、四色和单色来搜寻灵感配色。除此之外，每种色彩规则下还有明暗分类，相当方便。</p><p><noscript></noscript></p><p>14. Eva Design System</p><p>https://colors.eva.design/</p><p>Eva Design System是一个基于深度<span class="wp_keywordlink_affiliate">学习</span>算法的配色网站，适用于给我们的产品或品牌生成一个系统的配色方案。</p><p><noscript></noscript></p><p>15. Scale</p><p>https://hihayk.github.io/scale/</p><p>快速色标生成器</p><p><noscript></noscript></p><p>16. Site Palette</p><p>http://palette.site/</p><p>Site Palette是一款设计师和前端开发人员必备的谷歌插件。可以自动吸取网站的主要颜色，帮助我们建立色板，以及寻找相关配色的图片，并一键下载配色方案。</p><p><noscript></noscript></p><p>17. BrandColors</p><p>https://brandcolors.net/</p><p>BrandColors是最大的官方品牌配色合集。有包括500多个品牌的十六进制颜色代码，包括Facebook，Twitter，Instagram等等。</p><p><noscript></noscript></p><p>18. Colorwise</p><p>https://colorwise.io/</p><p>Colorwise将时下最受欢迎的配色方案按照适用场景分类，以便我们快捷地寻找配色灵感。</p><p><noscript></noscript></p><p>19. HTML Color Codes</p><p>https://htmlcolorcodes.com/</p><p>颜色图表和带有Hex颜色代码，RGB和HSL值的HTML颜色名称，轻松查找网站的HTML颜色代码。</p><p><noscript></noscript></p><p>20. ColorBox</p><p>https://www.colorbox.io/</p><p>ColorBox可以帮助我们轻松地创建非常炫酷的色彩集，配色页面还有大量的个性化选项，满足我们的任何需求~</p><p><noscript></noscript></p><p>21. Generate — Coolors.co</p><p>https://coolors.co/</p><p>几秒钟之内创建，保存并分享好看的配色方案。</p><p><noscript></noscript></p><p>22. Color — Cloudflare Design</p><p>https://cloudflare.design/color/</p><p>专为UI设计师创建的配色工具，支持根据用户界面元素预览配色、循环浏览可访问的颜色组合并手动创建配色方案、通过网址导入或生成配色。</p><p><noscript></noscript></p><p>23. Instant Duotone Effect Generator</p><p>https://duotones.co/</p><p>双色调效果生成器，支持用户在线选择多达几十种双色调配色。</p><p><noscript></noscript></p><p>24. Material Design</p><p>https://material.io/resources/color/#!/?view.left=0&view.right=0</p><p>为UI创建和共享调色板，并测量任何颜色组合的可访问性。</p><p><noscript></noscript></p><p>25. Blendy</p><p>https://blendy.ml/</p><p>Blendy是一种快速预览CSS背景混合模式的工具。我们可以使用混合模式，颜色，渐变并在图像上进行尝试。</p><p><noscript></noscript></p><p>26.LOL Colors</p><p>https://www.webdesignrankings.com/resources/lolcolors/</p><p>LOL Colors是一款可爱的配色网站，色彩大多明快清新，直接拖动鼠标即显示色值，方便收藏色卡。</p><p><noscript></noscript></p><p>27. Color Hunt</p><p>https://colorhunt.co/</p><p>Color Hunt是一个免费开放的色彩灵感平台，拥有数千种时尚的配色方案。</p><p><noscript></noscript></p><p>28. ColorMe</p><p>https://colorme.io/</p><p>一个简单CSS色彩可视化工具，其特点是有非常多的参数可以设置，包括：透明度、饱和度、色调、亮度、着色、阴影、R/G/B、白色、黑色、对比度的设置等等。</p><p><noscript></noscript></p><p>29. Polarite</p><p>https://www.polarite.app/</p><p>Polarite是一款智能配色应用程序，用户只需左右滑动颜色选择喜欢/不喜欢的色彩，系统就会根据其结果智能生成一系列我们喜欢的且和谐的配色方案。</p><p><noscript></noscript></p><p>30. Gradient Hunt</p><p>https://gradienthunt.com/</p><p>精选数千种时尚的渐变色，并且每天都会更新。</p><p><noscript></noscript></p><p>31. Palettable</p><p>www.palettable.io</p><p>可以自己随意搭配色彩方案的网站，用户只需要选择喜欢/不喜欢，直到搭配出想要的色板。</p><p><noscript></noscript></p><p>32. ColorSpark</p><p>https://colorspark.app/</p><p>一个简单而有效的工具，随机生成好看的颜色、渐变色，可以一键复制 CSS 代码。</p><p><noscript></noscript></p><p>33. SVG Colorizer</p><p>https://www.iconshock.com/svg-color/</p><p>SVG着色器，自动为SVG图标和SVG矢量着色</p><p><noscript></noscript></p><p>34. Sip</p><p>https://sipapp.io/</p><p>适用于Mac的Sip ColorPicker。可以帮助我们更好的收集整理和分享配色方案。</p><p><noscript></noscript></p><p>35. CoolHue 2.0</p><p>https://webkul.github.io/coolhue/sketch-plugin/</p><p>一款免费的sketch渐变配色插件和收集工具。</p><p><noscript></noscript></p><p>36. Color Koala</p><p>https://colorkoala.xyz/</p><p>Color Koala是一个快速配色生成器。</p><p><noscript></noscript></p><p>37. SchemeColor</p><p>https://www.schemecolor.com/</p><p>SchemeColor可以下载、创建和分享成千上万种美丽的配色组合，获取十六进制颜色代码的详细信息，并将其转换为RGB和CMYK等色彩模式。</p><p><noscript></noscript></p><p>38. Free Mesh Gradient Collection</p><p>https://www.ls.graphics/meshgradients</p><p>100多个免费的渐变色合集，支持sketch、png、ai、jpg、eps等多种格式下载。</p><p><noscript></noscript></p><p>39. WebGradients</p><p>https://webgradients.com/</p><p>WebGradients是一个由顶级设计师策划的免费渐变配色网站，拥有180种漂亮的线性渐变，并支持CSS3、Photoshop和Sketch等多种格式。</p><p><noscript></noscript></p><p>40. Gradient Buttons</p><p>https://gradientbuttons.colorion.co/</p><p>炫酷的渐变按钮，还有悬停的动画效果,一键copy css代码。</p><p><noscript></noscript></p><p>41. ColorKit</p><p>https://colorkit.io/</p><p>多种色彩渐变生成器，只需输入开始和结束颜色以及混合步骤数，就能一键生成流畅的配色方案，并支持svg格式导出。</p><p><noscript></noscript></p><p>42. Eggradients</p><p>https://www.eggradients.com/</p><p>一款收录了最新设计趋势渐变色彩的配色网站，支持一键复制十六进制和CSS代码。</p><p><noscript></noscript></p><p>43. Cool Backgrounds</p><p>https://coolbackgrounds.io/</p><p>Cool Background是设计师Moe Amaya将5个开源生成器的简化版整理组成的工具集，内置五种背景风格，每一个种风格还提供了简单的参数配置。分别是：</p><p>低多边形风格</p><p>trianglify.io</p><p>▼</p><p><noscript></noscript></p><p>动态粒子效果</p><p>marcbruederlin.github.io/particles.js</p><p>▼</p><p><noscript></noscript></p><p>渐变</p><p>cssgradient.io</p><p>▼</p><p><noscript></noscript></p><p>渐变层生成器</p><p>s.muz.li/NTFiZjk0ZWFh</p><p>▼</p><p><noscript></noscript></p><p>Unsplash图片集</p><p>unsplash.com</p><p>▼</p><p><noscript></noscript></p><p>44. Art Palette</p><p>https://artsexperiments.withgoogle.com/artpalette/</p><p>基于Google AI的智能配色工具，它会根据你所提供的配色方案来提供相符合的配色主题的艺术图片。</p><p><noscript></noscript></p><p>45. GradPad</p><p>http://ourownthing.co.uk/gradpad.html</p><p>CSS渐变生成器，我们可以自己设置渐变色彩、透明度、位置和角度，还可以查看流行的热门渐变色彩，并直接使用现成的颜色代码。</p><p><noscript></noscript></p><p>46. Khroma</p><p>http://khroma.co/</p><p>Khroma号称是“设计师的AI颜色工具” ，会先让你从大量的颜色中选择你最喜欢的50种，然后利用神经网络驱动算法来帮你生成最符合你审美要求的配色方案，并且它所有给出的的配色都是从最流行的配色方案中<span class="wp_keywordlink_affiliate">学习</span>得来。</p><p><noscript></noscript></p><p>47. Color palettes</p><p>ttps://www.canva.com/colors/color-palettes/</p><p>Canva上数千种精选色彩组合</p><p><noscript></noscript></p><p>48. Color Safe</p><p>http://colorsafe.co/</p><p>Color Safe是一个基于Web内容无障碍指南（WCAG）的配色网站，可以根据我们提供的色彩检测可访问性，并给出相应的调整方案。</p><p><noscript></noscript></p><p>49. Paletton</p><p>http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF</p><p>Paletton 是一个在线的色环配色工具。我们可以根据需要选择单色、相近色、对比色等规则来查看配色，也可以实时查看其在网页中的搭配效果。</p><p><noscript></noscript></p><p>50. Colordot</p><p>https://color.hailpixel.com/</p><p>动一动鼠标就可以不断生成的新的色卡。非常适合毫无灵感、不知从何下手的设计师。</p><p><noscript></noscript></p><p>51. Colors</p><p>https://klart.io/colors/</p><p>100％由数据驱动的配色方案集合。</p><p><noscript></noscript></p><p>52. Contrast Ratio</p><p>https://contrast-ratio.com/</p><p>一款轻松计算颜色对比度的配色工具。</p><p><noscript></noscript></p><p>53. Color Lisa</p><p>http://www.colorlisa.com/</p><p>世界上最伟大的艺术家的色彩杰作。</p><p><noscript></noscript></p><p>54. Color Designer</p><p>https://colordesigner.io/</p><p>只需选择一种颜色，Color Designer就会帮助我们构建一个系统的配色方案，并基于我们所选的颜色生成多种色调和阴影等。</p><p><noscript></noscript></p><p>55. Color.review</p><p>https://color.review/</p><p>测试颜色对比度的配色工具</p><p><noscript></noscript></p><p>56. Blend</p><p>http://www.colinkeany.com/blend/</p><p>Blend – 创建和自定义漂亮的CSS3渐变。</p><p><noscript></noscript></p><p>57. Contrast</p><p>https://usecontrast.com/</p><p>一个用于快速测试WCAG颜色对比度的macOS应用程序</p><p><noscript></noscript></p><p>58. Grabient</p><p>https://www.grabient.com/</p><p>一个非常漂亮且实用的渐变网站，支持 CSS 样式代码复制、360度渐变旋转、自由增加或删除渐变颜色等功能。</p><p><noscript></noscript></p>