美文网首页
快速拥有一款高大上的后现代样式主题(两步搞定)

快速拥有一款高大上的后现代样式主题(两步搞定)

作者: 无远开发平台 | 来源:发表于2020-11-01 17:18 被阅读0次

使用无远开发平台开发应用,可以完全自主掌握样式。

》演示地址《

效果截图

image
image
image
image

实现方法

第一步 创建并上传样式文件,并在首页中引入该样式文件

  • 本地创建 css 文件,命名为 my-style.css,并贴入以下内容:
body[theme=base] .bg-mask,body[theme=base] .page-tab-container li.selected {
  background: #e4e7e8;
  color: #000;
}
.ui-state-active, .ui-widget-content .ui-state-active {
  background: #007aff;
  border-color: #007aff;
}
.ui-widget-overlay{
  background: #111; opacity: 0.15;
}
.zwindow {
  box-shadow: 3px 2px 5px #999;
}
.zwindow-header {
  border-radius: 0 !important;
}
.zwindow-body {
  border-radius: 0 !important;
}
.zwindow-bar {
  border-radius: 0 !important;
}
#header {
  box-shadow: 0px 1px 5px #666;
  border-bottom: none;
  z-index: 1;
}
#header .path label.ui-state-active {
  opacity: 1;
}
#navigator {
  border-right: none;
  box-shadow: 1px 1px 5px #666;
}
#navigator.ui-state-default {
  background: #111;
  border-color: #e4e7e8;
}
#navigator ul.en-menu li.selected>a {
  border-right: none;
}
#navigator.ui-state-default a {
  color: #999;
}
#navigator .ui-state-hover {
  background: #111;
  border-color: #111;
}
#navigator .ui-state-hover a {
  color: #ccc;
}
#navigator .ui-state-active {
  background: #007aff;
}
#navigator .ui-state-active a {
  color: #fff;
}
#bottom {
  bottom:0;
}
.ui-state-error, .ui-widget-content .ui-state-error  {
  background-color: #FF3B30;
  border: solid 1px #FF3B30;
  color: #fff;
}
.ui-state-error a, .ui-widget-content .ui-state-error a {
  color: #fff;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  border: 1px solid #ffc200;
  background: #ffc200;
  color: #fff;
}
  • 在工作台全局配置-静态资源上传上述样式文件
  • 在工作台全局配置-前端-首页访问-引入静态资源-PC端,添加文件 my-style.css

第二步 工作台全局配置-前端-主页设置

  • 皮肤设置为: base
  • 页面内边距PC端,上下左右各设置为 12

如果懂 CSS,完全可以按照自己的想法修改第一步中的样式文件,达到自己希望的效果。

其他参考:如何让界面更漂亮

相关文章

网友评论

      本文标题:快速拥有一款高大上的后现代样式主题(两步搞定)

      本文链接:https://www.haomeiwen.com/subject/qncuvktx.html