原生CSS设置网站主题色—CSS变量赋值
定义CSS变量
在css文件顶部定义css变量,注意必须以--开头,使用:root包括这几个变量
:root {
--main-bg-color: #ff7675;
--color1: #fbfee9;
--color2: #5a4446;
--color3: #8baca1;
--color4: #ffeec4;
}
使用
在需要的地方使用,使用var()包裹css变量
#secondsLong {
position: fixed;
color: var(--color1);
width: 100%;
height: 40px;
font-size: 1.2em;
bottom: 0;
background-color: var(--main-bg-color);
}
原生CSS设置网站主题色—CSS变量赋值的更多相关文章
- 小技巧!CSS 提取图片主题色功能探索
本文将介绍一种利用 CSS 获取图片主题色的小技巧.一起看看~ 背景 起因是微信技术群里有个同学发问,有什么方法能够获取图片的主色呢?有一张图片,获取他的主色调: 利用获取到的这个颜色值,来实现类似这 ...
- HTML和CSS设置动态导航以及CSS中伪元素的简单说明
HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...
- Jquery 设置class 和 div CSS
Jquery 设置class 和 div CSS 1 Jquery 根据标签内容获取标签div,从而修改该div CLASS //追加 $('label:contains("labelcon ...
- Swift主题色顶级解决方案
一.常规主题色使用点 应用在发布前都会对主题色进行设置,以统一应用的风格(可能有多套主题).在主题色设置上有几个方面,如下: 1. TabBar部分,设置图片高亮.文本高度颜色2. Navigatio ...
- Swift主题色顶级解决方案一
一.常规主题色使用点 应用在发布前都会对其主题色进行设置,以统一应用的风格(可能有多套主题).在主题色设置上有几个方面,如下: 1.TabBar部分,设置图片高亮.文本高度颜色 2.Navigatio ...
- 使用 css/less 动态更换主题色(换肤功能)
前言 说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点 一.看需求是什么 一般来说换肤的需求分为两种: 1. 一种是几种可供选择的颜色/主题样式,进行选择切换,这种可供 ...
- 044. asp.net主题之二为主题添加CSS样式和动态加载主题
1. 新建任意一个网站, 默认主页为Default.aspx, 增加一个App_Themes目录, 用于存储主题, 添加一个MyTheme的主题, 在MyTheme主题下添加一个样式表文件, 默认名称 ...
- css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
- PHP.5-DIV+CSS布局网站首页实例
DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...
随机推荐
- 修改jenkins发布账号信息
- win(64位)环境下oracle11g的安装方法
将压缩文件解压到一个目录中,该目录结构如下: 安装步骤(摘自网络): 1.进入数据库解压目录,双击其中的“setup.exe”文件,稍等片刻出现如下“配置安全更新“界面,取消“我希望通过My Orac ...
- Linux下查看80端口是否被占用
方式一: ps -ef |grep 80 方式二: netstat -anp |grep :80 方式三: lsof -i:80 方式四: netstat -tunlp |grep :80 方式五: ...
- js 2017 - 2
设置360为极速模式 <meta name='renderer' content='webkit'> css3超出隐藏 .ellipsis { // 超出一行 width: 100%; ...
- .Net开源网络爬虫Abot介绍(转)
转载地址:http://www.cnblogs.com/JustRun1983/p/abot-crawler.html .Net中也有很多很多开源的爬虫工具,abot就是其中之一.Abot是一个开源的 ...
- Promise-async-await处理函数
/*function request() { // 此处的request返回的是一个Promise return new Promise((resolve, reject) => { ajax( ...
- AtCoder Regular Contest 101 (ARC101) D - Median of Medians 二分答案 树状数组
原文链接https://www.cnblogs.com/zhouzhendong/p/ARC101D.html 题目传送门 - ARC101D 题意 给定一个序列 A . 定义一个序列 A 的中位数为 ...
- nssm部署.net core console到windows服务
轻便式发布 与.net fx不同 需要dotnet.exe来引导 Path:默认为 C:\Program Files\dotnet\dotnet.exe: Startup directory:程序所在 ...
- 亲和串 kmp
Problem Description 人随着岁数的增长是越大越聪明还是越大越笨,这是一个值得全世界科学家思考的问题,同样的问题Eddy也一直在思考,因为他在很小的时候就知道亲和串如何判断了,但是发现 ...
- P1433 吃奶酪 回溯法 优化
题目描述 房间里放着n块奶酪.一只小老鼠要把它们都吃掉,问至少要跑多少距离?老鼠一开始在(0,0)点处. 输入输出格式 输入格式: 第一行一个数n (n<=15) 接下来每行2个实数,表示第i块 ...