CSS3伪类选择器:last-child的理解和使用

最近弄东西时遇到一个css3选择器的小小的问题,就是伪类选择器的问题。起源是这样的,我要实现如下的一个效果: 时遇到小问题了。写出来的效果是这样的: 本以为很简单,使用css伪类 :last-child 把 border-bottom 弄没就行了,但是我还是想简单了。 我的页面是这样写的: 123456789101112131415<div id="app"> <div class=

 阅读全文...

内网穿透技术实现微信公众号本地开发

开发过微信公众号的盆友们都知道,由于微信公众号开发本身框架、微信安全等众多原因,开发调试起来比一般的前端开发麻烦不少,尤其是本地调试问题。 一开始大家可能是每次修改好了,提交到服务器,服务器做一个自动更新部署hook,然后在手机端或者微信微信web开发工具上就可以看到了。 这个办法是可行的,但是当开发人员多的时候,就很麻烦了。每次提交代码时,要先更新队员们的代码,如此繁琐。总之问题基本归结如下: 问题和说明 公众号调试查看需要在微信we

 阅读全文...

web实现消息推送及桌面提醒2

窗口,我们可以把它做的更酷一些。 就类似我们之前描述的,来一个 HTML5 提醒面板,再放一段语音。这个就有些类似12306 的抢票了。 还是先看下我们的效果图: 我们重点说下 HTML5 Notification Notification 从字面意思理解就是”提醒”、”注意”的意思。所以它的作用就是,我们在忙于其他工作时,也可以收到来自页面的消息通知,例如一个新订单或者新邮件来了。 作为 HTML5 的新东西,主流浏览器除

 阅读全文...

web实现消息推送及桌面提醒1

应用场景介绍最近做一个点餐小系统,用户下单并付款成功后,立即给 cms 管理系统发送一个推送消息,提示有新的订单请及时处理。 但并不是发送手机消息,而是发送电脑上的消息通知。效果如图: 实现基本思路 推送消息部分:为了减少工作量,保证系统的稳定性,直接使用第三方服务。(也是自己能力不够,没法开发自己的推送服务) 桌面推送部分:接收到服务器推送后,调用 HTML5 Notification ,显示推送通知面板,同时播放语音消息。

 阅读全文...

flex实现css左右布局

关于css左右布局,大家应该都很有体会。左边一个图,右边文字,类似下图的效果:实现方法也很多,我平时使用的方法主要有两个: 左右浮动. 可以左边绝对定位,然后把右边的margin-left,或者padding-left设置一下。 这两个方法有利有弊。浮动兼容性最好,但是会对后面的元素产生影响,要清除浮动。绝对定位,书写比较复杂。 今天和大家分享一个比较高大上的方法:flex。具体语法大家可以在这里学习

 阅读全文...

less文件编译成微信小程序wxss文件

对于基本不使用原生 css ,而习惯编写 less 的我,这个事儿让我的样式编写相当的吃力。 在尝试配置 koala (一个可以编译less/sass的工具)以及搜索各种资料后,终于找到了一个可行的方法。我以less 为示例,和大家分享下。 sass 也是可行的。 环境要求: webstrom 编辑器 nodejs 环境 具体步骤1.使用 nodejs 命令安装 less。在 nodejs 命令窗口输入: npm

 阅读全文...

Sublime编辑器使用

首先声明下,本文是为真正的编程小白而写。 Sublime是目前好评率比较高的开发编辑器,简洁、轻巧、美观、免费。对比以前的 nodepad++, dreamweaver,我个人真的喜欢它的这些特点。给大家介绍下使用方法,仅仅针对web前端的简单开发。 我们一般使用的sublime都是英文界面,请不要感到迷茫或者害怕。很简单的一个小软件, 我们的英文词汇丝毫没有压力。 开始我们的教程: 1.新建网页 我们在桌面新建

 阅读全文...

web页面的基本概念

web页面,也叫网页。就是我们平常上网时,在浏览器中看到的页面。如百度、新浪等。准确来说 。www.baidu.com 这是一个网站,由多个网页组成。 网页表现形态 我们再浏览器的地址栏里输入 www.baidu.com 然后回车,浏览器展现给我们的就是普通的网页。内容有图片、文字、输入框、按钮等。这些就是组成了网页的基本元素。 网页的真实形态如果我们再网页上右键,选择“ 显示网页源代码 ”,我们可以看到一些好像很高科

 阅读全文...