主题样式选择效果代码及css样式
先上效果图：
主要页面代码及样式：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.tab-pane{
width:268px;
}
.tab-header{
position: relative;
height: 42px;
line-height: 42px;
padding: 0 15px;
color: #333;
border-radius: 2px 2px 0 0;
font-size: 14px;
border-bottom: 1px solid #f6f6f6;
}
.set-theme {
padding: 5px;
overflow-x: hidden;
position: relative;
line-height: 24px;
}
.set-theme-color {
list-style: none;
margin: 0;
padding: 0;
}
.set-theme-color li {
position: relative;
display: inline-block;
vertical-align: top;
cursor: pointer;
font-size: 12px;
color: #666;
width: 70px;
padding: 5px;
border: 1px solid #fff;
} .set-theme-color li.active,
.set-theme-color li.active:after,
.set-theme-color li:hover,
.set-theme-color li:after {
border-color:#5FB878;
opacity: 1;
}
.set-theme-page {
display: block;
}
.set-theme-logo {
display: block;
width: 20%;
float: left;
height: 7px;
box-shadow: 0 0 1px rgba(0,0,0,0.4);
}
.set-theme-header {
display: block;
width: 80%;
float: left;
height: 7px;
box-shadow: 0 0 1px rgba(0,0,0,0.4);
}
.set-theme-side {
display: block;
width: 20%;
float: left;
height: 20px;
box-shadow: 0 0 1px rgba(0,0,0,0.4);
}
.set-theme-body {
display: block;
width: 80%;
float: left;
height: 20px;
box-shadow: 0 0 1px rgba(0,0,0,0.4);
} *[data-skin="skin-blue"] .set-theme-logo {
background: #367fa9;
}
*[data-skin="skin-blue"] .set-theme-header {
background: #3c8dbc;
}
*[data-skin="skin-blue"] .set-theme-side {
background: #222d32;
}
*[data-skin="skin-blue"] .set-theme-body {
background: #eee;
} *[data-skin="skin-black"] .set-theme-logo {
background: #fefefe;
}
*[data-skin="skin-black"] .set-theme-header {
background: #fefefe;
}
*[data-skin="skin-black"] .set-theme-side {
background: #222d32;
}
*[data-skin="skin-black"] .set-theme-body {
background: #eee;
} *[data-skin="skin-purple"] .set-theme-logo {
background: #555299;
}
*[data-skin="skin-purple"] .set-theme-header {
background: #605ca8;
}
*[data-skin="skin-purple"] .set-theme-side {
background: #222d32;
}
*[data-skin="skin-purple"] .set-theme-body {
background: #eee;
} *[data-skin="skin-green"] .set-theme-logo {
background: #008d4c;
}
*[data-skin="skin-green"] .set-theme-header {
background: #00a65a;
}
*[data-skin="skin-green"] .set-theme-side {
background: #222d32;
}
*[data-skin="skin-green"] .set-theme-body {
background: #eee;
} *[data-skin="skin-red"] .set-theme-logo {
background: #d33724;
}
*[data-skin="skin-red"] .set-theme-header {
background: #dd4b39;
}
*[data-skin="skin-red"] .set-theme-side {
background: #222d32;
}
*[data-skin="skin-red"] .set-theme-body {
background: #eee;
} *[data-skin="skin-yellow"] .set-theme-logo {
background: #db8b0b;
}
*[data-skin="skin-yellow"] .set-theme-header {
background: #f39c12;
}
*[data-skin="skin-yellow"] .set-theme-side {
background: #222d32;
}
*[data-skin="skin-yellow"] .set-theme-body {
background: #eee;
} *[data-skin="skin-blue-light"] .set-theme-logo {
background: #367fa9;
}
*[data-skin="skin-blue-light"] .set-theme-header {
background: #3c8dbc;
}
*[data-skin="skin-blue-light"] .set-theme-side {
background: #f9fafc;
}
*[data-skin="skin-blue-light"] .set-theme-body {
background: #eee;
} *[data-skin="skin-black-light"] .set-theme-logo {
background: #fefefe;
}
*[data-skin="skin-black-light"] .set-theme-header {
background: #fefefe;
}
*[data-skin="skin-black-light"] .set-theme-side {
background: #f9fafc;
}
*[data-skin="skin-black-light"] .set-theme-body {
background: #eee;
} *[data-skin="skin-purple-light"] .set-theme-logo {
background: #555299;
}
*[data-skin="skin-purple-light"] .set-theme-header {
background: #605ca8;
}
*[data-skin="skin-purple-light"] .set-theme-side {
background: #f9fafc;
}
*[data-skin="skin-purple-light"] .set-theme-body {
background: #eee;
} *[data-skin="skin-green-light"] .set-theme-logo {
background: #008d4c;
}
*[data-skin="skin-green-light"] .set-theme-header {
background: #00a65a;
}
*[data-skin="skin-green-light"] .set-theme-side {
background: #f9fafc;
}
*[data-skin="skin-green-light"] .set-theme-body {
background: #eee;
} *[data-skin="skin-red-light"] .set-theme-logo {
background: #d33724;
}
*[data-skin="skin-red-light"] .set-theme-header {
background: #dd4b39;
}
*[data-skin="skin-red-light"] .set-theme-side {
background: #f9fafc;
}
*[data-skin="skin-red-light"] .set-theme-body {
background: #eee;
} *[data-skin="skin-yellow-light"] .set-theme-logo {
background: #db8b0b;
}
*[data-skin="skin-yellow-light"] .set-theme-header {
background: #f39c12;
}
*[data-skin="skin-yellow-light"] .set-theme-side {
background: #f9fafc;
}
*[data-skin="skin-yellow-light"] .set-theme-body {
background: #eee;
}
</style>
</head>
<body>
<div class="tab-pane">
<div class="tab-header">主题颜色</div>
<div class="set-theme">
<ul class="set-theme-color">
<li title="Blue" data-skin="skin-blue" class="active">
<div class="set-theme-page">
<div class="set-theme-logo"></div>
<div class="set-theme-header"></div>
<div class="set-theme-side"></div>
<div class="set-theme-body"></div>
</div>
</li>
<li title="Black" data-skin="skin-black">
<div class="set-theme-page">
<div class="set-theme-logo"></div>
<div class="set-theme-header"></div>
<div class="set-theme-side"></div>
<div class="set-theme-body"></div>
</div>
</li>
<li title="Purple" data-skin="skin-purple">
<div class="set-theme-page">
<div class="set-theme-logo"></div>
<div class="set-theme-header"></div>
<div class="set-theme-side"></div>
<div class="set-theme-body"></div>
</div>
</li>
<li title="Green" data-skin="skin-green">
<div class="set-theme-page">
<div class="set-theme-logo"></div>
<div class="set-theme-header"></div>
<div class="set-theme-side"></div>
<div class="set-theme-body"></div>
</div>
</li>
<li title="Red" data-skin="skin-red">
<div class="set-theme-page">
<div class="set-theme-logo"></div>
<div class="set-theme-header"></div>
<div class="set-theme-side"></div>
<div class="set-theme-body"></div>
</div>
</li>
<li title="Yellow" data-skin="skin-yellow">
<div class="set-theme-page">
<div class="set-theme-logo"></div>
<div class="set-theme-header"></div>
<div class="set-theme-side"></div>
<div class="set-theme-body"></div>
</div>
</li>
<li title="Blue Light" data-skin="skin-blue-light">
<div class="set-theme-page">
<div class="set-theme-logo"></div>
<div class="set-theme-header"></div>
<div class="set-theme-side"></div>
<div class="set-theme-body"></div>
</div>
</li>
<li title="Black Light" data-skin="skin-black-light">
<div class="set-theme-page">
<div class="set-theme-logo"></div>
<div class="set-theme-header"></div>
<div class="set-theme-side"></div>
<div class="set-theme-body"></div>
</div>
</li>
<li title="Purple Light" data-skin="skin-purple-light">
<div class="set-theme-page">
<div class="set-theme-logo"></div>
<div class="set-theme-header"></div>
<div class="set-theme-side"></div>
<div class="set-theme-body"></div>
</div>
</li>
<li title="Green Light" data-skin="skin-green-light">
<div class="set-theme-page">
<div class="set-theme-logo" ></div>
<div class="set-theme-header"></div>
<div class="set-theme-side"></div>
<div class="set-theme-body"></div>
</div>
</li>
<li title="Red Light" data-skin="skin-red-light">
<div class="set-theme-page">
<div class="set-theme-logo"></div>
<div class="set-theme-header"></div>
<div class="set-theme-side"></div>
<div class="set-theme-body"></div>
</div>
</li>
<li title="Yellow Light" data-skin="skin-yellow-light">
<div class="set-theme-page">
<div class="set-theme-logo"></div>
<div class="set-theme-header"></div>
<div class="set-theme-side"></div>
<div class="set-theme-body"></div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
主题样式选择效果代码及css样式的更多相关文章
- 3.通过js代码设置css样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 5、通过js代码设置css样式
1.页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- CSS样式----图文详解：css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
- css样式大全，完整的Css样式大全(整理)
CSS样式被称为为“层叠样式表”,是一种网页制作做不可或缺的技术,是用于装饰网页,达到设计效果的一种样式语言,下面将整理一下css常用样式: 字体属性:(font) 大小 {font-size: x- ...
- 为什么我获取不到这个css样式？js原生获取css样式总结
还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...
- LODOP打印超文本字符串拼接2 单选选择css样式表格
之前的相关字符串拼接的博文:LODOP打印超文本字符串拼接1 固定表格填充数值之前博文介绍过,字符串可以随意拼接,只要最后组织成的字符串是自己需要的超文本就可以了,前面还有一篇也是拼接样式的:Lodo ...
- 去除冗余 – 精简您的CSS样式代码
讲讲常见的一些没有必要使用CSS代码情况,而这些不起作用可以去掉的CSS代码可能是我们经常忽视的.越是对CSS理解不够,越容易出现这些问题. 二.一些常见不必要CSS样式 1.与默认CSS样式一致 我 ...
- css样式实现字体删除线效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Typora 修改代码块高亮样式
目录 方法一:下载自己喜欢的样式 方法二:获取Typora自制主题 方法三:自己撰写css样式文件 方法一:下载自己喜欢的样式 Typora的代码块语法高亮使用的是CodeMirror实现的,所以需要 ...
- Web前端开发基础 第四课（认识CSS样式）
CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素( ...
随机推荐
- Armv8之Execution State 和 Exception Level(一)
@ 目录 1. 典型的Exception Level使用模型 2.异常相关术语 3. Execution State 3.1 两种Execution State 3.2 决定Execution Sta ...
- 小程序canvas2D绘制印章,话不多说,直接上代码
效果图: CanvasContext 是旧版的接口,不维护了, 新版 Canvas 2D 接口与 Web 一致 官方文档: https://developers.weixin.qq.com/mini ...
- orcl between and 时间
在网上查阅,大家都说between and两边都会包含,但是对于时期来讲,他会包含前者,不会包含后者. 也就是说求一个时间介于上周六到本周五的区间,用between and 需要计算出上周六的时间和本 ...
- K8s架构|全面整理K8s的架构介绍
K8S架构与核心技术介绍 1. 架构图 1.1 整体结构图 1.2 组件间的协议 CNI: CNI是Container Network Interface的是一个标准的,通用的接口 ;用于连接容器管理 ...
- 踩坑记录：Redis的lettuce连接池不生效
踩坑记录:Redis的lettuce连接池不生效 一.lettuce客户端 lettuce客户端 Lettuce 和 Jedis 的都是连接Redis Server的客户端程序.Jedis在实现上是直 ...
- 深度学习GPU加速配置方法
深度学习GPU加速配置方法 一.英伟达官方驱动及工具安装 首先检查自己的电脑驱动版本,未更新至最新建议先将驱动更新至最新,然后点击Nvidia控制面板 2.在如下界面中点击系统信息,点击显示可以看见当 ...
- 从源码构建docker-ce
准备环境 准备一台Linux主机,并在上面安装好docker-ce,安装好make,git就可以开始编译工作了.对,就是如此简单,可能你会对此感到异或为啥要装docker,我不是准备编译这个玩意么,为 ...
- Jmeter之非GUI下执行脚本
1.进入jmeter 应用所在路径 eg: cd D:\Program Files\apache-jmeter-5.2\bin 2.输入运行命令:jmeter -n -t [jmx脚本路径] -l [ ...
- ClickHouse MergeTree引擎
Clickhouse 中最强大的表引擎当属 MergeTree (合并树)引擎及该系列(*MergeTree)中的其他引擎. MergeTree 系列的引擎被设计用于插入极大量的数据到一张表当中.数据 ...
- python与数值计算环境安装
数值计算的编程的软件很多种,也见过一些编程绘图软件的对比. 利用Python进行数值计算,需要用到numpy(矩阵) ,scipy(公式符号), matplotlib(绘图)这些工具包. 1.Linu ...