logo

CSS

浏览器默认样式统一,基础样式,网格,表格、表单、按钮及常用组件样式。

目录

Cell


cell样式组件,使用 flex 实现,只兼容 IE 10+ 及其他现代浏览器

基本样式

.cell内包含.cell-hd(标题)和.cell-bd(内容)两部分。

.cell-bd中使用列表.list-box .list-item。列表样式请见zujian-list.shtml 部分。

表单

验证图片
标题文字

上传

图片上传
0/2
  • 图片
  • 图片
  • 图片
  • 图片
    50%

文本域

0/200

选择

选择

<div class="cell">
    <h3 class="cell-hd">表单</h3>
    <div class="cell-bd">
        <div class="list-box">
            <div class="list-item">
                <dl>
                    <dt>
                        <label>qq</label>
                    </dt>
                    <dd>
                        <input type="number" id="qqNumber" name="qqNumber" pattern="[0-9]*" placeholder="请输入qq号" class="cell-input" />
                    </dd>
                </dl>
            </div>
            <div class="list-item">
                <dl>
                    <dt>
                        <label>验证码</label>
                    </dt>
                    <dd>
                        <input type="text" pattern="[0-9]*" placeholder="请输入验证码" class="cell-input" />
                    </dd>
                    <dd>
                                        验证图片
                        <img src="" alt="">
                    </dd>
                </dl>
            </div>
            <div class="list-item">
                <dl>
                    <dt>
                        <label>选择日期</label>
                    </dt>
                    <dd>
                        <input id="date" type="text" placeholder="请选择日期" class="cell-input" />
                    </dd>
                </dl>
            </div>
            <div class="list-item">
                <dl>
                    <dt>
                        <label>选择时间</label>
                    </dt>
                    <dd>
                        <input id="datetime" type="text" placeholder="请选择时间" class="cell-input" />
                    </dd>
               </dl>
            </div>
        </div>
        <div class="list-box">
            <div class="list-item">
                <dl>
                    <dt class="cell-check-title">
                        <span>标题文字</span>
                    </dt>
                    <dd>
                        <div class="cell-checkbox">                                    
                            <label>
                                <input type="checkbox" value="" class="check-switch-input" checked />
                                <div class="check-switch-btn"></div>
                            </label>
                        </div>
                    </dd>
                 </dl>
             </div>
        </div>
     </div>
</div>
<div class="cell">
    <h3 class="cell-hd">上传</h3>
    <div class="cell-bd">
        <div class="list-box">
            <div class="list-item">
                <dl>
                    <dt>图片上传</dt>
                    <dd class="text-right text-assistant">0/2</dd>
                </dl>
                <div class="cell-uploader-bd">
                    <ul class="cell-uploader-files">
                        <li class="cell-uploader-file">图片</li>
                        <li class="cell-uploader-file">图片</li>
                        <li class="cell-uploader-file cell-uploader-status">
                               图片
                            <div class="cell-uploader-status-content">
                                <span class="icon-danger">
                                    <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
                                </span>
                            </div>
                        </li>
                        <li class="cell-uploader-file cell-uploader-status">
                                 图片
                             <div class="cell-uploader-status-content">
                                50%
                             </div>
                         </li>
                         <li class="cell-uploader-file add-file">
                            <input type="file" class="cell-uploader-input" />
                         </li>
                     </ul>
                 </div>
            </div>
        </div>
    </div>
</div>
<div class="cell">
    <h3 class="cell-hd">文本域</h3>
    <div class="cell-bd">
        <div class="list-box">
            <div class="list-item">
                <div class="textarea-box">
                    <textarea class="textarea" placeholder="请输入评论" rows="3"></textarea>
                    <div class="text-assistant text-right">0/200</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="cell">
    <h3 class="cell-hd">选择</h3>
    <div class="cell-bd">
        <div class="list-box">
            <div class="list-item cell-select">
                <dl>
                    <dt class="cell-select-hd border-default border-right">
                        <select>
                            <option value="1">+86</option>
                            <option value="2">+80</option>
                            <option value="3">+84</option>
                            <option value="4">+87</option>
                        </select>
                        <i class="fc fc-direction-right"></i>
                    </dt>
                    <dd class="cell-select-bd">
                        <input type="number" pattern="[0-9]*" placeholder="请输入号码" />
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</div>
<div class="cell">
    <h3 class="cell-hd">选择</h3>
    <div class="cell-bd">
        <div class="list-box">
            <div class="list-item cell-select">
                <div class="cell-select-bd">
                    <select>
                        <option value="1">微信号</option>
                        <option value="2">qq号</option>
                        <option value="3">Email</option>
                    </select>
                    <i class="fc fc-direction-right"></i>
                </div>
            </div>
            <div class="list-item cell-select">
                <dl>
                    <dt class="cell-select-hd">
                        <label>国家/地区</label>
                    </dt>
                    <dd class="cell-select-bd">
                        <select>
                            <option value="1">中国</option>
                            <option value="2">美国</option>
                            <option value="3">英国</option>
                        </select>
                        <i class="fc fc-direction-right"></i>
                   </dd>
               </dl>
          </div>
     </div>
 </div>
</div>          
<div class="btnContainer">
    <button class="btn btn-bg-primary btn-left-right-spacing">提交</button>
</div>                
        
侧栏导航