随笔分类 - 【Web前端】
摘要：CSS颜色代码大全 FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000 #FFB7DD #FF88C2 #FF44AA #FF0088 #C10066 #A20055 #8C0044 #FFCCCC #FF8888 #FF3333 #FF00
阅读全文
摘要：背景： showModalDialog 是比较老的方法了，有些浏览器不再支持弹出模态窗口了。 比如说谷歌浏览就不再支持了，有文章说明如下： Chrome’s Lack of Support for showModalDialog Breaks Some Enterprise Web Apps 弹出窗
阅读全文
摘要：因为要统计数据进行图表展示，所以就简单学习了 ECharts JS 的应用。它是一个纯Javascript图库，它依赖于一个轻量级的Canvas库 ZRender，并提供直观、生动、交互式和高度可定制的数据可视化图表。 其官网地址为：http://echarts.baidu.com 教程文档地址：h
阅读全文
摘要：前言： 考虑自己网站的图片展示，而且要支持移动端和PC端。自己写的代码也不尽如意，要写好的话也需要时间，于是就想到了使用相关插件。 准备： PhotoSwipe 官网地址：http://photoswipe.com/ 英语还可以的同学可以看官方文档学习：http://photoswipe.com/d
阅读全文
摘要：1. 移动页面开发基础 1.1 像素——什么是像素 像素是 Web 页面布局的基础，那么到底什么才是一个像素呢？ 像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。这是像素的概念，实际上，Web 前端开发领域，像素有以下两层含义： (1) 设备像素：设备屏幕的物理像素，对于任何设备来讲物理
阅读全文
摘要：1.Web 文本中的省略号 在Web开发中，对于一种情况很常见。那就是，文本太长，而放置文本的容器不够长，而我们又不想让文本换行，所以，我们想使用省略号来解决这个问题。在今天HTML的标准中并没有相关的标识或属性让你可以简单地完成这个事。但是我们可以使用CSS样式表来完成这个事。 下面是HTML代码
阅读全文
摘要：图片的切换效果有很多，比较常见的有水平滚动、垂直滚动、淡入淡出等。我们接下来一一实现这些效果。 1.水平滚动 1） 我们先来实现HTML页面，代码很简单： 2）然后我们设置下CSS： 目前的显示效果如下： 3）接下来，我们需要点击实现图片的切换，下面是实现水平滚动效果的jQuery插件： 4）最后，
阅读全文
摘要：重要知识需要系统学习、透彻学习，形成自己的知识链。万不可投机取巧，临时抱佛脚只求面试侥幸混过关是错误的！ 面试有几点需注意： 前端开发知识点： 以下是面试题及其答案（这些知识点不要死记硬背，需要深入理解）： 【HTML + CSS 】 1.对WEB标准以及W3C的理解与认识 2.xhtml和html
阅读全文
摘要：在编写网页代码时，各种浏览器的兼容性是个必须考虑的问题，有些时候无法找到适合所有浏览器的写法，就只能写根据浏览器种类区别的代码，这时就要用到判断代码了。 1.HTML代码中 经过本人测试，在HTML代码中，区别各种浏览器的代码如下： 原理：针对不同版本的浏览器，这些代码都会被解释为Html注释而直接
阅读全文
摘要：承接前面一篇文章《浏览器的渲染原理简介》 ，本文来说下JavaScript的装载和执行。 通常来说，浏览器对于 JavaScript 的运行有两大特性： 1) 载入后马上执行 2) 执行时会阻塞页面后续的内容（包括页面的渲染、其他资源的下载） 所以，如果有多个JS文件被引入，那么对于浏览器来说，这些
阅读全文
摘要：How Browsers Work 这篇文章把浏览器的很多细节讲的很细，也有中文的翻译版本，现在转载的这篇是陈皓写的，目的的为了能在上班途中，或是坐马桶时就能读完，并能从中学会一些能用在工作上的东西。 无论是作为开发，还是作为黑客，企图从Web 端注入 SQL，或是XSS 的时候，编码和解码都是一个
阅读全文
摘要：CreateJS库是一款HTML5游戏开发的引擎，是一套可以构建丰富交互体验的HTML5游戏的开源工具包，旨在降低HTML5项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。 掌握了CreateJS可以更方便的完成HTML5的游戏开发。 CreateJS提供了EaselJS、T
阅读全文
摘要：通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明，相关效果也就可以实现了。 1.左右按钮tab选项卡双切换 很明显，左右两个按钮是 absolute 布局，另外就是内容部分和Tab标签部分。 1) 先实现Tab内容和标签部分的显示： HTML代码： CSS代码: 效果： 2) 然后我们把两
阅读全文
摘要：Tab标签切换效果是比较流行的一种网站页面布局，视觉表现为美观大方，通过标签展示内容。目前在各大网站都有存在这种效果。例如：淘宝的黄金位置使用Tab标签切换效果，网易新闻等。 1.简单的 Tab 标签 a) 先来实现Tab标签的头部 通过HTML和CSS完成基本的标签效果。包括HTML的div标签和
阅读全文
摘要：1.css垂直水平居中 效果： HTML代码： CSS实现： 都设置居中 div块的宽高和背景色。 a.用inline-block和vertical-align来实现居中： b.用相对绝对定位和负边距实现上下左右居中 c.利用绝对定位来实现居中 d.使用table-cell，inline-block
阅读全文
摘要：瀑布流就是像瀑布一样的网站——丰富的网站内容，特别是绚美的图片会让你流连忘返。你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest、美丽说、蘑菇街这类型的网站。 下面是效果： 核心内容： 1.先设置布局
阅读全文
摘要：瀑布流就是像瀑布一样的网站——丰富的网站内容，特别是绚美的图片会让你流连忘返。你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest、美丽说、蘑菇街这类型的网站。 下面是效果： 核心内容： 1.先设置布局
阅读全文
摘要：React 可以灵活的应用在各种各样的项目中。你可以用它来创建新的应用程序，你也可以逐步引用而不改变现有的代码库。 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以
阅读全文
摘要：low-Steps 导航效果常用于需要表示执行步骤的交互页面，效果如下： 步骤一 步骤二 步骤三 步骤一 步骤二 步骤三 通常使用图片来实现 Flow-Steps 效果，但此方法的灵活性不足，当内容变化较大时就可能需要重新切图，这里介绍使用纯 CSS 的方法来实现 Flow-Steps 效果： 兼容
阅读全文
摘要：让网站所有元素变成灰色调，全浏览器支持，使用了滤镜，比较吃性能，建议作临时方案使用。 实现效果（点击下面的按钮）： 这里放一张图片作为效果展示： 其CSS代码如下： 来源：网站变灰 CSS
阅读全文
