创建移动优先的响应式网页设计
我们将介绍如何创建以移动为先的自适应 Web 体验。 本文和 演示 将讨论以下内容： 关于我们的新产品，还有更多最新的响应式指南 Web 基础知识 站点。 为什么我们需要创建移动优先、响应式、自适应的体验 如何为自适应站点构建 HTML 以优化性能并优先考虑灵活性 如何首先编写定义共享样式的 CSS，使用媒体查询为更大的屏幕构建样式，并使用相对单位 如何编写不显眼的 JavaScript 以有条件…
CSS 设计指南之界面组建
导航菜单 菜单由一组链接组成。用 HTML 中的列表元素（ul 或 ol）来分组链接不仅符合逻辑，而且即使没有额外的 CSS 也能适当显示链接的层次。默认列表项（li）是块级元素，因此它们会上下堆叠。 纵向菜单 标签： <nav class="list1"> <ul> <li><a href="#">Alternative</a><…
CSS 设计指南之页面布局
布局的基本概念 多栏布局三种基本的实现方案： 固定宽度、流动、弹性 固定宽度布局： 大小不会随用户调整浏览器窗口大小而变化，一般是 900 到 1100像素宽。 其中 960 像素是最常见的，因为这个宽度适合所有现代显示器， 而且能够被 16、12、10、8、6、5、4 和 3 整除， 不仅容易计算等宽分栏的数量，而且计算结果也能得到没有小数的像素数。 参考：http://www.960.gs 流…
再谈等高列布局、水平垂直居中与置顶页脚
CSS 中的等高布局、水平垂直居中以及置顶页脚 Sticky Footer 这几个效果（我喜欢把他们说成是CSS效果，而不喜欢说其是问题）并不陌生，而且很多同学都似乎有碰到过，也经常体验过。甚至在很多前端面试中也常被考官问到，有的时候还直接被考官给秒杀了。 既然都有相关的教程，为何还费那么多劲再次扯蛋，难道真的闲得蛋疼了吗？其实并不如此，随着技术的更新，我们很多思路也得跟着创新，不能固定自封。那么…
CSS 设计指南之 CSS 工作原理
每个 HTML 元素都有一组样式属性，可以通过 CSS 来设定。 这些属性涉及元素在屏幕上显示时的不同方面，比如在屏幕上位置、边框的宽度，文本内容的字体、字号和颜色，等等。 CSS 就是一种先选择 HTML 元素，然后设定选中元素 CSS 属性的机制。 CSS 选择符和要应用的样式构成了一条 CSS 规则。 剖析 CSS 规则 规则实际上就是一条完整的 CSS 指令。 规则声明了要修改的元素和要应…
浅谈 CSS 垂直居中的几种方法
用css垂直居中元素往往给设计人员带来麻烦。然而，存在用于垂直定心的各种方法，并且每种方法都相当容易使用。今天我想介绍其中的6种方法。 1.图片水平垂直居中 html: <div class="parent"> <div class="child"> <img src="xxx/demo.png"> </div> </div> css: …
CSS 设计指南之字体和文本
字体 网页中的字体有三个来源： 用户机器中安装的字体。（直到最近，这些字体还是能在网页中放心使用的唯一一批字体。） 保存在第三方网站上的字体。最常见的是 Typekit 和 Google，可以使用 link 标签把它们链接到你的页面上。 保存在你的 Web 服务器上的字体。这些字体可以使用 @font-face 规则随网页一起发送给浏览器。 字体相关属性 font-family font-size…
CSS 设计指南之 HTML 基础
标签 闭合标签: <标签名> 文本内容 </标签名> 自闭合标签: <标签名 属性_1="属性值" 属性_n="属性值" /> 其中，文本 使用 闭合标签 ，引用内容 使用 自闭和标签，例如，图片，资源文件。 HTML5 中的新标准参考 syntactic ,当然，HTML5也兼容以前的语法. 属性 src 属性(source)：来源 alt 属性(altern…
CSS 经典布局之左侧固定大小右侧自动适应
最近学习了一种经典布局，固定左侧或右侧的宽度，另一侧自适应宽度，此种布局挺常用，尤其是像后台，大部分都是采用这种结构，还比如像订餐类的 APP，进入商家的时候，会出现一堆饭的列表，左侧是饭的分类，右侧是饭的列表等等。 先看 HTML 代码 <!doctype html> <html> <head> <meta charset="utf-8"> &l…
Sass 之 @mixin 指令详细介绍
为了有效的维护和开发项目，代码的重复利用就显得尤为重要。在Sass中，除了 @import 和 @extend 可以使你的代码更加具有重复利用性，@mixin 指令也同样能提高你代码的重复使用率并简化你的代码。 @extend 指令通过继承从而简化了代码，但是它也有缺陷之处，首先是不够灵活，其次它还会将你不需要的其他地方具有相同类名的样式都继承过来。 @mixin 指令是另一种简化代码的方法。Mi…
使用 Sass 编写 CSS Blend Modes
CSS Blend Modes 是 CSS 的一个新功能，可以将一个层和元素的背景层混合在一些。常见的是将背景图像和背景颜色混合在一起。 在这篇文章中，我们将来体验一上在几个项目中使用Sass编写的一个简单的混合模式的mixin。从而学习如何使用Sass创建混合模式的mixin，并且怎么使用。 使用混合模式 当在一个元素上使用 background-blend-mode 属性时，它将背景图像和背景…
使用 Sass 自动化处理 CSS 动画
有一天 Harry Roberts 有一段有关于他网站上的代码在 twitter 求教，如果有可能，在某些方面得到改善。Harry Roberts 做的是使用 keyframes 的 carousel 动画，所以说使用一些数学计算是有可能得到相应改善。 有什么好主意？ 据我所见，Harry Roberts 在他的主页上使用了一个 carousel 动画。可以使用 CSS，为什么要使用 JavaSc…
再谈 CSS 预处理器
CSS 预处理器是什么？一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题： 语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器； 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。 所以这就决定了 CSS 预处理器的主要目标：提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代…
开始使用 Sass 预处理语言
Sass 是一种 CSS 预处理语言，当你使用 Sass 这门语言时，你使用编译程序来转换 Sass 文件，通常以 SCSS 文件格式书写然后转换成 CSS 文件。Sass 通过添加方便的函数，变量以及其他类似脚本的助手使CSS能更加快速得书写和更加简单的控制。 起初我躲避 Sass 是因为它好像是针对程序员的（它的 文档 到处充斥着程序的专业术语），但是在我学习 Sass 一段时间后，我发现它不…
Sass 中五个有用的代码片段
使用 Sass，其中最喜欢的就是 Sass 的 mixin 和 function 功能。他们能自动化的重复使用一段 CSS 代码或功能以及更好的维护 CSS。这些功能让人实在是折服。但我常常发现许多开发人员为一个简单的任务创建一个复杂的系统，比如管理一个字体堆栈或颜色方案。这些设置和使用都让人感到非常的繁琐。在这篇文章中，我将解释这些自动化实现的功能。 颜色 一个网站的配色方案是非常重要的。通常看…
- 共 11 页
- 1
