利用软妹纸ui写的前端

最新推荐文章于 2021-08-30 20:11:00 发布
最新推荐文章于 2021-08-30 20:11:00 发布
阅读量1.1k 收藏
点赞数
分类专栏： HTML5 文章标签： ui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuiroot/article/details/50332487
版权 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
</head>
<link rel="stylesheet"  href="./css/amazeui.min.css">

<link rel="stylesheet"   href="./css/css.css">
<style >
 .get {
      background: #1E5B94;
      color: #fff;
      text-align: center;
      padding: 100px 0;
    }

    .get-title {
      font-size: 200%;
      border: 2px solid #fff;
      padding: 20px;
      display: inline-block;
    }

    .get-btn {
      background: #fff;
    }

    .detail {
      background: #fff;
    }

    .detail-h2 {
      text-align: center;
      font-size: 150%;
      margin: 40px 0;
    }

    .detail-h3 {
      color: #1f8dd6;
    }

    .detail-p {
      color: #7f8c8d;
    }

    .detail-mb {
      margin-bottom: 30px;
    }

    .hope {
      background: #0bb59b;
      padding: 50px 0;
    }

    .hope-img {
      text-align: center;
    }

    .hope-hr {
      border-color: #149C88;
    }

    .hope-title {
      font-size: 140%;
    }

    .about {
      background: #fff;
      padding: 40px 0;
      color: #7f8c8d;
    }

    .about-color {
      color: #34495e;
    }

    .about-title {
      font-size: 180%;
      padding: 30px 0 50px 0;
      text-align: center;
    }

    .footer p {
      color: #7f8c8d;
      margin: 0;
      padding: 15px 0;
      text-align: center;
      background: #2d3e50;
    }
  </style>

<body>
<header class="am-topbar am-topbar-inverse">
  <h1 class="am-topbar-brand">
    <a href="#">Amaze UI</a>
  </h1>

  <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

  <div class=" am-collapse am-topbar-collapse" id="doc-topbar-collapse">
    <ul class="am-nav am-nav-pills am-topbar-nav">
      <li class="am-active "><a href="#">首页</a></li>
      <li><a href="#">产品中心</a></li>
      <li class="am
      -dropdown" data-am-dropdown>
        <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
          产品 <span class="am-icon-caret-down"></span>
        </a>
        <ul class="am-dropdown-content">
          <li class="am-dropdown-header">标题</li>
          <li><a href="#">1. 去月球</a></li>
          <li class="am-active"><a href="#">2. 去火星</a></li>
          <li><a href="#">3. 还是回地球</a></li>
          <li class="am-disabled"><a href="#">4. 下地狱</a></li>
          <li class="am-divider"></li>
          <li><a href="#">5. 桥头一回首</a></li>
        </ul>
        <li><a href="#">历史版本</a></li>
          <li><a href="#">会员中心</a></li>
          <li><a href="#">关于我们</a></li>
      </li>
    </ul>

    <form class="am-topbar-form am-topbar-left am-form-inline" role="search">
      <div class="am-form-group">
        <input type="text" class="am-form-field am-input-sm" placeholder="搜索">
      </div>
    </form>

    <div class="am-topbar-right">
      <div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
        <button class="am-btn am-btn-secondary am-topbar-btn am-btn-sm am-dropdown-toggle" data-am-dropdown-toggle>其他 <span class="am-icon-caret-down"></span></button>
        <ul class="am-dropdown-content">
          <li><a href="#">注册</a></li>
          <li><a href="#">随便看看</a></li>
        </ul>
      </div>
    </div>

    <div class="am-topbar-right">
      <button class="am-icon-user am-btn am-btn-primary am-topbar-btn am-btn-sm">登录</button>


  </div>

  </div>
   </header>

<div class="nav2">
  <div class="get">
  <div class="am-g">
    <div class="am-u-lg-12">
      <h1 class="get-title">Amaze UI - HTML5 跨屏前端框架</h1>

      <p>
        期待你的参与，共同打造一个简单易用的前端框架
      </p>

      <p>
        <a href="http://amazeui.org" class="am-btn am-btn-sm get-btn">获取新get技能√</a>
      </p>
    </div>
  </div>
