ECJiaWiki:ECJia到家H5 CSS解析

来自ECJiaWiki
跳转至: 导航搜索

顶条样式

全局顶条样式:ecjia-header(不可更改,可在控制器中配置)

按钮

  1. class 类 btn
  2. 小按钮 btn-small
  3. 两栏按钮 two-btn
  4. 无边距按钮 btn-nomargin
  5. 空心按钮 btn-hollow

普通按钮

  • 样式:

普通按钮

<button class="btn">button</button>

小按钮

  • 样式:

小按钮

 <button class="btn btn-small">button1</button>

两栏按钮

  • 样式:

两栏按钮

<div class="two-btn">
    <button class="btn">button1</button>
    <button class="btn">button2</button>
</div>

无边距按钮

  • 样式:

无边距按钮

 <button class="btn btn-nomargin">button2</button>

空心按钮

  • 样式:

无边距按钮

 <button class="btn btn-hollow">button2</button>

表单

表单的class为 ecjia-from,表单共分为图标表单和文字表单,具体使用方法如下

  1. 图标表单
  • 样式:

图标表单

<form class="ecjia-form" name="formLogin" action="" method="post">
    <div class="form-group">
        <label class="input">
            <i class="iconfont icon-dengluyonghuming"></i>
            <input placeholder="请输入用户名或手机号" name="username" datatype="s3-15|m|e" errormsg="用户名错误请重新输入!" autocomplete="off">
            <span class="Validform_checktip"></span>
        </label>
    </div>
    <div class="form-group">
        <label class="input">
            <i class="iconfont icon-lock "></i>
            <i class="iconfont icon-attention ecjia-login-margin-l"></i>
            <input placeholder="请输入密码" name="password" type="password" datatype="*6-16" errormsg="密码错误请重新输入!" autocomplete="off">
            <span class="Validform_checktip"></span>
        </label>
    </div>
    <div class="ecjia-margin-t ecjia-margin-b">
        <input type="submit" class="btn btn-info login-btn" value="登录">
    </div>
</form>

2. 文字表单

  • 样式:

文字表单

<form class="ecjia-form" action="" method="post">
    <div class="form-group form-group-text">
        <label class="input">
            <span>用户名: </span>
            <input placeholder="请输入用户名或手机号" name="username" datatype="s3-15|m|e" errormsg="用户名错误请重新输入!" autocomplete="off">
            <span class="Validform_checktip"></span>
        </label>
    </div>
    <div class="form-group form-group-text">
        <label class="input">
            <span>用户名: </span>
            <i class="iconfont icon-attention ecjia-login-margin-l"></i>
            <input placeholder="请输入密码" name="password" type="password" datatype="*6-16" errormsg="密码错误请重新输入!" autocomplete="off">
            <span class="Validform_checktip"></span>
        </label>
    </div>
    <div class="ecjia-margin-t ecjia-margin-b">
        <input type="submit" class="btn btn-info login-btn" value="登录">
    </div>
</form>

导航

  • class: ecjia-nav

导航一般与多栏列表一起共用一般与两栏列表共用比较多

  • 样式:

导航

<ul class="ecjia-list ecjia-list-two ecjia-nav">
    <li class=""><a class="nopjax" href="#one" role="tab" data-toggle="tab" aria-expanded="false">订单状态</a></li>
    <li class="active"><a class="nopjax" href="#two" role="tab" data-toggle="tab" aria-expanded="true">订单详情</a></li>
</ul>

列表

  1. 普通列表 : ecjia-list
  2. 会员中心列表 : list-short
  3. 一栏列表 : list-one
  4. 两栏列表 : ecjia-list-two
  5. 三栏列表 : ecjia-list-two
  6. 四栏列表 : ecjia-list-four

普通列表

  • 样式:

普通列表

<ul class="ecjia-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

会员中心列表

  • 样式:

会员中心列表

<ul class="ecjia-list list-short">
    <li>
        <i class="iconfont icon icon-kefu"></i>
        <span class="icon-name">帮助中心</span>
        <i class="iconfont  icon-jiantou-right"></i>
    </li>
    <li>
        <i class="iconfont icon icon-eclogo"></i>
        <span class="icon-name">公司介绍</span>
        <i class="iconfont  icon-jiantou-right"></i>
    </li>
    <li>
        <i class="iconfont icon icon-kefu"></i>
        <span class="icon-name">官网客服</span>
        <i class="iconfont  icon-jiantou-right"></i>
    </li>
    <li>
        <i class="iconfont icon icon-eclogo"></i>
        <span class="icon-name">官网网站</span>
        <i class="iconfont  icon-jiantou-right"></i>
    </li>
