CSS Architecture & CSS Design Patterns BEM Block, Element, Modifier https://en.bem.info/methodology/quick-start/ OOCSS Separate structure and skin(分离结构和主题) Separate container and content(分离容器和内容) SMACSS Base(基础) Layout(布局) Modules(模块) State(状态) Theme…

前言 大家平时应该经常见到这种特效,很炫酷不是吗 这是谷歌Material Design中最常见的特效了,市面上也有很多现成的js库,用来模拟这一特效.但是往往要引入一大堆js和css,其实在已有的项目中,可能只是想加一个这样的按钮,来增强用户体验,这些js库就显得有些过于庞大了,同时由于是js实现,很多时候还要注意加载问题. 那么,有没有办法用css来实现这一特效呢? 思路 其实就是一个动画,一个正圆从小变大,用css3中的动画很容易实现 示例代码 @keyframes ripple{ fro…

CSS & Architecture https://sass-guidelin.es/#architecture https://sass-guidelin.es/#the-7-1-pattern refs https://github.com/xgqfrms-GitHub/Sass/tree/master/Tutorial#伪类-hover-伪元素before--after xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!…

.NET Best Practices: Architecture & Design Patterns (5 Days Training) .NET最佳实践:架构及设计模式 5天培训课程 课程大纲 熟悉的原则 SOLID原则 当软件开发第一次出现时. 想要开始发展的人显然没有知识储备. 因此,每个人都开始运用自己的方式来编写软件. SOLID原则由Robert C. Martin(又名Bob叔叔)于2000年引入.这些原则的目的是使软件设计更易懂,更易于维护和扩展. 这些原则对于每个开发人员来说…

Cloud Design Patterns Categories Data Management Design and Implementation Messaging Patterns Ambassador Anti-Corruption Layer Asynchronous Request-Reply Backends for Frontends Bulkhead Cache-Aside Choreography Circuit Breaker Claim Check Compensatin…

January 2014 Containing twenty-four design patterns and ten related guidance topics, this guide articulates the benefit of applying patterns by showing how each piece can fit into the big picture of cloud application architectures. It also discusses…

AMD - Learning JavaScript Design Patterns [Book] - O'Reilly The overall goal for the Asynchronous Module Definition (AMD) format is to provide a solution for modular JavaScript that developers can use today. It was born out of Dojo’s real world exper…

原文链接:http://www.c-sharpcorner.com/UploadFile/19b1bd/design-patterns-simplified-part3-factory/ Design Patterns Simplified - Part 3 (Simple Factory)[设计模式简述--第三部分(简单工厂)] This article explains why and how to use the Simple Factory Design Pattern in softw…

设计模式是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结,使用设计模式的目的是提高代码的可重用性,让代码更容易被他人理解,并保证代码可靠性.它是代码编制真正实现工程化. 四个关键元素:(1) Pattern Name, (2) Problem, (3) Solution, (4) Consequences. 01. Factory Method Pattern /* The product should be created by his own factory. */ Log…

It's time to review design patterns, especially when I reach the turning-point of my career. That's not a small test, but a challenge to my life. Hold it! http://blog.csdn.net/lovelion/article/details/17517213 View and Diagram 用户视图:Use Case Diagram /…

The Module Pattern Modules Modules are an integral piece of any robust application's architecture and typically help in keeping the units of code for a project both cleanly separated and organized. In JavaScript, there are several options for impleme…

云设计模式 https://azure.microsoft.com/zh-cn/blog/design-patterns-for-microservices/ https://www.cnblogs.com/viaiu/p/10011376.html The AzureCAT patterns & practices team has published nine new design patterns on the Azure Architecture Center. These nine p…

本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要学CSS,就应该先了解一下Web标准.尽管看上去不是必须的(我在学CSS之前,根本不知道也不想知道Web标准是 个啥玩意儿).应该说,你是否学Web标准,跟你是否能学会CSS没有什么关系,但跟你能写出什么样的CSS,以及XHTML或其它代码,跟你能做出什么 质量的网页有很大的关系. 其实我自己对We…

原文链接: http://www.c-sharpcorner.com/UploadFile/19b1bd/design-patterns-simplified-part-2-singleton/ Design Patterns Simplified - Part 2 (Singleton)[设计模式简述--第二部分(单例模式)]       I am here to continue the explanation of Design Patterns. Today we will explai…

CSS 是前端开发必备技能,入门容易,深入难.比如像 Pseudo-class.Pseudo-element.Media query.Media type 以及 Vendor prefix 的概念,很多人都还很模糊.CSS Vocabulary 是一个很全的 CSS 词汇表,能帮助你轻松了解这些词汇的含义. 您可能感兴趣的相关文章 OverAPI.com – 史上最全开发人员在线速查手册 CSS Matic:网页设计师必备的终极 CSS 工具箱 前端文摘——网页图片优化的实用工具和技巧分享 Fe…

前端样式,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验.可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况.今天,结合自己的经验和理解,做了几个demo把IE6~IE10和其他标准浏览器的CSS hack做一个总结,也许本文应该…

什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Sprite”就是这样一种技术,它将许多图片组合到一个网格上,然后通过程序将每个网格的内容定位到画面上. Sprite被定位到一副静态图片上,并且通过简单的程序或硬件即可正确定位到画面上,一幅幅图片就像是被“变”出来的,他们并没有单独占用内存,所以被取名为“Sprite精灵”. 上图是口袋妖怪的组合图片,可…

From Head First Design Patterns. Design Principle: Idnetify the aspects of your application that vary and separate them from what stays the same. Here's another way to think about it: Take the parts that vary and encapsulate them, so that later you c…

Apex allows you to build just about any custom solution on the Force.com platform. But what are the common design patterns and associated best practices for Apex development, and how can you leverage these patterns and best practices to avoid reinven…

When you're on the way which is unknown and dangerous, just follow your mind and steer the boat. 软件模式: 设计模式.体系结构模式.分析模式.过程模式等. 体系结构模式 ANSIIEEEStd1471一200对体系结构的定义:一个系统的基本组织,表现为系统的组件.组件之间的相互关系.组件和环境之间的相互关系以及设计和进化的原则. 黑板模式 黑板模式是一种常用的架构模式,应用中的多种不同数据处理逻辑相…

设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于己于他人于系统都是多赢的,设计模式使代码编制真正工程化,设计模式是软件工程的基石,如同大厦的一块块砖石一样.项目中合理的运用设计模式可以完美的解决很多问题,每种模式在现在中都有相应的原理来与之对应,每一个模式描述了一个在我们周…

CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻译为文档流):普通流默认是静态定位,将窗体自上而下分成一行一行,块级元素从上至下. 行内元素在每行中按从左至右的挨次排放元素,即为文档流. 2.Float:浮动流 浮动流:元素的浮动,即可以让一个元素脱离原来的文档流,漂到另一个地方,漂到左边或右边等等. 3.Absolute position:绝对…