</div>
</div>
<div class="detail">
  <div class="am-g am-container">
    <div class="am-u-lg-12">
      <h2 class="detail-h2">One Web 、Any Device，期待和你一起去实现!</h2>

      <div class="am-g">
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">

          <h3 class="detail-h3">
            <i class="am-icon-mobile am-icon-sm"></i>
            为移动而生
          </h3>

          <p class="detail-p">
            Amaze UI 采用业内先进的 mobile first 理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。
          </p>
        </div>
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">
          <h3 class="detail-h3">
            <i class="am-icon-cogs am-icon-sm"></i>
            组件丰富，模块化
          </h3>

          <p class="detail-p">
            Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件，更有 17 款包含近 60 个主题的 Widgets，可快速构建界面出色、体验优秀的跨屏页面，大幅度提升你的开发效率。
          </p>
        </div>
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">
          <h3 class="detail-h3">
            <i class="am-icon-check-square-o am-icon-sm"></i>
            本地化支持
          </h3>

          <p class="detail-p">
            相比国外的前端框架，Amaze UI 专注解决中文排版优化问题，根据操作系统调整字体，实现最佳中文排版效果；针对国内主流浏览器及 App 内置浏览器提供更好的兼容性支持，为你节省大量兼容性调试时间。
          </p>
        </div>
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12 detail-mb">
          <h3 class="detail-h3">
            <i class="am-icon-send-o am-icon-sm"></i>
            轻量级，高性能
          </h3>

          <p class="detail-p">
            Amaze UI 非常注重性能，基于轻量的 Zepto.js 开发，并使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让你的 Web 应用可以高速载入。
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<footer class="footer">
  <p>© 2014 <a href="http://www.yunshipei.com" target="_blank">AllMobilize, Inc.</a> Licensed under <a
      href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>. by the AmazeUI Team.</p>
</footer>