</ul>

一栏列表

此样式废弃 页面中无此样式(该样式用于商品大图列表样式)

两栏列表

  • 样式:该样式多用于两栏商品列表

两栏列表

<ul class="ecjia-margin-t ecjia-list ecjia-list-two">
    <li class="ecjia-margin-t">1</li>
    <li class="ecjia-margin-t">2</li>
    <li class="ecjia-margin-t">3</li>
    <li class="ecjia-margin-t">4</li>
</ul>

三栏列表

  • 样式:

三栏列表

<ul class="ecjia-margin-t ecjia-list ecjia-list-three">
    <li class="ecjia-margin-t">1</li>
    <li class="ecjia-margin-t">2</li>
    <li class="ecjia-margin-t">3</li>
    
</ul>

四栏列表

  • 样式:

四栏列表

<ul class="ecjia-margin-t ecjia-list ecjia-list-four">
    <li class="ecjia-margin-t">1</li>
    <li class="ecjia-margin-t">2</li>
    <li class="ecjia-margin-t">3</li>
    <li class="ecjia-margin-t">4</li>
</ul>

气泡

  • 样式: 详细请参考订单列表

气泡

<ul>
    <li class="goods-img ecjiaf-fl ecjia-margin-r  ecjia-icon">
        <img class="ecjiaf-fl" src="" alt="">
        <span class="ecjia-icon-num top">1</span>
    </li>
    <li class="goods-img ecjiaf-fl ecjia-margin-r  ecjia-icon">
        <img class="ecjiaf-fl" src="" alt="">
        <span class="ecjia-icon-num top">1</span>
    </li>
    <li class="goods-img ecjiaf-fl ecjia-margin-r  ecjia-icon">
        <img class="ecjiaf-fl" src="" alt="">
        <span class="ecjia-icon-num top">1</span>
    </li>
</ul>

标签

  • 样式:ecjia-tag ecjia-tag-l ecjia-tag-r //ecjia_city.css

标签

<span class="ecjia-tag">标签</span>
<span class="ecjia-tag ecjia-tag-l">标签左箭头</span>
<span class="ecjia-tag ecjia-tag-r">标签右箭头</span>

不换行文本样式

class类:ecjia-truncate2 、ecjia-truncate

  • 样式:

不换行文本

<ul class="ecjia-list">
    <li>
        <div class="ecjia-truncate2">
            华东师范大学华东师范大学华东师范大学华东师范大学华东师范大学华东师范大学学华东师范大学华东师范大学华东师范大学华东师范大学学华东师范大学华东师范大学华东师范大学华东师范大学学华东师范大
        </div>
    </li>
    <li>
        <div class="ecjia-truncate">
            华东师范大学华东师范大学华东师范大学华东师范大学华东师范大学
        </div>
    </li>
</ul>

辅助类css 样式

类名 属性值 作用
ecjiaf-dn display:none 隐藏元素
ecjiaf-db display:block 元素将显示为块级元素 或 显示隐藏的元素
ecjiaf-fl float:left 左浮动
ecjiaf-fr float:right 右浮动
ecjiaf-fn float:none 默认值。元素不浮动
ecjiaf-pr position:relative 相对定位
ecjiaf-prz position:relative;zoom:1
ecjiaf-fs1 font-size:12px 字体 12像素
ecjiaf-fs2 font-size:14px 字体 14像素
ecjiaf-fwn font-weight:normal 默认值。定义标准的字符
ecjiaf-fwb font-weight:bold 定义粗体字符。
ecjiaf-tal text-align:left 把文本排列到左边
ecjiaf-tac text-align:center 把文本排列到中间
ecjiaf-tar text-align:right 把文本排列到右边
ecjiaf-border border:none 无边框
ecjiaf-bt border-top:1px solid #dd 顶部边框
ecjiaf-csp cursor:pointer 光标呈现为一只手
ecjiaf-csd cursor:default 默认光标
ecjiaf-csh cursor:help 光标指示可用的帮助(通常是一个问号或一个气球)
ecjiaf-csm cursor:move 光标指示某对象可被移动
ecjia-margin-t margin-top: 1em 顶部外边距间距1em
ecjia-margin-b margin-bottom: 1em 底部外边距间距1em
ecjia-margin-l margin-left: 1em 左边外边距间距1em
ecjia-margin-r margin-right: 1em 右边外边距间距1em
ecjia-fz-big font-size: 1.2em 字体大小 1.2em
ecjia-fz-all font-size: 1em 字体大小 1em
ecjia-fz-small font-size: 0.8em 字体大小 0.8em