Html
- 一、常用样式
- 1.设置滚动条
- 2.设置省略号
- 3.设置高度自适应
- 4.高度算法
- 5.按钮样式
- 6.按钮颜色
- 二、DIV
-
- 三、Input
-
一、常用样式
1.设置滚动条
<html>
overflow: auto; // x 和 yoverflow-x: auto; // xoverflow-y: auto; // y
</html>
2.设置省略号
<html>
text-overflow: ellipsis;
white-space: nowrap;</html>
3.设置高度自适应
<html>
height: auto; white-space:normal; word-break:break-all;overflow:hidden;</html>
4.高度算法
<html>
采用算法，加减补齐height=100%height: calc(100vh - 55px)style="height: calc(100% - 35px);"overflow: auto;</html>
5.按钮样式
<html>
1、下载<el-button circle title="下载模板" @click="downloadExcel"><i class="fa fa-download" aria-hidden="true"/></el-button>2、上传<el-button circle title="导入" @click="importData"><i class="fa fa-upload"></i></el-button>3、新增/添加设备/添加物资<el-button circle title="新增" @click="onCommentAdd('commentForm')"><i class="fa fa-plus" aria-hidden="true"/></el-button>4、修改<el-button circle title="修改" @click="updateStock()"><i class="fa fa-pencil"></i></el-button>5、删除<el-button circle title="删除" @click="deleteStock()"><i class="fa fa-trash"></i></el-button>6、保存<el-button circle title="保存" @click="saveStock('form')"><i class="fa fa-file-text-o"></i></el-button>7、返回<el-button circle title="返回" @click="onCancel"><i class="el-icon-back" aria-hidden="true"/></el-button>8、取消<el-button circle title="取消" @click="onCancel"><i class="fa fa-times"></i></el-button>9、打印<el-button circle title="打印" @click="print"><i class="fa fa-print"> </i></el-button>10、审核/提交<el-button circle title="审核" @click="checkStock()"><i class="fa fa-check"></i></el-button>*************************************************************************
弹窗：浓厚：<el-button type="success" size="mini" @click="load"><i class="el-icon-search">查询</i></el-button><el-button type="warning" @click="resetSearch"><i class="el-icon-refresh">重置</i></el-button><div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 38px;margin-right: 5px;"><el-button @click="cancelMaterial">取 消</el-button><el-button type="primary" @click="getAllMaterial">确 定</el-button></div>清淡：<el-button plain type="primary" @click="fetchData"><i class="el-icon-search">搜索</i></el-button><el-button plain type="warning" @click="resetSearch"><i class="el-icon-refresh">重置</i></el-button><div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 5px;margin-right: 5px;"><el-button plain size="mini" @click="cancelMaterial">取 消</el-button><el-button plain size="mini" type="primary" @click="getAllMaterial">确 定</el-button></div></html>
6.按钮颜色
<html>
<input type="button" value="添加" class="btn btn-success" @click="add">按钮对应的class为：
灰白色：btn
浅蓝色：btn btn-primary
天蓝色：btn btn-info
深绿色：btn btn-success
菊黄色：btn btn-warning
深红色：btn btn-danger
黑 色：btn btn-inverse</html>
二、DIV
1.并排显示
<html>
在HTML中让两个div并排显示bai，通常情况下有三种实现方式，du包括:（1）设置为行内样式，display:inline-block（2）设置float浮动（3）设置position定位dao属性为absolute以下为三种方式的具体实现代码：1、设置每个div的展现属性为行内样式，示例代码为：<div class="app"><div style="display:inline-block;background:#f00;">div1</div><div style="display:inline-block;background:#0f0;margin-left:10px;">div2</div></div>2、设置float浮动，示例代码为：<div class="app"><div style="float:left;background:#f00;">div1</div><div style="float:left;background:#0f0;margin-left:10px;">div2</div></div>3、设置position定位属性为absolute, 示例代码为：<div class="app"><div style="position: absolute;width:100px;background:#f00;">div1</div><div style="position: absolute;left:100px;background:#0f0;margin-left:10px;">div2</div></div>扩展资料：css清除浮动方法（1）添加新的元素 、应用 clear：both.clear {clear: both; height: 0;
height: 0;overflow: hidden;
}（2）父级div定义 overflow: auto.over-flow {overflow: auto;
zoom: 1; //处理兼容性问题}（3）伪类 :after 方法 outer是父div的样式.outer { zoom:1; } /*==for IE6/7 Maxthon2==*/.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden; }
</html>
三、Input
1.漂浮显示
<html><input onmouseover="this.title=this.value"/> 如果input里面的内容固定,或者悬浮显示div里面的文字,需要悬浮显示,可以直接写为<input title="这个是悬浮显示的文字"/> ,<div title="这个是悬浮显示的文字"></div>vue中悬浮的内容是变化的，可以用 : 绑定数据<el-input :title="item.value" v-model="item.value" :disabled="disabledYanqi"></el-input>
</html>
