Web应用程序是用于创建动态网站。Java提供的Web应用程序通过servlets和JSP的支持。我们可以创建一个静态HTML页面的网站，但当我们想要的信息是动态的(和网站有交互),需要的Web应用程序。 本文的目的是提供Web应用程序的不同组件基本资料以及我们如何使用Servlet和JSP来创建我们的Java Web应用。 Web服务器和客户端 Web服务器是一个软件，可以处理客户端的请求和发送响应给客户端。例如，Apache是一种使用最广泛的Web服务器。We...
开发离线Web应用需要几个步骤: 首先确保应用知道设备是否能上网。 应用必须能访问一定的资源(图像,Javascript,CSS)，这样才能正常工作。 离线检测 navigator.onLine HTML5新定义的属性，这个属性值为true表示设备能上网，值为false表示离线设备。这个属性的关键是浏览器必须知道设备能否访问网络，从而返回正确的值。 相关事件类型:online和offline HTML5还定义...
想要实现这样一个父元素中的子元素都是居中的 只需在父元素上加样式 {display: flex;flex-direction: column;align-items:center;} 设置为flexbox布局，方向为纵向排列，第三句是使其居中。 如果三个子元素的距离要自己设定，就设置margin-top或margin-bottom就好了； 如果让其自动调整，可以给父元素的样式再加上 {justify-content：space-around;} 这样剩余的空间会自动分配...
在写网页过程中，会遇到这种需要多个图标展示: 如上图中的「女装」文字左边的图标。容易想到的解决方法是为每张图片加入标签，但这样做会增加HTTP请求数量，影响网站加载速度。比这更优的解决方案是：雪碧图sprite。 所谓雪碧图就是把我们所需要的所有小图片用CSS sprite或者PS工具拼接成一张大图片，然后通过元素的background-image、background-positon属性完成图片的定位。 为此，我做了个Demo。 ...
这篇文章通过两个加载动画向大家介绍CALayer的动画。按照面向对象的思想说，Layer其实就是一个模型类，像Java里的POJO类一样，它包含若干属性，并没有任何处理逻辑的方法，这些属性影响着显示在Layer中的内容。我们先来看看UIView和CALayer之间有什么区别和联系。 联系：Layer是View背后的那个女人。每一个UIView后面都有对应的CALayer，大家看到的在UIView中显示的内容其实是在CALayer中。 区别： View有...
× 目录 [1]跟随图标 [2]视频提示 [3]下拉菜单 [4]边缘对齐 [5]星号 [6]全屏适应 [7]半区翻图 [8]九宫格 [9]等高布局 [10]整体布局 前面的话 之前的博客文章已经详细介绍过绝对定位的基础知识，由于它的用途实在广泛，于是单独为其写这篇关于其应用的博客。关于绝对定位的基础知识移步至此 静态位置 当元素绝对定位后，若该元素的格式化属性不发生变化...
主程序的部分代码: app = Flask(__name__)@app.route(/, methods=[GET, POST])def home(): return render_template(home.html) Welcome, {{ username }} #这里的url无效 Welcome, {{ username }}! 我直接运行home.html是可以显示图片的的 但是一旦通过python返回的html模板就不能显示图片了,就像这样: 两个网页的html源码在图片部分是一样的,但是通过python返回给浏览器的html就不能显示图片...
首先，在开发React之前，我认为应该是一件不太难的事，因为有比较丰富的backbone.js, marionette.js的开发经验，再加上大体了解它的思想，简单的认为和定义View的render，template的方法大同小异，只不过用了JSX奇怪的语法用javascript来代替html形式的模版。刚开始开发的时候，一个页面一个页面的像玩具一样的写，觉得还行，然后开始重构，把一些公共的部分，header，footer开始往layout组件上分配，然后一下子懵圈了，这怎么搞？...
rem/em/px/pt的基友关系 px像素相对长度单位,相对于显示器屏幕分辨率而言 em相对长度单位,根据其父元素来设置字体大小 ptpoint，是印刷行业常用单位，等于1/72英寸 remCSS3新增的一个相对单位,是根据网页的跟元素（html）来设置字体大小 rem应用于适配 rem的特性同样适用于width和height，我们可以根据根元素的font-size值来改变元素的宽高值，由此我们应该可以联想到我们可以根据屏幕大小动态地给html设定不同的...
我们知道在页面上载入小图标有多种方式，比如我们使用比较多的是css sprite背景图片定位，就是将很多小图标集成到一张大图，然后使用CSS定位背景。还有一种比较现代的方式是使用font字体图标，它利用@font-face原理载入图标字体库，然后调用图标。 查看演示 下载源码 使用css sprite方式非常方便，可以有很多色彩缤纷的图标，而且兼容性好，但是缺点就是图标不能缩放，或者说缩放了会失真，另外维护也不方便，修改...
× 目录 [1]漂浮的白云 [2]旋转的星球 [3]正方体合成 前面的话 前面介绍过动画animation的详细用法，本文主要介绍动画animation的三个效果 漂浮的白云 【效果演示】 【简要介绍】 漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片，通过改变其背景定位来实现白云移动效果，通过设置不同的动画持续时间来实现交错漂浮的效果 ...
原文： Learn Vuex by Building a Notes App ，有删改。 本文假设读者熟悉 Vuex 文档 的内容。如果不熟悉，you definitely should！ 在这个教程里面，我们会通过构建一个笔记应用来学习怎么用 Vuex。我会简单地介绍一下 Vuex 的基础内容， 什么时候该用它以及用 Vuex 的时候该怎么组织代码，然后我会一步一步地把这些概念应用到这个笔记应用里面。 这个是我们要构建的笔记应用的截图： 你可以从 Github ...
本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术，但是它有缺点：高清屏会模糊、无法动态变化如hover时候反色。而使用图标字体可以完美解决上述问题，同时具备兼容性好，生成的文件小等优点。 雪碧图 雪碧图实例：淘宝PC端 将多张小图放至一张大图 使用的时候，通过background-position调整显示的位置，如下图所示： 雪碧图的使用方法 使用雪碧图唯...
最近看到一篇非常好的文章，关于开发无障碍的web网页的内容，其实我们的工作中很少会去要求这方面的需求，但是其实如果我们能在开发过程中稍微留心的去安下文中的方法去做也耗费不了多少功夫，但是这么小的举动却可以帮助很多残疾人士，希望转载过来这篇文章可以让更多从事前端的同学看到。 Web无障碍设计（Accessibility in Web design，也叫网站可及性 ）是要让所创建的网站对所有用户都可用/可访问，不管用户的生理/身体能力...
× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐 [4]输入框按钮 [5]等分布局 [6]自适应布局 [7]悬挂布局 [8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用 元素居中 【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items .parent{ display: flex; justify-content: center...