sass方式实现颜色平铺（红色--->紫色）
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style/demo.css">
</head>
<body>
<div class="test">
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
<div class="color5"></div>
<div class="color6"></div>
<div class="color7"></div>
</div>
<div style="clear:both;"></div>
<div class="test2"></div>
</body>
</html>
@charset "UTF-8";
$list: red orange yellow green grey blue purple;
//$len: length($list);//自动获取长度
$width: percentage(1/7);
@for $i from 1 through 7 {
.test .color#{$i} {
width: $width;
background-color: nth($list, $i);
height: 10px;
float: left;
}
} .test {
width: 100%;
}
//使用这种方法（background-image: linear-gradient）也可以实现各种颜色的布局
.test2 {
//width: 100%;
//background-image: linear-gradient(to right, red 0%, red $width,orange $width, orange $width * 2);
} 注意：sass里边写的div个数应该与html里的布局一致，否则是识别不到的。
sass方式实现颜色平铺（红色--->紫色）的更多相关文章
- sass动态实现颜色平铺显示
@function stripes($position,$colors) { $colors: if(type-of($colors)!='list', compact($colors), $colo ...
- css如何将图片横向平铺？
在CSS中,可以使用background(背景)属性来添加图片,默认图片是向x轴和y轴重复.那么css如何将图片横向平铺?下面本篇文章就来给大家介绍一下使用CSS将图片横向平铺的方法,希望对大家有所帮 ...
- CSS背景颜色、背景图片、平铺、定位、固定
CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:u ...
- 笔记《精通css》第4章 背景图像，平铺方式，背景定位，圆角框，投影，不透明
第4章 背景图像,平铺方式,背景定位,圆角框,投影,不透明 1.背景图像 background-image:url() 2.平铺方式 background-repeat:repeat-x repea ...
- android背景平铺方式 tileMode
创建重复的背景图片 在drawable目录下创建一个repeat_bg.xml: 然后在布局的xml文件中可以这样引用: ================================ ...
- QPainter绘制图片填充方式（正常大小、剪切大小、自适应大小、平铺）
Qt中QPainter提供了绘制图像的API,极大地方便了我们对图像的绘制. Qt中提供了QPixmap, QBitmap,QBitMapQImage,QPicture等图像绘图设备,它们的类关系如下 ...
- Duilib技巧：背景图片平铺
贴图的描述 方式有两种 // 1.aaa.jpg // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0 ...
- UIImage图片处理，旋转、截取、平铺、缩放等操作
来源:iOS_小松哥 链接:http://www.jianshu.com/p/9ab1205f5166 有时候我们需要处理图片,比如改变大小,旋转,截取等等,所以今天说一说图片处理相关的一些操作. 本 ...
- 平铺式窗口管理器 Musca 初体验
作者: 吴吉庆 Version: 1.0 release: 2009-11-04 update: 2009-11-04 为什么用平铺式窗口管理器? 什么是平铺式窗口管理器(tiling window ...
随机推荐
- 黑马程序员_Java基础视频-深入浅出精华版--PPT 文件列表
\day01\code\第一章_Java概述.ppt;\day01\resource\资料\50道编程题(有精力的同学看看).doc;\day01\resource\资料\Sun_Java程序员认证考 ...
- 前端 - jquery方式 / iframe +form 方式 上传文件
环境与上一章一样 jquery 方式上传文件: HTML代码 {#html代码开始#} <input type="file" id="img" > ...
- 20165234 [第二届构建之法论坛] 预培训文档(Java版) 学习总结
[第二届构建之法论坛] 预培训文档(Java版) 学习总结 我通读并学习了此文档,并且动手实践了一遍.以下是我学习过程的记录~ Part1.配置环境 配置JDK 原文中提到了2个容易被混淆的概念 JD ...
- 看完此文还不懂NB-IoT，你就过来掐死我吧...
看完此文还不懂NB-IoT,你就过来掐死我吧....... 1 1G-2G-3G-4G-5G 不解释,看图,看看NB-IoT在哪里? 2 NB-IoT标准化历程 3GPP NB-IoT的标准化始于20 ...
- Bringing Native Performance to Electron
Bringing Native Performance to Electron https://realm.io/blog/native-performance-electron-realm/ Rea ...
- 设计模式C++学习笔记之十九（State状态模式）
19.1.解释 概念:允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改了它的类. main(),客户 CLiftState,电梯状态抽象类 CCloseingState,电梯门关闭 ...
- Boost property_tree解析json
使用Boost property_tree解析json 之前使用jsoncpp解析json,现在才知道boost就有解析的库,学习一下吧 property_tree可以解析xml,json,ini,i ...
- 题解-Atcoder_agc005D ~K Perm Counting
Problem AtCoder-agc005D 题意概要:给出\(n,k\),求合法的排列个数,其中合法定义为任何数字所在位置与自身值差的绝对值不为\(k\)(即求排列\(\{A_i\}\),使得\( ...
- ECC加密算法入门介绍 --- 看雪
标 题:ECC加密算法入门介绍 作 者:zmworm 时 间:2003/05/04 08:32pm 链 接:http://bbs.pediy.com ECC加密算法入门介绍 作者 :ZMWorm[C ...
- $Django 等web框架，交互，基础入门
1 web 应用2 c/s 和bs架构3 python中的web框架 a :socket b:路由跟视图函数匹配关系 c:模板渲染 django: uwsgi/wsgiref ...