由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对. 类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识.等等…

The Observer Pattern The Observer is a design pattern where an object (known as a subject) maintains a list of objects depending on it (observers), automatically notifying them of any changes to state. When a subject needs to notify observers about s…

HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器,选择符 HTML+CSS笔记 CSS入门续集 涉及内容:继承,特殊性(权值),层叠,重要性 HTML+CSS笔记 CSS进阶 涉及内容:文字排版:字体,字号,颜色,粗体,斜体,下划线,删除线;段落排版:缩进,行间距,中文字间距(字母间距),对齐 HTML+CSS笔记 CSS进阶续集 涉及内容:元素分…

CSS:CSS学习总结 背景 CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验. 1.规则声明顺序 因为CSS的样式具备层叠性和继承性,为了最小化代码量,规则的声明可以按照如下顺序: 常用标记 常用类 布局类 导航类 表格类 表单类 组件类 2.盒子模型.文档流.定位和浮动一定要清楚 盒子模型:浏览器把每种标记都当做一个盒子,有两种盒子(内联和框),他们在文档流中的布局模式是不同的. 文档流:框盒子会被从上到下的布局,内联…

Design Patterns in Smalltalk    MVC在Smalltalk的MVC设计模式 The Model/View/Controller (MVC) triad ofclasses [KP88] is used to build user  interfaces in Smalltalk-80. Looking at thedesign patterns inside MVC should help you see what we mean by the term"patt…

CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","back…

CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outside shape 的意思是图形,CSS shapes 也就是 CSS 图形的意思,也就是使用 CSS 生成各种图形(圆形.矩形.椭圆.多边形等几何图形). CSS3之前,我们能做的只有矩形,四四方方,条条框框. CSS3 CSS3出来后,我们有了更广阔的施展空间,通过 border-radius bo…

CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性. 继承性是从自己开始,直到最小的元素. 但是呢,如果再给上方的代码加一条属性: 上图中,我们给div加了一个border,但是发现只有div具备了border属性,而p标签却没有border属性.于是我们可以得出结论: 关于文字样式的,都具有继承性.…