文章库ARTICLE COLUMN

  • 利用SVG和css3实现炫酷的边框动画

    利用SVG和css3实现炫酷的边框动画

    摘要:利用实现边框效果参与投票 line .empat { position: relative; overflow: hidden; width: 200px; height: 200px; ...

    mengbomengbo 评论0 收藏0
  • [聊一聊系列]聊一聊iconfont那些事儿

    [聊一聊系列]聊一聊iconfont那些事儿

    摘要:欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面不仅仅是代码从说起要想了解,得从一个新的规则说起。因为用户没有安装的话,我们强制要求显示也没有办法。国内有阿里巴巴的平台,可以选自己喜欢的图标导出。 欢迎大...

    MarkxuMarkxu 评论0 收藏0
  • 浮动(Floats)原理与清除浮动

    浮动(Floats)原理与清除浮动

    摘要:父元素的顶端会限制浮动元素防止一直浮动到页面顶端。例子戳这里清除浮动清除浮动的目的是为了解决高度塌陷的问题撑开浮动父元素。原理会在元素的之上增加一个清除区域这个区域会在元素的上增加额外间隔并且不允许浮动元素进入这个区域。 浮动概念 浮...

    andong777andong777 评论0 收藏0
  • 纯CSS实现扁平化风格开关按钮

    纯CSS实现扁平化风格开关按钮

    摘要:开关样式预览图前言最近在基于框架开发一个网站,在填写表单一项需要用户填写是否选择某一选项,本来想引用框架自带的一个按钮插件,结果在引用的时候总是出错,就找了找资源,用纯实现这个按钮开关的功能。 开关样式预览图 showImg("https://segmentf...

    nanfeiyannanfeiyan 评论0 收藏0
  • 使用CSS处理标题过长,自动截断,兼容响应式布局

    使用CSS处理标题过长,自动截断,兼容响应式布局

    摘要:应用场景描述例如从数据库读取一个商品,那么当商品标题很长的时候,很可能会影响页面布局。 应用场景描述 例如PHP 从数据库读取一个商品,那么当商品标题很长的时候,很可能会影响页面布局。处理方法如下: PHP 字符串截取 JS 字符串截取 CSS 属性...

    weaponweapon 评论0 收藏0
  • CSS中的负边距

    CSS中的负边距

    摘要:之后仔细的百度了一下,发现了这么一个叫做内外补丁负值法的东西。在这个解决方案中,又涉及到了传说中的负。深入研究之后又发现了圣杯布局双飞翼布局等很多示例,确实要好好研究负边距这个东西了。相关推荐那些年,奇妙的圣杯与双飞翼,还有负边距 20...

    cocopeakcocopeak 评论0 收藏0
  • 切图崽的自我修养-合理组织CSS结构

    切图崽的自我修养-合理组织CSS结构

    摘要:前言不要再叫我切图崽,我很生气,这样很不礼貌,请叫我前端工程师从方面来说,前端工程师和切图崽的区别,并不是指写单条技巧的高低,甚至很多工程师在一些的奇技淫巧都比不上切图崽那切图崽到底和工程师之间的差别是什么呢差别是年工作经验视野,是格...

    cangck_Xcangck_X 评论0 收藏0
  • 关于浮动与清除浮动,你应该知道的

    关于浮动与清除浮动,你应该知道的

    摘要:清除浮动并不是说让浮动元素回到文档流清除浮动只会改变改元素自身的位置,并且只针对排在该元素前面的元素。 我在做页面布局的时候,多多少少总会受到来自浮动的困扰,因此专门通过实践来总结一下浮动与清除浮动。 首先总结几个基础的概念: 浮动:设...

    mengbomengbo 评论0 收藏0
  • 切图崽的自我修养-规范CSS元素命名

    切图崽的自我修养-规范CSS元素命名

    摘要:目前为止,这个命名已经可以打分,离满分存在的差距在哪里如果一律采取驼峰命名,在从属关系的可读性上,稍微差了一点,来比较一下这两个命名的可读性和明显采取驼峰匈牙利命名的方式可读性更强。 前言 为什么我刚才写的样式乱了?! 如何给变量,文件...

    mozillazgmozillazg 评论0 收藏0
  • CSS高效开发实战

    CSS高效开发实战

    摘要:选择器子元素选择器符号,左边是父元素,右边是子元素。如果两个元素不是严格的父子关系,则使用子元素选择器的定义不会生效。 CSS高效开发实战 @(StuRep) 通过条件注释加载不同的CSS 除IE外都可识别 _ 条件注释的控制符 项目 范例 说明 ! [i...

    khlbatkhlbat 评论0 收藏0
  • 【译】22个必备的CSS小技巧

    【译】22个必备的CSS小技巧

    摘要:当它被选中时,一个设置在里的编码的字符将会显示出来。接着为我们的复选框添加一些动画效果这里是所有的编码,以及可以在这里进行体验。这是一个新的叫做的表达式。设置介于和之间的最大最小值。至今并未得到全面的支持。 原文链接:22 Essential CSS...

    CristicCristic 评论0 收藏0
  • 20 个常用的 CSS 技巧

    20 个常用的 CSS 技巧

    摘要:所有一切都垂直居中要将所有元素垂直居中,太简单了看,是不是很简单。优化显示文本有时,字体并不能在所有设备上都达到最佳的显示,所以可以让设备浏览器来帮助你注请负责任地使用。 偶然看到一篇文章介绍了这些css技巧,觉得挺不错的,分享给大家,...

    chanthuangchanthuang 评论0 收藏0
  • line-height初级理解(css)

    line-height初级理解(css)

    摘要:行内元素设置时,不论设置的多大,它的背景永远只跟随文字的大小来渲染,但是行高的大小还是会体现的。行高对背景的渲染起作用行距行高字体大小半行距行高字体大小推荐文章 1:行内元素设置line-height时,不论设置的多大,它的背景永远只跟随文字的大...

    DeanDean 评论0 收藏0
  • 前端开发之单一职责原则

    前端开发之单一职责原则

    摘要:单一职责原则又称单一功能原则,面向对象五个基本原则之一。在前端开发的过程中,一个需求总会有多种解决方法,如果多人开发,其实我觉得单一职责挺适合前端的,前阵子看了下实习生的代码,就想举这个例子来说说。 单一职责原则(SRP:Single responsi...

    DeanDean 评论0 收藏0
  • 杂(css)

    杂(css)

    摘要:组成的高度是由其内部最高的的高度决定的是一种围绕文字看不见的。的大小与大小相关。图片的高度与有关,与无关。光秃秃的文字,则属于匿名。某种意义上的作用就是包裹,而浮动也有类似的效果。浮动破坏自身模型和高度。 本用于记录个人学习记录:http...

    aisuhuaaisuhua 评论0 收藏0
  • 关于viewport引起的微信二维码识别区域偏移的问题讨论与解决

    关于viewport引起的微信二维码识别区域偏移的问题讨论与解决

    摘要:暂时排除脚本原因。移除二维码所有样式,发现并不是不能识别到二维码而是识别区域发生了偏移。图移除所有元素,页面上只留一张二维码,发现识别区域变大。由此产生的问题和猜测问题就是元素偏移了。。。 一、问题概述 在开发一个含有二维码的微信页面...

    Miracle_lihbMiracle_lihb 评论0 收藏0
  • html5之canvas

    html5之canvas

    摘要:是出现的新标签,主要用来画图,看见网上能用来实现各种图形,所以感觉很好玩,就学习了一下。 canvas是html5出现的新标签,主要用来画图,看见网上能用来实现各种图形,所以感觉很好玩,就学习了一下。canvas绘制图形有两种方法: context.fill() ...

    ygyoooygyooo 评论0 收藏0
  • Jquery ajax加载等待执行结束再继续执行下面代码操作

    Jquery ajax加载等待执行结束再继续执行下面代码操作

    摘要:等待执行完毕再继续执行下面代码的效果,具体代码如下,其实就是将函数的参数设置为即可,该参数默认为代表只有在等待执行完毕后才执行语句下面给大家介绍加载等待效果正在上传生产数据,请稍候。。。 Jquery等待ajax执行完毕再继续执行下面代码的效果...

    focusjfocusj 评论0 收藏0
  • 玩转 css 居中

    玩转 css 居中

    摘要:文字居中文字的水平居中对于非元素内的文字水平居中都可以通过完成。也可以设置文字单行的垂直居中这种场景通常在修正框光标和文字的位置。文字单行的相对居中例如图中的状况,需要文字相对于图片的垂直居中,通过对图片设置即可。 文字居中 文字的水...

    snowellsnowell 评论0 收藏0
  • (CSS) 带有右侧边栏的响应式页面的CSS样式

    (CSS) 带有右侧边栏的响应式页面的CSS样式

    摘要:一目的要创建一个响应式页面右侧边栏为,左侧内容为。当窗口宽度小于时,上述在上,在下,随着窗口大小的变化,二者的与自动调整。移动到上面实现的效果如下图在窗口宽度小于时,右侧边栏内容在网页上方显示,不合格。 一、目的 要创建一个响应式页面...

    546669204546669204 评论0 收藏0
  • nth-child和nth-of-type的区别和用法(选择器)

    nth-child和nth-of-type的区别和用法(选择器)

    摘要:样式样式变红变红变红变红变红变红伪类选择器的要求这个元素是选定的元素例如,这个后面的数字表示所有子元素中的第个伪类选择器要求这个元素是选定的元素例如在父级元素中所有子元素的第个。 样式:p:nth-child(2){color:red;}样式:span:nth-of-type...

    ccj659ccj659 评论0 收藏0
  • webstorm和node配合使用的一些小技巧之External tools

    webstorm和node配合使用的一些小技巧之External tools

    摘要:所谓的表现样式控制分离。再后来修改维护时如果修改一些参数,或者样式很多时,结构很混乱,维护很麻烦,于是有了等一众预处理语言的一个好处就是可以让的结构很清晰。再加上现在模块化那么流行,还要强调重用性,所以模块里面还要再去套用模块。 webs...

    Mr_houziMr_houzi 评论0 收藏0
  • 如果你正在念大学,恰好也知道前端

    如果你正在念大学,恰好也知道前端

    摘要:偶尔会有一些朋友会加我的微信,和我聊上几句,这让我知道了许多别人的故事。除了工作几乎没有和谁私聊过的微信,似乎多了一丝不一样的活力。和这个大一同学不同的是,加我微信的还有几个已经毕业的朋友,因为一些传说,尽管毫无基础,但还是选择了前端...

    FaremaxFaremax 评论0 收藏0
  • Flex 布局教程:语法篇

    Flex 布局教程:语法篇

    摘要:布局教程语法篇修改转载自阮一峰老师的博客网页布局是的一个重点应用。布局的传统解决方案,基于盒状模型,依赖属性属性属性。一布局是什么是的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。二基本概念采用布局的元素,称为容器,简称容器。 ...

    ymyangymyang 评论0 收藏0
  • Amaze UI Web 与 Amaze UI Touch 有什么不同?一张图给你解释!

    Amaze UI Web 与 Amaze UI Touch 有什么不同?一张图给你解释!

    摘要:推崇一切皆组件的组件化理念,目前它提供包含专门针对跨屏网页开发的以及针对移动端的混合应用开发框架,在全球权威的代码托管平台上,的数量超过,名列国内开源项目前茅。但是很多人会有疑问,与有什么不同下图给你答案。官方网站官方网站 Amaze UI ...

    SKYZACKSKYZACK 评论0 收藏0

热门文章

<