Amaze UI 编写规范

最新推荐文章于 2021-09-16 21:26:03 发布
最新推荐文章于 2021-09-16 21:26:03 发布
阅读量166 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YangtzeX/article/details/92795181
版权

HTML/CSS 规范

  1. 通用规则:
    1.1 编写规则
    1.1.1 省略外链资源 URL 协议部分
    省略外链资源(图片及其它媒体资源)url中的 http / https 协议,是URL 成为相对地址,避免混合内容问题,减 少文件字节数
    ** 其他协议(ftp等)的url不省略 **
  2. css编写顺序
    2.1 positioning 定位
    2.2 box model 盒模型(display,float,宽高)
    2.3 typographic 印刷(字体颜色,尺寸,行高,对齐方式等)
    2.4 visual 视觉(背景颜色,边框等)
    2.5 misc 杂项(透明度等)
YangtzeX
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UI设计规范
刘玉杰 点滴之笔
08-30 1751
近一段时间一直在做UI设计这块的东西，让我又重新对UI和用户的体验有了新的认识，现在结合查询的资料和自己感受总结一下！ 1:易用性：          按钮名称应该易懂，用词准确，摒弃模棱两可的字眼，要与同一界面上的其他按钮易于区分，能望文知义最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。 易用性细则： 1)：完成相同或相近功能的按钮用Frame框括起来，常
前端开发规范
shaleilei的博客
08-09 1392
前端开发规范 备注：实际开发请以本公司的规范为标准。 一.普通规范 二.HTML\CSS规范 三.Javascript规范 四.UI框架及css预处理器规范 五.脚手架、插件选择规范 普通规范 基本原则： 结构、样式、行为分离 缩进（建议IDEA格式化） 文件编码（统一 UTF-8 ) <meta charset="utf-8"> 一律使用小写字母 <!-- one ...
WEB前端开发规范
kylvia的专栏
03-07 669
1. 基本原则1.1 结构、样式、行为分离尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。1.2 缩进统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。1.3 文件编码使用不带 BOM 的 UTF-8 编码。 在 HTML中指定编码 <meta charset="utf-8"> ； 无需使用 @charset 指定样式表的编码，它默认为
amaze ui 的使用
要努力成为很厉害很厉害的人哦
07-13 1万+
今天老师给我讲解了amaze ui的使用，在此与大家分享我的学习笔记。amaze ui的官网虽然已经提供了具体的实现步骤，但是对于没有前台开发经验的我，理解起来还是很有困难的。 引言    一个前台页面的开发一般需要html、css、javascript三种技术的支持，amazui ui对一些css、js进行了封装，是其可供用户直接调用。 使用方法     amaze ui的使用通常有两种
AmazeUI 流动侦测导航
08-12
AmazeUI是一款基于移动优先（Mobile First）理念的前端开发框架，它专为构建响应式、跨屏的网站而设计。流动侦测导航是AmazeUI中的一个重要特性，旨在提供流畅且适应各种屏幕尺寸的导航体验。在网页设计中，导航菜单...
AmazeUI模板
01-08
关于这个“AmazeUI模板”，它包含了一系列预设的页面布局，例如首页、列表页、详情页、表单页等，这些页面已经按照AmazeUI的规范设计完成，可以直接作为项目的基础框架。在使用时，你可以根据自己的业务需求，对页面...
AmazeUI 面板的实现示例
11-19
为了更规范地编写HTML5，AmazeUI 提供了使用 `<section>` 和 `<header>` 标签的另一种方式来实现带标题的面板： ```html 面板标题 面板内容 ``` 这里的 `<h3 class="am-panel-title">` 使标题更具语义化。...
AmazeUI 表单验证
08-12
AmazeUI 表单验证是前端开发中一个重要的组成部分，主要用于确保用户在填写表单时输入的数据符合预设的规则，提高数据的准确性和安全性。AmazeUI 是一个基于 HTML5/CSS3 的轻量级、移动优先的前端框架，它提供了一套...
基于Amazeui的仿pc端微信界面
06-01
在仿制微信界面时，开发者会根据微信的视觉样式编写CSS规则，使界面尽可能接近原版。 总结来说，这个项目展示了如何使用AmazeUI来创建一个类似PC版微信的界面，涉及到的知识点包括AmazeUI框架的使用、HTML和CSS布局...
AmazeUI基本样式
weixin_33754913的博客
10-26 822
2019独角兽企业重金招聘Python工程师标准>>> ...
编码规范
ReZero's Blog
11-26 1162
基本原则 结构、样式、行为分离 统一缩进(建议 两个空格) 文件编码统一 不带BOM的UTF-8 一律使用小写字母 省略外链资源 URL 协议部分(FTP等其他URL不省略) 统一注释 HTML 标签 自闭合无需闭合img input br hr 等 可选闭合需闭合
2020-12-08
XLL20001022的博客
12-08 289
前端开发规范梳理(全面记录) 注：分享出来跟大家交流，也希望能在留言区探讨，得以改进。 为实现代码一致性和最佳实践，通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。 一、通用书写规范 1. 基本原则：结构、样式、行为分离 尽量确保文档和模板只包含 HTML 结构，样式都放到 css 样式表里，行为都放到 js 脚本里 标记应该是结构良好、语义正确。 Javascript应该起到渐进式增强用户体验的作用 。 2.文件
微信小程序请求数据的方法(wx.request)
热门推荐
YangtzeX的博客
09-10 1万+
一. 请求之前的准备工作 1. 在pages的根目录下创建js文档 1.1 在js文档中创建公共配置文件(config.js) 1.1.1 在config.js中抽出公共域名 1.1.2 在app.js中引入config.就是文件 ####### 1.1.3 在请求数据的js文件中定义 2.请求的数据是一个对象 2.1 先获取接口(可直接获取接口数据) /** 在请求数据的js文件中(eg:...
小程序获取服务器域名流程
YangtzeX的博客
09-05 2537
1. 登录微信公众号账号 2. 在人员设置出添加运营者管理 3. 再登录小程序账号 4.在小程序中的成员管理中添加项目成员 5.添加成功后在开发设置中添加服务器域名 ...
vue登录功能
YangtzeX的博客
06-22 2147
服务器端 文件(app.js) 基本配置 引入需要的模块 eg: const mysql = require(“mysql”); const express = require(“express”) const cors = require(“cors”) //解决跨域问题 创建连接池:提高效率 var pool = mysql.createPool ({ host: ‘127.0.0.1...
微信小程序使用wx.chooseLocation返回的数据没有省份的处理方法
YangtzeX的博客
09-16 2047
微信小程序使用wx.chooseLocation返回的数据没有省份的处理方法 遇到的问题: 使用wx.chooseLocation获取地址,当输入地址时,有时候第一个搜索结果没有省市区信息,选择第一个时报错;错误信息如下 解决方案: 当选择没有返回省份的地址时,根据返回的经纬度去获取地址,将获取的地址再次执行一次,就能成功拿到或者切换地址了 源代码(报错的代码) function chooseLocation(){ wx.chooseLocation({ succ
AmazeUI 弹出窗
最新发布
05-26
你可以使用 AmazeUI 中的 Modal 组件来实现弹出窗口。具体步骤如下： 1. 引入 AmazeUI 样式和 JavaScript 文件： ```html <link rel="stylesheet" href="//cdn.amazeui.org/amazeui/2.7.2/css/amazeui.min.css"> <script src="//cdn.amazeui.org/amazeui/2.7.2/js/amazeui.min.js"></script> ``` 2. 在页面中添加一个 Modal： ```html <div class="am-modal am-modal-alert" tabindex="-1" id="my-modal"> <div class="am-modal-dialog"> <div class="am-modal-hd">Modal 标题</div> <div class="am-modal-bd">Modal 内容</div> <div class="am-modal-footer"> <span class="am-modal-btn">确定</span> </div> </div> </div> ``` 3. 使用 JavaScript 控制 Modal 的显示与隐藏： ```javascript // 显示 Modal $('#my-modal').modal('open'); // 隐藏 Modal $('#my-modal').modal('close'); ``` 你可以根据需要自定义 Modal 的样式和内容。更多详细信息请参考 AmazeUI 官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值