CSS

CSS

CSS

3021 文章 5511 话题 11579 浏览

创建移动优先的响应式网页设计

我们将介绍如何创建以移动为先的自适应 Web 体验。 本文和 演示 将讨论以下内容: 关于我们的新产品,还有更多最新的响应式指南 Web 基础知识 站点。 为什么我们需要创建移动优先、响应式、自适应的体验 如何为自适应站点构建 HTML 以优化性能并优先考虑灵活性 如何首先编写定义共享样式的 CSS,使用媒体查询为更大的屏幕构建样式,并使用相对单位 如何编写不显眼的 JavaScript 以有条件…

猫九 2021-12-29 浏览 766 评论 0 收藏 0

CSS 设计指南之界面组建

  • CSS 设计指南之界面组建
  • CSS 设计指南之界面组建
  • CSS 设计指南之界面组建
  • CSS 设计指南之界面组建

导航菜单 菜单由一组链接组成。用 HTML 中的列表元素(ul 或 ol)来分组链接不仅符合逻辑,而且即使没有额外的 CSS 也能适当显示链接的层次。默认列表项(li)是块级元素,因此它们会上下堆叠。 纵向菜单 标签: <nav class="list1"> <ul> <li><a href="#">Alternative</a><…

JSmiles 2021-12-25 浏览 755 评论 0 收藏 0

CSS 设计指南之页面布局

  • CSS 设计指南之页面布局
  • CSS 设计指南之页面布局
  • CSS 设计指南之页面布局
  • CSS 设计指南之页面布局

布局的基本概念 多栏布局三种基本的实现方案: 固定宽度、流动、弹性 固定宽度布局: 大小不会随用户调整浏览器窗口大小而变化,一般是 900 到 1100像素宽。 其中 960 像素是最常见的,因为这个宽度适合所有现代显示器, 而且能够被 16、12、10、8、6、5、4 和 3 整除, 不仅容易计算等宽分栏的数量,而且计算结果也能得到没有小数的像素数。 参考:http://www.960.gs 流…

JSmiles 2021-12-21 浏览 868 评论 0 收藏 0

再谈等高列布局、水平垂直居中与置顶页脚

  • 再谈等高列布局、水平垂直居中与置顶页脚
  • 再谈等高列布局、水平垂直居中与置顶页脚
  • 再谈等高列布局、水平垂直居中与置顶页脚
  • 再谈等高列布局、水平垂直居中与置顶页脚

CSS 中的等高布局、水平垂直居中以及置顶页脚 Sticky Footer 这几个效果(我喜欢把他们说成是CSS效果,而不喜欢说其是问题)并不陌生,而且很多同学都似乎有碰到过,也经常体验过。甚至在很多前端面试中也常被考官问到,有的时候还直接被考官给秒杀了。 既然都有相关的教程,为何还费那么多劲再次扯蛋,难道真的闲得蛋疼了吗?其实并不如此,随着技术的更新,我们很多思路也得跟着创新,不能固定自封。那么…

甜柠檬 2021-12-20 浏览 806 评论 0 收藏 0

CSS 设计指南之 CSS 工作原理

每个 HTML 元素都有一组样式属性,可以通过 CSS 来设定。 这些属性涉及元素在屏幕上显示时的不同方面,比如在屏幕上位置、边框的宽度,文本内容的字体、字号和颜色,等等。 CSS 就是一种先选择 HTML 元素,然后设定选中元素 CSS 属性的机制。 CSS 选择符和要应用的样式构成了一条 CSS 规则。 剖析 CSS 规则 规则实际上就是一条完整的 CSS 指令。 规则声明了要修改的元素和要应…

JSmiles 2021-12-17 浏览 1001 评论 0 收藏 0

浅谈 CSS 垂直居中的几种方法

用css垂直居中元素往往给设计人员带来麻烦。然而,存在用于垂直定心的各种方法,并且每种方法都相当容易使用。今天我想介绍其中的6种方法。 1.图片水平垂直居中 html: <div class="parent"> <div class="child"> <img src="xxx/demo.png"> </div> </div> css: …

绝影如岚 2021-12-16 浏览 963 评论 0 收藏 0

CSS 设计指南之字体和文本

字体 网页中的字体有三个来源: 用户机器中安装的字体。(直到最近,这些字体还是能在网页中放心使用的唯一一批字体。) 保存在第三方网站上的字体。最常见的是 Typekit 和 Google,可以使用 link 标签把它们链接到你的页面上。 保存在你的 Web 服务器上的字体。这些字体可以使用 @font-face 规则随网页一起发送给浏览器。 字体相关属性 font-family font-size…

