当前位置:首页 > 精彩博文
时间:2019-04-04 作者:郭东东 阅读原文
#Sass基础用法 1、变量: Sass中的变量需要以 $开头进行命名,如 $blue;如果需要插入在字符串中,则需使用#{ }进行包裹;如:border-#{$de}-color; 2、计算: Sass允许在语句中直接使用算式记性计算,如:right: $var * 10; 3、嵌套: Sass可以使用语法的嵌套,可以使代码的可读性更强。如: (1) 标签……
时间:2019-04-03 作者:wengjq 阅读原文
开发产品功能的时候ui往往会给出虚线边框的效果图,于是乎,我们往往第一时间想到的是用css里的border,可是border里一般就提供两种效果,dashed或者dotted,ui这时就不满意了,说虚线太密了。废话不多说,下面直接给解决方案(参考css揭秘): div { padding: 1em; border:……
时间:2019-04-03 作者:wengjq 阅读原文
1、已知宽高元素的水平垂直居中 绝对定位与负边距实现。利用绝对定位,将元素的top和left属性都设为50%,再利用margin边距,将元素回拉它本身高宽的一半,实现垂直居中。代码如下: #container { position:relative; } #div { position:absolute;……
时间:2019-04-01 作者:浪里行舟 阅读原文
前言 我们大家都知道HTML和CSS不属于编程语言而是属于标记语言,所以很难像JS一样定义变量、编写方法、实现模块化开发等。而目前的CSS编写模式中,都是定义一些公共的样式类名,哪一块的HTML需要这个样式,就去增加对应的样式类名,所以我们经常看到一个标签上存在很多样式类名,在这种模式中我们要时常关注CSS的优先级,避免样式的重叠覆盖……
时间:2019-04-01 作者:浪里行舟 阅读原文
本文概要 本文将介绍如下几种常见的布局: 其中实现三栏布局有多种方式,本文着重介绍圣杯布局和双飞翼布局。另外几种可以猛戳实现三栏布局的几种方法 一、单列布局 常见的单列布局有两种: header,content和footer等宽的单列布局 header与footer等宽,content略窄的单列布局 1.如何实现 对于第一种,先通……
时间:2019-04-01 作者:浪里行舟 阅读原文
前言 三栏布局,顾名思义就是两边固定,中间自适应。三栏布局在实际的开发十分常见,比如淘宝网的首页,就是个典型的三栏布局:即左边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应。 我们不妨假定这样一个布局:高度已知,其中左栏、右栏宽度各为300px,中间自适应,可以通过几种方法来实现?以及各自的优缺点是什么? 本文源代码请……
时间:2019-03-19 作者:CSS魔法 阅读原文
本文由 InfoQ 约稿,由 CSS魔法 撰稿,在 “区块链前哨” 和 “前端之巅” 公众号首发。 编者按 区块链在 2018 年不仅走入大众视野,也火遍了技术圈。在十月即将举办的 QCon 上海站的日程中,小编发现前端会场也有一场与区块链相关的演讲。好奇的小编约来了讲师 CSS魔法,请他来谈一谈自己的心路历程。 InfoQ……
时间:2019-03-19 作者:CSS魔法 阅读原文
看完了上一篇《为什么要使用预处理器?》的各种安利,你应该已经跃跃欲试了吧!接下来我们来聊一聊,如何快速上手 CSS 预处理器。 在接触 CSS 预处理器之前,你最好已经具备了一定的 CSS 基础和实践能力,比如你可以完成常见网页的样式和布局;另外,如果你有一些项目经验就更好了,比如组织过整个网站的 CSS 文件、设计过 CSS ……
时间:2019-03-19 作者:CSS魔法 阅读原文
前言 你好,我是魔法哥。我是一名传统的前端开发者,我的很大一部分工作就是为各种类型的网页写 CSS,写了很多年。 我从三年前开始接触并使用 CSS 预处理,如鱼得水,相见恨晚。因此,我感觉有必要写些文章来总结一下这方面的心得。如果你是一位还没有接触预处理器的 CSS 开发者,希望我的文章能够帮助你轻松开始! (注:本文的示例代码均……
时间:2019-03-19 作者:CSS魔法 阅读原文
本文由 “图灵访谈” 微信公众号约稿并首发,由 CSS魔法 撰稿。 图灵访谈非常有幸能邀请到 “魔法哥” 做一期专访。我们都知道您是国内知名的 CSS 专家,是什么样的 “CSS 情结” 使得您愿意将 “CSS魔法” 作为自己的别名? 大家好,很荣幸接受图灵的专访。我叫 “CSS魔法”,熟悉我的朋友都叫我 “魔法哥”。 这个问题……
时间:2019-03-19 作者:CSS魔法 阅读原文
本文由 “StuQ” 微信公众号约稿并首发,由 CSS魔法 撰稿。 魔法哥,请先介绍一下自己吧! 大家好,很荣幸接受 StuQ 的专访。我叫 “CSS魔法”,熟悉我的朋友都叫我 “魔法哥”。我目前在百姓网担任手机站的前端架构师。 似乎 “前端架构师” 这个头衔经常会遭遇嘲讽——“前端居然也需要架构” 或者 “真会吹,拉大旗作虎皮……
时间:2019-03-19 作者:CSS魔法 阅读原文
接下来,要向大家介绍一件最近让我非常高兴的事情。我相信它也会是所有 CSS 开发者欢欣鼓舞的一件事。 是关于一本书的。 我对这本书的评价是这样的: 说到 CSS 图书,问题来了。 如果你的书架只能放得下三本 CSS 书,我会推荐哪三本呢? 第一本,《CSS 权威指南》。 这是一本非常经典的 CSS 参考书,它的经典之处在于,……
时间:2019-03-19 作者:CSS魔法 阅读原文
我在第二届 CSS Conf(2015 中国 CSS 开发者大会)上的演讲主题为《重拾 CSS 的乐趣》。在演讲的问答环节,现场观众提了三个问题,整理记录如下。 Q1 - CSS 图标的代码量会不会很大,在实际项目中使用可能会有什么问题? 虽然我在演讲中花了很多时间来介绍 CSS 图标,但我并不鼓励在生产环境中大量使用。我自己的……
时间:2019-03-19 作者:CSS魔法 阅读原文
前言 我在第二届 CSS Conf(2015 中国 CSS 开发者大会)上的演讲广受好评,很多网友向我索取现场视频。条件所限,这个演讲并没有留下视频存档。因此,本文尝试在静态幻灯片的基础上,以文字的方式还原现场讲解,尽可能为不能去现场的朋友呈现最完整的体验。 我在每幅图片之间补充了讲解文字。你不用分辨每段文字是配合上图还是下图的,……
时间:2019-03-19 作者:CSS魔法 阅读原文
最近在重新设计一个 UI 框架,因此也在考察同类项目的特征和要素。在读到《Bootstrap 编码规范》时,顺着链接发现了其作者 @mdo 的一篇文章,其中讲到 CSS 类名的设计思路。 [译] 使用前缀来限定 CSS 类的作用范围 Original: Scope CSS classes with prefixes Trans……
时间:2019-03-19 作者:CSS魔法 阅读原文
本文的部分内容整理自我对此问题的解答: 命名 CSS 的类或 ID 时单词间如何连接? - 知乎 问题 CSS 类或 ID 命名时单词间连接通常有这几种写法: 驼峰式: solutionTitle、solutionDetail 用横杠连接: solution-title、solution-detail 下划线连接: solut……
时间:2019-03-18 作者:梁少峰 阅读原文
前言 长久以来,css的全局入侵性一直没得到有效的解决,反观js,早有Browserify和webpack等使代码变得模块化。问题的核心在于全局类的命名冲突上,幸好,webpack的css-loader提供了这样的一个解决方案,名字叫做 CSS Module 假设我们有大概下面这样的代码 // webpack.config.js mo……
时间:2019-03-18 作者:梁少峰 阅读原文
动画的意义 动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定,能够改变整体设计的触感。动效应当在独立的场景呈现。通过动效,让物体的变化以更连续、更平滑的方式呈现给用户,让用户能够充分知晓所发生的变化。 动效应该是有意义的、合理的,动效的目的是为了吸引用户的注意力,以及维持整个系统的连续性体验。动效反馈需细腻……
时间:2019-03-18 作者:木偶 阅读原文
最近一直在看一些手淘移动端适配rem之类的技术方案,在研究这些技术方案之前,首先需要掌握一些基本的单位概念,所以在网上也搜了一些资料。虽然全部看下来还是存在一些疑惑的地方,在此做一下记录。 有趣的问题 人物:前端实习生「阿树」与 切图工程师「玉凤」 事件:设计师出设计稿,前端实现页面 玉凤:树,设计稿发给你啦,差那么点像素,就叼死你┏……
时间:2019-03-18 作者:木偶 阅读原文
有了上篇文章的介绍相关基础单位,我们可以大致了解了viewport,dpr 之类的概念。这次主要记录一下手套的移动适配方案rem 什么是rem CSS3新增的一个相对单位rem(root em,根em)。rem是相对于根节点(或者是html节点)。如果根节点设置了font-size:10px;那么font-size:1.2rem;字体……
公益性全栈资源网站,鸣谢默默付出的博主、工程师、架构师们。
网站内容来源技术大牛的辛勤结晶。
81For 技术网站 Copyright ©2019 备案号:津ICP备19001147号-2