在Pinterest上看到一张loading图，如下，忽然想把它用css写出来，于是就写了。。。 可能实现效果不一定完全一模一样，权当是娱乐了。
最近刚刚开启网站HTTPS，看着在谷歌流量浏览器下打开显示安全的绿色小锁，瞬间觉得高大了不少， 但是发现个问题，就是文章页面图片不显示了，，，，表情瞬间凝固，一个大写的尴尬￣□￣｜｜ 于是f12看了下源码，发现图片还是保持http的状态，，然后谷百了一下，问题解决： 找到当前主题下的 function.php 文件，编辑之，在里边代码的末尾追加如下代码： 原文：http://www.mobibrw.com/2016/3047
谷歌旗下的网页字体调用Google Fonts API旨在帮助用户加载不同网站时复用资源达到提高加速速度的目的。目前该公司提出了新的解决方案用来提高中文字体的加载速度， 该方案主要利用机器学习对字符集进行排序。我们知道拉丁语系的网络字体通常大小只有 100~400KB，其他写作系统的字体大小通常只在200~600KB间。 但是中文系列的字体文件则需完整包含 44,683 个字符，这致使整个字体文件的大小介于15MB~20MB 之间。因此中文网站在调用网络字体时会占用带宽资源， 同时用户也需消耗更多的时间去加载网络字…
else if语句应用十分广泛，通过该语句做个简单问候语的功能； 首先定义个变量获取当前时间，在应用getHours()方法获取系统当前小时值，在使用else if语句判断时间段输出问候语； html代码： <button onclick="date()">点击</button> JS代码 <script> function date(){ var now=new Date(); var h=now.getHours(); if(h>5&&h<=7){…
HTML代码 <form action="" method="post" name="form1" > <input name="user" id="user" type="text"> <input name="pwd" id="pwd" type="text"> <input type="button" name="Button" value="登录" onClick="check()"> </form> JS代码 <script> fun…
这里的demo都只是针对现代浏览器所做，未兼容低版本的IE以及其它非主流浏览器。 11种实现方式分别如下： 1. 使用绝对定位和负外边距对块级元素进行垂直居中 html代码： <div id="box"> <div id="child">我是测试DIV</div> </div> css代码： <style> #box { width: 300px; height: 300px; background: #ddd; position: rela…
今天主要是说一些偏门一点的 CSS 样式、技巧。 什么是偏门，就是有些片段很少使用，时间久了就记不起来，但用的时候又要去找，所以这里为大家整理一些少用但又实用的 CSS 样式， ::-Webkit-Input-Placeholder input 的 H5 placeholder 属性，很好用，但不能直接改这个文字颜色，所以目前的解决方法就是用::input-placeholder属性来改。 小Tips: 配合 opacity 属性使用效果更佳哦！ ::-webkit-input-placeholder { /* C…
在Web编码中，CSS默认应用的Web字体是有限的，虽然在新版本的CSS3，[email protected]器加载字体。 但多数情况下，考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写，这里整理了19个Web安全字体，让你无需任何顾虑的情况下畅快使用。 1, Arial 微软公司的网页核心字体之一，最常用的sans serif字体，当字号很小时不容易阅读。但是，大写的“I”和小写的“l”是无法区别的，你可以考虑用Tahoma字体来替代。 （苹果系统没有这种字体，…
1、Web 程序员需要了解哪些知识点 Web应用程序主要是运行在浏览器上，我们平时打开的网页就是一个 Web 程序，常见的 Web 技术有： HTTP FTP POP3 SMTP TCP IP protocols HTML XML Coldfusion ASP JSP PHP ASP.NET 2、浏览各式各样的网站 在我们通常使用的浏览器中如 Chrome，Firefox 可以按下 F12 按键（或者右击鼠标=》查看源码）来查看网页的源代码。 网站类型有：企业站、门户站、个人博客、信息百科、社交等。 3、学会使用一…
怎么说呢， 今天放个轮播代码吧，韩都衣舍天猫店首页轮播，最近刚优化了下，平常可能经常加一些效果代码在上面，为了避免和一些效果代码冲突，可能啰嗦了点，需要店铺支持CSS功能，喜欢的记得点个赞。 首先是CSS部分： 页面代码部分： 欢迎到韩都首页参观，哈哈哈 write my essay
初学SVG的时候，感觉那一坨一坨的代码难读难懂，现在回过头仔细想想，是因为那时候看文档缺少一些具体的实例，导致学习起来很枯燥。如今SVG已经在前端各个领域都有所作为，无论是项目里的应用还是demo都所处可见，这里我就用一个实例的写法带新同学轻松的打开SVG动画的大门。 首先我们定义一块画布，然后在上面画一个圆形。 他看起来应该是这个样子的：（每一个实例我都会附加图片以及demo链接，方便直观的理解与源代码的查看，查看的时候请使用标准浏览器） 点击查看Demo 现在我们就让这个圆动起来 动起来是这个样子的（gif循环…
前端作为一种偏视觉化的编程技术，确实是外行比较适合的编程语言。想找工作的设计师，有一定的编程基础也会更受青睐。但是在我和很多设计师在打交道的过程中，发现大部分人对于学习编程存在一些误区。 比如很多人虽然想学但又认为编程太难有排斥心理；相对地也有一些人用CSS写了一些样式会觉得前端很简单；还有些人不知道从何下手，就开始啃起了枯燥无味的w3school文档（web技术中文文档）。于此我觉得设计师想学会写代码一定要对编程有正确的认知，既要对技术保持一颗敬畏的心，又不能从潜意识里排斥它。 我做了两年前端开发，同时也做过许多…
Sublime Text很多人或多或少都用过，可能很多人会发现。在Sublime Text无法直接打开浏览器，没有像DW那样的快捷键。有的只是右键打开默认的浏览器。而有时候又需要打开不同的浏览器。 这时候主角登场了——SideBarEnhancements。 SideBarEnhancements是一个可以自定义打开方式快捷键的工具包。他可以定义不同的快捷键打开不同的浏览器。接下来，我们先安装它。 在Sublime Text按下ctrl+shift+P打开命令面板，输入pcip，第一个就是安装控制包的选项了。 搜索…
atom-plugins some awesome atom-plugins ! ... 1. emmet html补全 2. active-power-mode 文字泡沫 3. power-mode 随地泡沫 4. atom-miku 跳舞的姑娘 5. autocomplete-plus 当输入的时候，提供可能的候选项。 5. atomic-chrome chrome里面的编辑框直接在atom编辑 6. minimap 源码预览图，提供丰富的自定义选项 7. file-icons || file-icon-sup…
插件描述：pagepiling.js是一个可以创建类似窗帘滚动网站的jQuery插件。它是灵活的，旧的浏览器和触摸设备兼容。您可以在原来的滚动的网站的基础上使用这个插件创建一个。 下载链接：https://github.com/alvarotrigo/pagePiling.js Demo演示：http://alvarotrigo.com/pagePiling/ 使用 正如您所看到的示例文件,您将需要包括jquery.pagepiling的JavaScript文件。js(或jquery.pagepili…
在页面上，表示HTML实体有多种方式，比如有“&+name;”、“&#+10进制ID”、“&#x+16进制ID”。而“\u+16进制”一般用于CSS的content样式属性。 空字符 – null 空字符：\u0000 空白 – whitespace 空字符表示没有字符，不占页面物理位置，空白是有物理位置的。空白包括空格、制表符、回车符和换行符。 空格-space： ， ，\u0020； 不间断空格： 或   或 \u00…
Flexbox Layout(Flexible Box)模块，W3C官方称为CSS弹性盒子布局， 是在CSS3中定义的一种新的布局模式。Flexbox可以控制在容器内的子元素的对齐方式、排列方式以及排序顺序，即使其子元素的尺寸是未知或者动态的 情况下。弹性容器的主要特点就是能够调整其子元素的宽度或者高度以使其能在不同分辨率的屏幕下能用最好的方式去填充可用空间。 Flex布局的主要思想是让容器能使其子元素的宽高（或其他属性）能够以最好的方式去填充可用空间（主要是去适应不同的设备跟分辨率）。一个Flex弹性盒子能让子元…
国内的主流浏览器都是双核浏览器：基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站. 代码示例 在head标签中添加一行代码： <html> <head> <meta name="renderer" content="webkit|ie-comp|ie-stand"> </head> <body> </body> </html> content的取值为webkit,ie-comp,ie-stand之一，…
正则表达式可以: 测试字符串的某个模式。例如，可以对一个输入字符串进行测试，看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证 替换文本。可以在文档中使用一个正则表达式来标识特定文字，然后可以全部将其删除，或者替换为别的文字 根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字 正则表达式语法 一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，…
