主题样式选择效果代码及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)的文字将变成蓝色,而其他的元素( ...
随机推荐
- 回溯算法经典问题总结（.NET版）
回溯算法 回溯法其实也是一种递归,本质上就是穷举,然后筛选出符合规则的数据.为了使回溯更加高效,我们根据规则要求,在穷举过程中加上条件限制(也就是剪枝). 我们什么场景下应该想到使用回溯法呢? 如何画 ...
- 基于python的数学建模---传染病六个模型
六个模型的区别 SI-Model import scipy.integrate as spi import numpy as np import matplotlib.pyplot as plt # ...
- 篇(16)-Asp.Net Core入门实战-权限管理之用户创建与关联角色(ViewModel再用与模型验证二)
入门实战-权限管理之用户创建与关联角色(ViewModel再用与模型验证二) (1).在用户管理着模块中,相比较菜单功能的代码还是比较多的,设计到用户的创建,修改,角色变更和密码重置,同时都集中在列表 ...
- C++ 一个简洁的CHECK宏
#define CHECK2(condition, message) \ (!(condition)) ? (std::cerr << "Assertion failed: (& ...
- SPFA和链式前向星
链式前向星 一种存储图的数据结构 建立一个结构体和一个数组加一个变量,这里的to代表边\((u,v)\)中的\(v\)结点,而\(edge\)数组的索引\(idx\)代表\(u\),其中\(w\)代表 ...
- 解决linux vlc设置中文问题
解决方法 sudo apt install vlc-l10n
- 使用pycharm or vscode来编写python代码？
pycharm社区版可用于商业项目 pycharm社区版可用于商业项目,来源于官方的回答:Can I use Community Editions of JetBrains IDEs for deve ...
- 彻底理解Python中的闭包和装饰器（上）
什么是闭包 闭包(Closure)其实并不是Python独有的特性,很多语言都有对闭包的支持.(当然,因为Python是笔者除C/C++之外学习的第二门语言,所以也是第一次遇到闭包.)简而言之,闭包实 ...
- JavaScript：如何知道一个变量的数据类型？：typeof
使用typeof去查看一个变量的数据类型,如下图所示,展示了JS的七大基础数据类型和对象: 这里有必要提一下: 函数也是一个对象,但是函数的特殊性,使得在使用typeof去判断其类型的时候,会输出fu ...
- 万字长文详解 YOLOv1-v5 系列模型
一,YOLOv1 Abstract 1. Introduction 2. Unified Detectron 2.1. Network Design 2.2 Training 2.4. Inferen ...