文章库ARTICLE COLUMN

  • CSS选择器整理

    CSS选择器整理

    摘要:在及以下,伪类选择器与兄弟选择符一起使用会有一个,查看详情。一般用于输入框设置元素被选择时的字体颜色和背景颜色注意事项在使用时需要加上各个浏览器的前缀除了是,其他浏览器都是使用。总结选择器用得好其实可以让我们少些很多代码。 很多人都觉...

    张宪坤张宪坤 评论0 收藏0
  • 前端代码风格

    前端代码风格

    摘要:声明顺序相关的属性声明应该以下面的顺序分组处理盒模型排版外观处在第一位,因为他可以使一个元素脱离正常文本流,并且覆盖盒模型相关的样式。关于完整的属性以及他们的顺序,请参考命名保持命名为全小写,可以使用短划线不要使用下划线和命名。 文件...

    yzzzyzzz 评论0 收藏0
  • 用CSS画简单图标

    用CSS画简单图标

    摘要:用画了三个图标,叉号,排行符号,搜索符号。我们用和伪类来分别当一个矩形框,然后进行旋转即可得到叉号。我们用添加类的形式插入叉号,当我们需要插入叉号时,我们额外添加一个标记,并添加类。方便相对于父元素进行定位第二步,设置伪类,画叉号。 ...

    since1986since1986 评论0 收藏0
  • compass watch 报CompatibilityError 解决方案

    compass watch 报CompatibilityError 解决方案

    摘要:从一个项目下来后,执行报错。如下开始看到这个一头雾水,之后查阅了资料,发现是因为文件夹带中文的原因。将文件夹全部改为英文后,再进行就正常了。 从 gitlab clone 一个项目下来后,执行compass watch 报错。如下:showImg("https://segmentfault....

    JoonasJoonas 评论0 收藏0
  • bowl - 轻量级的前端资源缓存加载器

    bowl - 轻量级的前端资源缓存加载器

    摘要:另外,它不仅可以管理前端资源的缓存,在不需要缓存的时候也可以作为一个普通的加载器来使用,页面中用到的和资源都可以用它来加载。 现在单页应用越来越多,前端能做的事也越来越多,但随之而来的问题是一个单页应用的 CSS 和 JavaScript 代码的体积...

    longshengwanglongshengwang 评论0 收藏0
  • CSS三栏布局的四种方法

    CSS三栏布局的四种方法

    摘要:浮动代码如下注意元素次序代码如下左栏左浮动中间自适应右栏右浮动这种方式代码足够简洁与高效,也容易理解后记四种方法其实只有圣杯布局和双飞翼布局较难理解,但实际上理解了圣杯布局,双飞翼布局自然就理解了。 前言 总括: 不管是三栏布局还是两栏...

    RobinQuRobinQu 评论0 收藏0
  • 通过js动态设置根元素的rem方案

    通过js动态设置根元素的rem方案

    摘要:方案二获取元素判断是屏幕旋转还是设置的,随着的改变而改变。以上两种方案均为通过动态设置的根元素的的值来达到响应式的效果。原文链接通过动态设置根元素的方案 rem目前是响应式开发移动端一个很重要也是常用的一个元素,但是在网上看的各种文章都...

    zhangfaliangzhangfaliang 评论0 收藏0
  • 移动端解决方案学习记录

    移动端解决方案学习记录

    摘要:先附上参考资料链接移动端适配方案上移动端适配方案下可伸缩布局方案一个的值转值的自动完成插件。 先附上参考资料链接; 移动端适配方案(上) 移动端适配方案(下) 可伸缩布局方案 一个CSS的px值转rem值的Sublime Text 3自动完成插件。 最终测试了 li...

    honhonhonhon 评论0 收藏0
  • 我所知道的flex布局 —— 上篇

    我所知道的flex布局 —— 上篇

    摘要:布局也经历了一段演变历史。不同于将要出现的网格布局针对目标为大比例布局,弹性盒布局更适用于应用组件和小比例布局。常规布局是基于块和内联流方向,而布局是基于流。 前言 你还在用display+position+float来进行css布局吗?有没有觉得用传统的这种...

    andycallandycall 评论0 收藏0
  • Web如何防止XSS攻击

    Web如何防止XSS攻击

    摘要:危害实例微博年月日晚,新浪微博遭遇到蠕虫攻击侵袭,在不到一个小时的时间,超过万微博用户受到该蠕虫的攻击。此事件给严重依赖社交网络的网友们敲响了警钟。当用户看到这样的情况可以反馈,及时封堵恶意作者的攻击。 什么是XSS 跨站脚本攻击(Cross S...

    XboxYanXboxYan 评论0 收藏0
  • 简单粗暴的移动端页面开发技能

    简单粗暴的移动端页面开发技能

    摘要:移动端响应式页面开发说简单也简单,根据屏幕尺寸调节根字体大小。大宽度用,高度和小宽度全部使用,简单粗暴。之前阅读过大漠老师的使用实现手淘页面的终端适配介绍了手淘项目的制作规范。 移动端响应式页面开发说简单也简单,根据屏幕尺寸调节根字体...

    jeffrey_upjeffrey_up 评论0 收藏0
  • Canvas绘画一个时钟

    Canvas绘画一个时钟

    摘要:绘画一个时钟时钟样式每隔一秒调用一次函数保存最原始的画布状态,如此便不需要清除整个画布新的画布状态,将圆心移到原始画布状态的处将整个坐标系选择,方便显示之后的时间数字,以保证在顶部即是十二边形定义表盘半径保存当前状态即是第一个状 tit...

    alaegealaege 评论0 收藏0
  • CSS水平垂直居中总结

    CSS水平垂直居中总结

    摘要:垂直居中表格布局法为什么就能垂直居中拜读了张鑫旭大神的文章行高指的是什么行高指的是文本行的基线间的距离。行内框具有垂直居中性。 CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: text-align:center; 单行文字的垂直居中: line-h...

    mist14mist14 评论0 收藏0
  • css创建优雅自然的打开动画

    css创建优雅自然的打开动画

    摘要:前言花了很大篇幅介绍了优雅自然的动画应该具备哪些特性。接下来,用打开一个动画的例子,来说说本人对的认识。一个最简单的打开动画,可能涉及移动和放大。最后,将两种运动的代码结合在一起就能创建优雅自然的打开动画啦。 前言 Google Material Des...

    xuhongxuhong 评论0 收藏0
  • CSS结构与布局

    CSS结构与布局

    摘要:当列表中至少包含四项时,命中包括该项之后的所有列表项当然,不止于此,的玩法完全取决于你的脑洞。而且绝对定位对整个布局的影响也太过强烈。如此,对于响应布局也可以不用担心了,虽然有点点,但也算完美的解决了, title: 结构与布局date: 2016-1...

    figofuturefigofuture 评论0 收藏0
  • CSS居中那些事

    CSS居中那些事

    摘要:定宽块状元素满足定宽和块状两个条件的元素是可以通过设置左右值为来实现居中的。设置方法改变块级元素的为类型设置为行内元素显示,然后使用来实现居中效果。 做前端这一年多来,其实一直都是偏向于js前后端,css什么的总是抱着够用就好的心态,从来...

    dingding199389dingding199389 评论0 收藏0
  • 如何合理的规划前端之路

    如何合理的规划前端之路

    摘要:什么是前端工程师总而言之就是运用等技术,在工作中配合设计师实现用户界面,和后端工程师进行数据对接,完成应用开发的职位。 什么是前端工程师?总而言之,就是运用 HTML、CSS、JavaScript 等 Web 技术,在工作中配合UI设计师实现用户界面,和后端工...

    lwx12525lwx12525 评论0 收藏0
  • 前端性能优化黄金法则

    前端性能优化黄金法则

    摘要:前端优化是复杂的,针对方方面面的资源都有不同的方式。前端性能优化前端性能团队总结的条黄金定律的团队总结出了一系列可以提高网站速度的方法。提高性能的措施中最重要的方法就是使响应具有可缓存性。 前端是庞大的,包括 HTML、 CSS、 Javascript、...

    coolpailcoolpail 评论0 收藏0
  • 移动端实现内滚动的4种方案

    移动端实现内滚动的4种方案

    摘要:部分区域固定其余区域滚动部分区域固定为页面的部分设置以及,即禁用页面原生的滚动,保证只会显示一屏的内容。但是单位对低版本安卓和支持不够好,微信浏览器内核不支持,虽然已经升级到内核,但是为了确保万无一失,放弃采用这种方案。 如果在一个区...

    CodeSheepCodeSheep 评论0 收藏0
  • css记录收集

    css记录收集

    让一个块级元素在某区域内上下左右居中 .container { border: 1px solid #000; width: 300px; height: 300px; position: relative; } .box { border: 1px solid #000; width: 50px; height: 50px; /* magic below */ position: ...

    233jl233jl 评论0 收藏0
  • 如何造一个移动端的联动选择器(四)

    如何造一个移动端的联动选择器(四)

    摘要:写在前面之前写了一篇为移动端而生的自定义多级联动选择器,得到了很多人的关注。具体实现步骤如下先传入一个需要计算深度的对象给,判断如果还有则迭代,并计算深度。如果增加了联动级数需要来判断,则为新增加的联动绑定新的事件。 写在前面 之前写...

    ssshooterssshooter 评论0 收藏0
  • 完整的网站开发技术学习建议

    完整的网站开发技术学习建议

    摘要:本文讲解的是一份学习参考目录,如果能坚持学习下去,那你离全栈又近了一步。 本文讲解的是一份学习参考目录,如果能坚持学习下去,那你离全栈又近了一步。一.网页编辑1.网页编辑技术 (1)起步:包含html,css 推荐网站:html菜鸟教程 慕课网 w3csc...

    RdouTypingRdouTyping 评论0 收藏0
  • 浅谈 CSS Sprites 雪碧图应用

    浅谈 CSS Sprites 雪碧图应用

    摘要:编写配置文件,以下是关键配置代码雪碧图合并输出到文件参数执行目录参数生成的和图片的文件名之所以推荐,是因为非常的灵活,看懂模块的可以根据你的项目情况编写对应的配置文件。 showImg("https://segmentfault.com/img/bVGpAw?w=518&h=156"); 前言...

    MkkHouMkkHou 评论0 收藏0
  • 回到顶部效果之加速置顶

    回到顶部效果之加速置顶

    摘要:加速回到顶部将其左上角置于容器的水平方向上的中点向右移动图片容器的宽度的一半,以实现其左侧贴紧图片的边线的效果将按钮隐藏增加过渡效果鼠标悬浮时改变样式此处设置的值的是为了阻止其回到顶部的默认行为。 我在半年前接触过相关案例,最近重新看...

    weknow619weknow619 评论0 收藏0
  • 思考 CSS 架构

    思考 CSS 架构

    摘要:思考一个好的架构一个好的架构是具有良好的可扩展性。定义手风琴的展开或收起,链接的有效或无效,元素的隐藏或显示。的命名规范命名组件的方式是非常流行特别有帮助的规范。目前该领域最丰富的思想领袖之一。 你有没有在一个逐渐膨胀的 CSS 项目中感...

    yvonneyvonne 评论0 收藏0

热门文章

<