</body>
</html>
CUIroot
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在 Vue 中，如何实现 RBAC（权限系统）?
qq_41994396的博客
05-09 1278
权限管理”一般在大家的印象中都属于后端的责任，但这两年随着 SPA 应用的兴起，很多应用都采用了前后端分离的方式进行开发，但是纯前端的开发方式就导致，以前很多由后端模板语言硬件解决的问题，现在势必要重新造一次轮子。而如果要重造轮子，前端er 就要根据对应的公司业务需求和后端er 一起配合，基于需求和安全性来考虑，来实现这个动态路由了。所以考虑到以上的痛点和具体的业务需求。今天我会模拟前端请求后端，获取用户权限，实现RBAC，带你从登录到验证、鉴权，最终实现动态 RBACRABC 的功能。
cui组件-web前端jquery组件库
weixin_30610755的博客
06-19 1263
cui组件是一款免费的web前端jquery组件库，里面有很多常有的jquery的插件，极大的方便前端页面的开发与后台的嵌入，也为企业的web前端提供解决方案。 下载地址http://files.cnblogs.com/ishibin/cui%E7%BB%84%E4%BB%B6-web%E5%89%8D%E7%AB%AFjquery%E7%BB%84%E4%BB%B6%E5%BA%9...
cui组件 jquery组件库
09-22
cui组件-web前端jquery组件库
RBAC权限管理
weixin_43818482的博客
01-02 282
RBAC权限管理 近 2 年一直使用蚂蚁金服的 Ant Design UI 框架以及其开箱即用的中台前端/设计解决方案 ANT DESIGN PRO （去年的圣诞风波有点影响，希望不再发生类似的事情），框架是一直更新一直迭代，不过里面涉及权限管理的部分的使用场景还是比较有限，兼容不了需要细化到各模块中的具体动作的场景。授人以鱼不如授人以渔，没有就自己撸一个呗。 设计思想 虽然是自己撸，但还是得站在...
八款JS框架介绍及比较
kingdax1的专栏
10-22 842
Dojo     Dojo 是目前最为强大的JS框架，它在自己的 Wiki 上给自己下了一个定义，Dojo 是一个用 JavaScript 编写的开源的DHTML工具箱。Dojo 很想做一个“大一统”的工具箱，不仅仅是浏览器层面的，野心还是很大的。Dojo 包括 Ajax、Browser、Event、Widget 等跨浏览器 API，包括了 JS 本身的语言扩展，以及各个方面的工具类库，和比较完善
低代码UI构件前端9组
最新发布
01-17
低代码UI构件前端9组
12个常用前端UI框架集合汇总
10-15
本文整理了一些比较流行的前端UI框架其中有VUE、bootstrap、jQuery等框架，，排名不分先后，仅供参考。可按照项目需求自行考虑
各行各业前端UI界面大全
11-12
可以直接使用这些UI界面进行前端界面的开发，拿来即用，后端程序员最害怕的就是写Ui界面了，对于后端程序员来说，他们通常更专注于处理业务逻辑和数据处理，对于 UI 界面的开发可能相对陌生或者觉得繁琐。...
低代码前端UI构件12组
01-17
低代码前端UI构件12组
cview前端UI框架
02-07
PC端vue项目引用； 自定义UI框架； 轻量级； 可打包cdn方式引入； 分页、消息弹窗、抽屉、按钮、按钮集和、空数据、自定义表格......
框架选型
weixin_33749131的博客
06-18 127
前面的话 　　有一个流传较广的笑话，一个人在stackoverflow中提了一个问题，如何使用javascript实现一个数字与另外一个数字相加。最高票回答是你应该使用jQuery插件，jQuery插件可以做任何事情。 历史总是在重演，以前是jQuery，现在可能是react或vue。不同的框架有不同的应用场景，杀鸡不要用牛刀。本文将详细介绍框架选型   框架与库 　　库(lib)具有以下...
2015年最全的移动WEB前端UI框架
资料汇总整理-仅供个人学习使用
05-13 4612
2015年最全的移动WEB前端UI框架分享给大家。 目前，众多互联网公司APP都嵌入了大量的HTML5，移动端的开发越来越重视，HTML5的运用场景也越来越多了。下面在移动WEB开发的过程中，使用合适的移动WEB UI框架可以大大提升我们的开发效率。下面就把2015年最全的移动WEB前端UI框架分享给大家。 Amaze UI Amaze UI是一个轻量级（所有CSS和JS gzip后10
【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas
编程记录，亲测有效
05-08 5974
顶部导航条如果你细心留意下现在的页面，实在是太常见了。这个组件在手机端的页面中，同样可以借助AmazeUI这个前端框架实现。与此同时，可以在导航栏的最右方加一个触发侧边导航栏offCanvas。不要再使用BootStrap那种，一旦点击就大幅度下拉的导航了，反正我个人觉得很蛋疼的。一个导航活活地占据了页面大量位置。这个侧边导航栏offCanvas曾经是php方面的WorkPress的优秀设计来的。
前端中的RBAC权限设计思想
m0_57712926的博客
08-30 799
目录前言一、什么是RBAC？二、RBAC的应用1. 用户分配角色2. 角色分配权限总结 前言 做后台管理系统，肯定会牵扯到用户权限的问题。为的是做到不同的用户进入管理系统看到的页面不同，并且根据用户权限来提供相对应的功能。那么怎么在项目中实现呢？一起来看看吧~ 一、什么是RBAC？ 为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案。 二、RBAC的应用 先
am-u-sm-6 am-u-md-6 am-u-lg-3
yumon321的博客
05-24 6896
am-u-sm-6（或其他数字） am-u-md-6（或其他数字） am-u-lg-3（或其他数字） 这些事什么意思呢？ 网站上查资料发现：      am-u-sm-*　　0-640px       am-u-md-*　　640px-1024px           am-u-lg-*　　  1025px+ .am-g表示行 .am-u-sm（/md/lg
十、VueJs 填坑日记之在项目中使用Amaze UI
词语大杂烩
11-29 4417
获取妹子UI（Amaze UI） 下载地址：http://amazeui.org/getting-started 点击上方绿色的按钮，我们来下载最新版的妹子UI，下面有配套的文档和编辑器，我们只是把妹子UI集成到vuejs项目中，所以我们只需要妹子UI就可以了。   整理妹子UI文件（Amaze UI） 将下载下来的AmazeUI-2.7.2.zip，我们解压到一个目
妹子UI之自定义分页控件
遛狗的代码的博客
08-30 4645
妹子UI，http://amazeui.org，在这儿顺便帮他打下广告，我个人觉得比Bootstrap漂亮，于是，我就选择了基于它的UI写出来自己的分页控件。 paginator.js的内容如下： (function ($) { $.fn.paginator = function (options) { //this指向当前的选择器 var config
给我写一个前端ui代码
05-05
好的，以下是一个简单的前端 UI 代码，包括一个导航栏和一个按钮： HTML 代码： ``` <!DOCTYPE html> <html> <head> <title>前端 UI</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="navbar"> <a href="#">首页</a> <a href="#">关于我们</a> <a href="#">联系我们</a> </div> <button>点击我</button> </body> </html> ``` CSS 代码： ``` .navbar { background-color: #333; overflow: hidden; } .navbar a { float: left; color: white; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navbar a:hover { background-color: #ddd; color: black; } button { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #3e8e41; } ``` 这段代码将创建一个黑色导航栏和一个绿色按钮。您可以根据自己的需要进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值