JSmiles 2021-12-15 浏览 940 评论 0 收藏 0

CSS 设计指南之 HTML 基础

标签 闭合标签: <标签名> 文本内容 </标签名> 自闭合标签: <标签名 属性_1="属性值" 属性_n="属性值" /> 其中,文本 使用 闭合标签 ,引用内容 使用 自闭和标签,例如,图片,资源文件。 HTML5 中的新标准参考 syntactic ,当然,HTML5也兼容以前的语法. 属性 src 属性(source):来源 alt 属性(altern…

JSmiles 2021-12-15 浏览 835 评论 0 收藏 0

CSS 经典布局之左侧固定大小右侧自动适应

最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的 APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是饭的列表等等。 先看 HTML 代码 ​<!doctype html> <html> <head> <meta charset="utf-8"> &l…

卸妝后依然美 2021-12-15 浏览 821 评论 0 收藏 0

Sass 之 @mixin 指令详细介绍

为了有效的维护和开发项目,代码的重复利用就显得尤为重要。在Sass中,除了 @import 和 @extend 可以使你的代码更加具有重复利用性,@mixin 指令也同样能提高你代码的重复使用率并简化你的代码。 @extend 指令通过继承从而简化了代码,但是它也有缺陷之处,首先是不够灵活,其次它还会将你不需要的其他地方具有相同类名的样式都继承过来。 @mixin 指令是另一种简化代码的方法。Mi…

甜柠檬 2021-12-14 浏览 808 评论 0 收藏 0

使用 Sass 编写 CSS Blend Modes

CSS Blend Modes 是 CSS 的一个新功能,可以将一个层和元素的背景层混合在一些。常见的是将背景图像和背景颜色混合在一起。 在这篇文章中,我们将来体验一上在几个项目中使用Sass编写的一个简单的混合模式的mixin。从而学习如何使用Sass创建混合模式的mixin,并且怎么使用。 使用混合模式 当在一个元素上使用 background-blend-mode 属性时,它将背景图像和背景…

虐人心 2021-12-14 浏览 787 评论 0 收藏 0

使用 Sass 自动化处理 CSS 动画

有一天 Harry Roberts 有一段有关于他网站上的代码在 twitter 求教,如果有可能,在某些方面得到改善。Harry Roberts 做的是使用 keyframes 的 carousel 动画,所以说使用一些数学计算是有可能得到相应改善。 有什么好主意? 据我所见,Harry Roberts 在他的主页上使用了一个 carousel 动画。可以使用 CSS,为什么要使用 JavaSc…

清晨说ぺ晚安 2021-12-10 浏览 994 评论 0 收藏 0

再谈 CSS 预处理器

CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器; 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。 所以这就决定了 CSS 预处理器的主要目标:提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代…

想挽留 2021-12-08 浏览 861 评论 0 收藏 0

开始使用 Sass 预处理语言

  • 开始使用 Sass 预处理语言
  • 开始使用 Sass 预处理语言
  • 开始使用 Sass 预处理语言
  • 开始使用 Sass 预处理语言

Sass 是一种 CSS 预处理语言,当你使用 Sass 这门语言时,你使用编译程序来转换 Sass 文件,通常以 SCSS 文件格式书写然后转换成 CSS 文件。Sass 通过添加方便的函数,变量以及其他类似脚本的助手使CSS能更加快速得书写和更加简单的控制。 起初我躲避 Sass 是因为它好像是针对程序员的(它的 文档 到处充斥着程序的专业术语),但是在我学习 Sass 一段时间后,我发现它不…

瑾兮 2021-12-08 浏览 927 评论 0 收藏 0

Sass 中五个有用的代码片段

使用 Sass,其中最喜欢的就是 Sass 的 mixin 和 function 功能。他们能自动化的重复使用一段 CSS 代码或功能以及更好的维护 CSS。这些功能让人实在是折服。但我常常发现许多开发人员为一个简单的任务创建一个复杂的系统,比如管理一个字体堆栈或颜色方案。这些设置和使用都让人感到非常的繁琐。在这篇文章中,我将解释这些自动化实现的功能。 颜色 一个网站的配色方案是非常重要的。通常看…

想挽留 2021-12-07 浏览 758 评论 0 收藏 0

简介

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

更多

推荐作者

意中人

文章 0 评论 0

artaime

文章 0 评论 0

用户100600860645

文章 0 评论 0

J.smile

文章 0 评论 2

qq_MVfp79

文章 0 评论 0