002-Html - 技术栈

Html

一、常用样式
- - - - 1.设置滚动条
        
        2.设置省略号
        
        3.设置高度自适应
        
        4.高度算法
        
        5.按钮样式
        
        6.按钮颜色
二、DIV
- - - - 1.并排显示
三、Input
- - - - 1.漂浮显示

一、常用样式

1.设置滚动条

html 复制代码

<html>
<!--滚动条-->

overflow: auto; // x 和 y

overflow-x: auto; // x

overflow-y: auto; // y
</html>

2.设置省略号

html 复制代码

<html>
<!--省略号-->

text-overflow: ellipsis;
white-space: nowrap;

</html>

3.设置高度自适应

html 复制代码

<html>
<!--高度自适应-->

height: auto;	

white-space:normal; word-break:break-all;overflow:hidden;

</html>

4.高度算法

html 复制代码

<html>
<!--高度算法-->

采用算法，加减补齐
	
	height=100%
	
	height: calc(100vh - 55px)
	
	style="height: calc(100% - 35px);"
	
	overflow: auto;
	
</html>

5.按钮样式

html 复制代码

<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 复制代码

<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>
在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 复制代码

<html>
    <!-- title -->
    
    <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>