HTML ／ CSS 编码技巧¶
项
本章将介绍 HTML/CSS 的编码技巧。
横向排列数据块元素、横向排列 div¶
处理方法¶
请在上级元素中指定 clearfix 类，在子元素中指定 float 用的类。
<div class="imui-box-operation cf （１）">
<div class="float-L （２）pl-10 （３）">
<imart type="imuiTextbox"/>
<imart type="imuiButton" value="检索"/>
<imart type="imuiButton" value="清空"/>
</div>
</div>
- 页面图像
| （１） | cf | clearfix 类 | 各浏览器显示的数据块元素不发生混乱 |
| （２） | float-L | float 用类 | 写入 float:left 。配置在右侧时，应指定 float-R 类 |
| （３） | pl-10 | assist 类 | 写入 padding-left:10px |
编写 HTML 代码时，第1个子元素中写入 float: left 后，clear 之前的部分都会继承。但在页面开发过程中，请在每个子元素中都进行写入。 （pl-10 处理不正确。 div 被处理为 100% ）
希望将文字链接设置为蓝色／黑色¶
希望在 UI 组件或 CSS Box Item中配置标题栏/工具栏¶
希望在操作箱中配置标题栏／工具栏¶
处理方法¶
源代码¶
<div class="imui-box-toolbox （１） mt-20">
<div class="imui-box-title （２） imui-box-toolbox-look （３）">
<h3>这是 H3</h3>
</div>
<div class="imui-toolbar-wrap">
<div class="imui-box-toolbar-inner">
<ul class="imui-list-box-toolbar">
（中间省略）
</ul>
</div>
</div>
<div class="imui-box-toolbox-content">
<!-- 简单检索 -->
<imart type="imuiTextbox" class="wd-225px" placeholder="请输入用户姓名、读音。" autofocus></imart>
<imart type="imuiButton" value="检索" class="imui-button"></imart>
<imart type="imuiButton" value="清空" class="imui-button"></imart>
</div>
</div>
- 页面图像
※添加样式
工具箱（与 imui-box-operation 相同的框线）
imui-box-toolbox
标题栏（h2, h3 的外观相同。使用 imui-chapter-title.h2 时，使用 imui-box-title.h3 ）
imui-box-title, imui-box-title.h2, imui-box-title.h3
标题栏／工具栏上方圆角效果（与（１）相匹配）
imui-box-toolbox-look
内容
imui-box-toolbox-content
工具栏
imui-toolbar-wrap, imui-box-toolbar-inner, imui-list-box-toolbar
实现示例¶
希望将 left-border 设置为 100px 实线¶
（１）CSS（请务必输入 width 及 style ）¶
.new_class {
border-left-width: 100px;
border-left-style: solid;
...
}
参考信息¶
/* border of theme color */
.theme-border-color(@top-color: desaturate(@theme-color, 10%), @right-color:desaturate(@theme-color, 10%), @bottom-color: desaturate(@theme-color, 10%), @left-color:desaturate(@theme-color, 10%)) {
border-top-color: @top-color;
border-right-color: @right-color;
border-bottom-color: @bottom-color;
border-left-color: @left-color;
}
希望在页面上追加说明文句。¶
- 说明文句的 class 与图标
- 使用 imui-box-supplementation 包围说明文句。
- 根据文句内容，在说明文句前配置适当的图标。
图标 说明 im-ui-icon-common-24-information 信息、项目说明／等 im-ui-icon-common-24-confirmation 确认／正常／成功／成功信息等 im-ui-icon-common-24-question 确认消息等 im-ui-icon-common-24-warning 警告消息等 im-ui-icon-common-24-error 错误消息等
