仿制腾讯的QMUI写了一个css样式表……雏形</br>
变量那里可以改颜色</br>
其实是想写一个样式库发帖的时候做模板用……</br>
所有正式管理用户组的HTML代码功能已经开了 大家可以拿去试下</br>
参考我的帖子：https://www.gn00.com/t-1851111-1-1.html</br>
不过很多东西没加进来
[pre]
.vars {
/*公用变量库*/
--color_light: #fff;
--color_light_plus: #eee;
--color_dark: #04c9e8;
--color_dark_plus: #05d7f7;
--window_shadow: 0 2px 20px 0 rgba(0, 0, 0, .15);
--window_border_color: #999;
}
.btn_core {
/*框架属性*/
display: inline-block;
box-sizing: border-box;
min-width: 46px;
min-height: 32px;
padding: 0 15px;
margin: 0;
border: 1px solid transparent;
border-radius: 3px;
/*文本属性*/
line-height: 150%;
font-size: 13px;
text-decoration: none;
text-align: center;
/*颜色属性*/
color: var(--color_light);
background-color: var(--color_dark);
/*事件属性*/
cursor: pointer;
}
.btn_core_win {
margin-left: 8px;
width: 70px;
}
.btn_core:hover {
/*颜色属性*/
background: var(--color_dark_plus);
color: var(--color_light);
}
.btn_core:active {
background-color: var(--color_dark);
color: var(--color_light);
}
.btn_core_ghost {
/* #继承core# */
/*颜色属性*/
color: var(--color_dark);
border-color: var(--color_dark);
background-color: var(--color_light);
}
.btn_core_ghost:hover {
/*颜色属性*/
background: var(--color_light);
color: var(--color_dark_plus);
}
.btn_core_ghost:active {
/*颜色属性*/
background-color: var(--color_light);
color: var(--color_dark);
}
.window_core {
/*框架属性*/
min-width: 420px;
width: 500px;
border: none;
border-radius: 5px;
box-shadow: var(--window_shadow);
/*颜色属性*/
background: #fff;
}
.window_head {
/*框架属性*/
min-height: 40px;
padding: 0 12px;
border: 1px solid var(--window_border_color);
border-radius: 5px 5px 0 0;
/*颜色属性*/
background-color: var(--color_dark);
}
.window_title {
/*文本属性*/
line-height: 280%;
font-size: 14px;
font-weight: 700;
/*颜色属性*/
color: var(--color_light);
}
.window_body {
/*框架属性*/
border: 1px solid var(--window_border_color);
border-top: none;
border-bottom: none;
}
.window_body_dialogue{
padding: 23px 30px 30px 37px;
}
.window_body a{
/*框架属性*/
display:inline-block;
border:#999 1px dashed;
border-radius: 2px;
padding:0 2px;
/*文本属性*/
text-decoration: none;
/*颜色属性*/
color:var(--color_dark);
}
.window_body a:hover{
color:var(--color_dark_plus);
}
.window_body a:active{
color: var(--color_dark);
}
.window_foot {
/*框架属性*/
border: 1px solid var(--window_border_color);
border-top: none;
border-radius: 0 0 5px 5px;
padding: 17px 12px;
/*文本属性*/
text-align: right;
/*颜色属性*/
background-color: #fff;
}[/pre]
*本站禁止HTML标签噢*
.vars {
/*公用变量库*/
--color_light: #fff;
--color_light_plus: #eee;
--color_dark: #04c9e8;
--color_dark_plus: #05d7f7;
--window_shadow: 0 2px 20px 0 rgba(0, 0, 0, .15);
--window_border_color: #999;
}
.varsx {
/*公用变量库*/
--color_light: #fff;
--color_light_plus: #eee;
--color_dark: #333;
--color_dark_plus: #000;
--window_shadow: 0 2px 20px 0 rgba(0, 0, 0, .15);
--window_border_color: #999;
}
.btn_core {
/*框架属性*/
display: inline-block;
box-sizing: border-box;
min-width: 46px;
min-height: 32px;
padding: 0 15px;
margin: 0;
border: 1px solid transparent;
border-radius: 3px;
/*文本属性*/
line-height: 150%;
font-size: 13px;
text-decoration: none;
text-align: center;
/*颜色属性*/
color: var(--color_light);
background-color: var(--color_dark);
/*事件属性*/
cursor: pointer;
}
.btn_core_win {
margin-left: 8px;
width: 70px;
}
.btn_core:hover {
/*颜色属性*/
background: var(--color_dark_plus);
color: var(--color_light);
}
.btn_core:active {
background-color: var(--color_dark);
color: var(--color_light);
}
.btn_core_ghost {
/* #继承core# */
/*颜色属性*/
color: var(--color_dark);
border-color: var(--color_dark);
background-color: var(--color_light);
}
.btn_core_ghost:hover {
/*颜色属性*/
background: var(--color_light);
color: var(--color_dark_plus);
}
.btn_core_ghost:active {
/*颜色属性*/
background-color: var(--color_light);
color: var(--color_dark);
}
.window_core {
/*框架属性*/
min-width: 420px;
width: 500px;
border: none;
border-radius: 5px;
box-shadow: var(--window_shadow);
/*颜色属性*/
background: #fff;
}
.window_head {
/*框架属性*/
min-height: 40px;
padding: 0 12px;
border: 1px solid var(--window_border_color);
border-radius: 5px 5px 0 0;
/*颜色属性*/
background-color: var(--color_dark);
}
.window_title {
/*文本属性*/
line-height: 280%;
font-size: 14px;
font-weight: 700;
/*颜色属性*/
color: var(--color_light);
}
.window_body {
/*框架属性*/
border: 1px solid var(--window_border_color);
border-top: none;
border-bottom: none;
}
.window_body_dialogue{
padding: 23px 30px 30px 37px;
}
.window_body a{
/*框架属性*/
display:inline-block;
border:#999 1px dashed;
border-radius: 2px;
padding:0 2px;
/*文本属性*/
text-decoration: none;
/*颜色属性*/
color:var(--color_dark);
}
.window_body a:hover{
color:var(--color_dark_plus);
}
.window_body a:active{
color: var(--color_dark);
}
.window_foot {
/*框架属性*/
border: 1px solid var(--window_border_color);
border-top: none;
border-radius: 0 0 5px 5px;
padding: 17px 12px;
/*文本属性*/
text-align: right;
/*颜色属性*/
background-color: #fff;
}</style>
</br>
<div class="vars window_core">
<div class="vars window_head">
<div class="vars window_title">窗体标题</div>
</div>
<div class="vars window_body window_body_dialogue">
这里是窗体body部分的正文。<a href="http://www.baidu.com" target="_blank">这是URL地址：http://www.baidu.com</a>
</div>
<div class="vars window_foot">
<button class="vars btn_core btn_core_win">提交</button>
<button class="vars btn_core btn_core_win btn_core_ghost">取消</button>
</div>
</div>
</br>
<div class="varsx window_core">
<div class="varsx window_head">
<div class="varsx window_title">窗体标题</div>
</div>
<div class="varsx window_body window_body_dialogue">
这里是窗体body部分的正文。<a href="http://www.baidu.com" target="_blank">这是URL地址：http://www.baidu.com</a>
</div>
<div class="varsx window_foot">
<button class="varsx btn_core btn_core_win">提交</button>
<button class="varsx btn_core btn_core_win btn_core_ghost">取消</button>
</div>
</div>