background color
很多同学在进行编程学习时缺乏系统学习的资料。本页面基于background color内容，从基础理论到综合实战，通过实用的知识类文章，标准的编程教程，丰富的视频课程，为您在background color相关知识领域提供全面立体的资料补充。同时还包含 backbone、background、background attachment 的知识内容，欢迎查阅！
background color相关知识
-
盒模型与BFC<!DOCTYPE html> <html> <head> <title>盒模型、BFC</title> <style type="text/css"> html{ margin: 0px; padding: 0px; } .hidden{ background-color: red; overflow: hidden; } .hidden .child{ background-color: yellow; height: 100px; margin-top: 10px } .float{ margin-top: 60px; background-color: red; } .float .left{ background-color: yellow; height: 100px; width: 50px; float:left; } .float .right { background-color: b
-
纯css3画安卓机器人，有点蠢<style> .rbody{ width: 200px; height: 190px; position: relative; background-color: greenyellow; border-radius: 0 0 15px 15px; margin: 300px auto; } .brain{ width: 200px; height: 100px; border-radius: 100px 100px 0 0; background-color: greenyellow; position: absolute; top: -110px; } .leftleg{ width: 50px; height: 90px; background-color: greenyellow; position: absolute; top: 190px; left: 30px; border-radius:
-
块绕点旋转，在动画中用body{ overflow: hidden; } main{ width: 800px; height: 600px; margin: 100px auto; background-color: lightgray; position: relative; } #dot{ width: 30px; height: 30px; background-color: red; border-radius: 15px; /*放在main的中心*/ position: absolute; top: calc(50% - 30px / 2); left: calc( 50% - 30px / 2); } #color{ width: 100px; height: 100px; background-color: red; /*定宽居中*/ margin: 100px auto; /*修改
-
如何清除 float 的影响抗浮动的专用属性 clear clear 的定义 clear 属性的本质意义是让元素本身不能与前面的浮动元素相邻( 不在一行显示 )。 例子： <style> ul { background-color: cornsilk; margin: 0; padding: 0; } li { background-color: brown; width: 40px; height: 40px; color: #fff; list-style: none; float: left; } li:first-child { background-color: cadetblue; } li:last-child { background-color: coral; } </style> <ul> <li>1</li> <li style
background color相关课程
background color相关教程
- 3.3 @for 指令 @for 指令很有意思，它可以设定一个范围然后在这个范围内循环，比如说在 1 ～ 5 这个范围内，或者在 3 ~ 6 这个范围内等等。它有两种写法 @for from to { … } 或者 @for from through { … }，这两种写法中variable 都是每次循环时候的数值，start 都表示开始的边界，end 都表示结束的边界；这两种写法不同的是 through 包含 start 与 en ，而 to 包含 start 但不包含 end。文字描述难免有些抽象，我们直接举例看下：$base-color: #036;// 范围是 1 ~ 3@for $i from 1 through 3 { ul:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); }}// 范围是 4 ~ 6@for $i from 4 through 6 { ul:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); }}上面的代码我们用的是 through 写法，分别写了 1 ~ 3 范围的循环和 4 ~ 6范围的循环，也就是说循环体中的代码块会分别被计算 3 次，它最终会转换为如下的 CSS 代码：// 1 ~ 3 范围生成的ul:nth-child(3n+1) { background-color: #004080;}ul:nth-child(3n+2) { background-color: #004d99;}ul:nth-child(3n+3) { background-color: #0059b3;}// 4 ~ 6 范围生成的ul:nth-child(3n+4) { background-color: #0066cc;}ul:nth-child(3n+5) { background-color: #0073e6;}ul:nth-child(3n+6) { background-color: #0080ff;}看到转换后的 CSS 是不是感觉使用 @for 指令写起来简直飞快，下面我们在使用 to 写法来举个例子看下：$base-color: #036;@for $i from 1 to 3 { ul:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); }}上面使用 to 写法的代码将会转换为如下的 CSS 代码：ul:nth-child(3n+1) { background-color: #004080;}ul:nth-child(3n+2) { background-color: #004d99;}好了，通过上面的代码可以看出使用 to 写法是不包含 end 边界的。从上面我们举的两个例子不难看出，@for 指令可以极大的简化我们编写冗余繁琐的 CSS ，你自己需要多尝试这个指令来实际感受下。
- 3.2 变量的引用 上面我们说了怎么去声明一个 Sass 变量，下面我们讲如何去引用它。只要是可以写 CSS 属性值的地方，就可以使用变量，所以说，你几乎可以在任何地方引用变量，编译后，变量会被替换为变量值，如果说你需要改变这个值，那么你只需要在声明变量的地方改变这个变量值，那么其余引用它的地方就都会改变。我们写一段代码来感受下：$main-bg-color: blue;$main-border: 1px solid #cccccc;$main-font-size: 18px;$error-text-color: red;$body-color: $main-bg-color;body { background-color:$body-color;}.content { font-size:$main-font-size; background-color:$main-bg-color; border:$main-border;}.error { font-size:$main-font-size; color:$error-text-color;}上面我们定义了几个变量字体颜色、边框、字体大小等，然后在 .content 和 .error 的样式表中引用它们，值得注意的是 $body-color 这个变量，在声明变量时，变量的值也可以引用其他变量，是不是很方便很灵活，上面的 Sass 代码最终将会编译为如下的 CSS 代码：body { background-color: blue;}.content { font-size: 18px; background-color: blue; border: 1px solid #cccccc;}.error { font-size: 18px; color: red;}
- 2.4 Colors类型（颜色类型） Sass 对颜色的支持很丰富，包括 16 进制的颜色值（如 #ffffff 或 #000000等等）、CSS 颜色名（如 red 、blue 这种）或者是函数（如 rgb（）、rgba（）、hsl（）和hsla（）），这些都属于 Colors 类型，同时 Sass 也提供了很多颜色相关的函数，后面在函数的章节会详细说明。这里我们还是通过声明变量的方式来直观的感受一下 Colors 类型：$color-one: #ffffff;$color-two: red;$color-three: rgb(204, 102, 153);$color-four: rgba(107, 113, 127, 0.8);.box { color: $color-one; background-color: $color-two; border-color: $color-three; color: $color-four;}上面这段代码转换成 CSS 为：.box { color: #ffffff; background-color: red; border-color: #cc6699; color: rgba(107, 113, 127, 0.8);}
- 4. 实战经验 我们的项目是一个 Vue 单页应用，在我们的实际项目中有专门的 mixin.scss 文件来管理全局的 @mixin 指令，这里我从中截取出一部分来展示下：@mixin border ($width: 1px, $color: #cccccc, $style: solid) { border: { width: $width; color: $color; style: $style; }}@mixin font($size: 12px, $weight: 100, $familys...) { $family: "Times"; @if length($familys) > 0 { $family: $familys; } font: { size:$size; weight: $weight; family: $family; }}@mixin btn($type: "main") { border-radius: 4px; @if $type == "small" { width: 60px; height: 20px; background-color: #e5e5e5; color: #ffffff; &:hover { background-color: #4AA1FF; } } @else if $type == "disable" { width: 80px; height: 30px; background-color: #CCCCCC; color: #ffffff; } @else { width: 80px; height: 30px; background-color: #e5e5e5; color: #ffffff; &:hover { background-color: #4AA1FF; } }}从上面的代码可以看出，我定义的全局的 @mixin 有关于 border 样式的，有关于 font 样式的，还有一个我们自己封装的 button 样式，这样在项目的任何需要写这些样式的地方直接应用这些指令就可以了，而不需要编写大量的 CSS 样式，下面我截取一部分在某些页面中使用这些指令的代码：// 使用 border 混合指令.normal-border { @include border;}.error-border { @include border(2px, red, solid);}// 使用 font 混合指令.main { @include font(24px); .item { @include font(16px, 600, "serif", "Roman", "Times"); }}// 使用 button 混合指令.btn { &-main { @include btn(); } &-disable{ @include btn("disable"); } &-small{ @include btn("small"); }}上面的代码转换为 CSS 会非常的长，这里我就不贴出转换后的 CSS 代码了。你可以仔细看下这些代码，看看是怎么封装和使用的，在公司的实际项目中，如果使用了 Sass ，你一定会看到类似的这些封装，当然你可能也会自己封装这些；你可以对照这上面两段定义混合指令和使用混合指令的代码来复习本节的内容，然后自己尝试这将它转换为 CSS 以便更好的理解！
- 5. 实例 不是设置 box-sizing 分别在不同浏览器中的展示。<div class="demo">慕课网 CSS3 学习分享</div>.demo{ width:100px; height:100px; background:#000; color:#fff; padding:10px; border:5px solid red;}效果图不同浏览器中的展示效果图说明:左侧是 Chorme 浏览器右侧是低版本 IE 浏览器。给上面 demo 中设置 box-sizing 为 border-box。.demo{ width:100px; height:100px; background:#000; color:#fff; padding:10px; border:5px solid red; box-sizing:border-box;}效果图使用`border-box`效果图给上面 demo 中设置 box-sizing 为 content-box。.demo{ width:100px; height:100px; background:#000; color:#fff; padding:10px; border:5px solid red; box-sizing:content-box;}效果图使用`content-box`效果图
- 3. 语法详情 首先我们看一段代码，看看在 Sass 中的继承是长什么样子的：.a { width: 10px;}.b { @extend .a; height: 10px; color: red;}从上面的代码中可以看见，我在 .b 的样式中使用 @extend 继承了 .a 的样式，那么这段代码转换为 CSS 如下：.a, .b { width: 10px;}.b { height: 10px; color: red;}上面的代码中我们看到了 Sass 中继承的样子，它的写法是 @extend selector 也就是在 @extend 后面跟一个选择器，表示继承这个选择器的样式，下面我们详细讲解下它的语法。@extend 会包含包含扩展的样式规则，同时在 Sass 中它会确保复杂的选择器是交错的，这样无论你的 DOM 元素是如何嵌套的它都能保证正常工作。它还可以根据实际情况将选择器组合在一起，可以更智能的处理选择器以及包含伪类的选择器。我们举个稍复杂点的例子来看下：.a { width: 100px; height: 200px; background-color: orange; &:hover { background-color: green; } .link { width: 50%; height: 50%; color: red; &:active { color: blue; } i { font-size: 18px; font-weight: 600; } }}.b { @extend .a; width: 400px; height: 200px;}我们仔细解读上面的代码，我为 .a 写了一大堆的样式，包括它的子元素以及它的伪类；而 .b 下面有同样的子元素，同样的伪类别，只是宽高不同，那么我直接在 .b 中继承 .a 的样式，它会转换为什么样子的代码呢？它转换为 CSS 的代码如下：.a, .b { width: 100px; height: 200px; background-color: orange;}.a:hover, .b:hover { background-color: green;}.a .link, .b .link { width: 50%; height: 50%; color: red;}.a .link:active, .b .link:active { color: blue;}.a .link i, .b .link i { font-size: 18px; font-weight: 600;}.b { width: 400px; height: 200px;}从上面转换成 CSS 的代码我们可以看出，引用相同样式的部分都以逗号做了分隔，在 CSS 中使用逗号的含义你应该很了解，继承 @extend 就可以为你自动创建这些组合，提取相同的样式，所以如果有选择器使用了相同的样式，请使用继承的方式来实现！
background color相关搜索
-
back
backbone
background
background attachment
background color
background image
background position
background repeat
backgroundcolor
backgroundimage
background属性
badge
bash
basics
basis
bat
bdo
bean
before
begintransaction