企业网站推广总结,wordpress收费内容,烟台龙口网站建设,小程序企业网站Html 一、常用样式1.设置滚动条2.设置省略号3.设置高度自适应4.高度算法5.按钮样式6.按钮颜色 二、DIV1.并排显示 三、Input1.漂浮显示 一、常用样式
1.设置滚动条
html
!--滚动条--overflow: auto; // x 和 yoverflow-x: auto; // xoverflow-y: auto; // y
… Html 一、常用样式1.设置滚动条2.设置省略号3.设置高度自适应4.高度算法5.按钮样式6.按钮颜色 二、DIV1.并排显示 三、Input1.漂浮显示 一、常用样式
1.设置滚动条
html
!--滚动条--overflow: auto; // x 和 yoverflow-x: auto; // xoverflow-y: auto; // y
/html2.设置省略号
html
!--省略号--text-overflow: ellipsis;
white-space: nowrap;/html3.设置高度自适应
html
!--高度自适应--height: auto; white-space:normal; word-break:break-all;overflow:hidden;/html
4.高度算法
html
!--高度算法--采用算法加减补齐height100%height: calc(100vh - 55px)styleheight: calc(100% - 35px);overflow: auto;/html5.按钮样式
html
!--按钮样式--1、下载el-button circle title下载模板 clickdownloadExceli classfa fa-download aria-hiddentrue//el-button2、上传el-button circle title导入 clickimportDatai classfa fa-upload/i/el-button3、新增/添加设备/添加物资el-button circle title新增 clickonCommentAdd(commentForm)i classfa fa-plus aria-hiddentrue//el-button4、修改el-button circle title修改 clickupdateStock()i classfa fa-pencil/i/el-button5、删除el-button circle title删除 clickdeleteStock()i classfa fa-trash/i/el-button6、保存el-button circle title保存 clicksaveStock(form)i classfa fa-file-text-o/i/el-button7、返回el-button circle title返回 clickonCanceli classel-icon-back aria-hiddentrue//el-button8、取消el-button circle title取消 clickonCanceli classfa fa-times/i/el-button9、打印el-button circle title打印 clickprinti classfa fa-print /i/el-button10、审核/提交el-button circle title审核 clickcheckStock()i classfa fa-check/i/el-button*************************************************************************
弹窗浓厚el-button typesuccess sizemini clickloadi classel-icon-search查询/i/el-buttonel-button typewarning clickresetSearchi classel-icon-refresh重置/i/el-buttondiv slotfooter classdialog-footer styletext-align: right;margin-top: 38px;margin-right: 5px;el-button clickcancelMaterial取 消/el-buttonel-button typeprimary clickgetAllMaterial确 定/el-button/div清淡el-button plain typeprimary clickfetchDatai classel-icon-search搜索/i/el-buttonel-button plain typewarning clickresetSearchi classel-icon-refresh重置/i/el-buttondiv slotfooter classdialog-footer styletext-align: right;margin-top: 5px;margin-right: 5px;el-button plain sizemini clickcancelMaterial取 消/el-buttonel-button plain sizemini typeprimary clickgetAllMaterial确 定/el-button/div/html
6.按钮颜色
html
!--按钮颜色--input typebutton value添加 classbtn btn-success clickadd按钮对应的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-block2设置float浮动3设置position定位dao属性为absolute以下为三种方式的具体实现代码1、设置每个div的展现属性为行内样式示例代码为div classappdiv styledisplay:inline-block;background:#f00;div1/divdiv styledisplay:inline-block;background:#0f0;margin-left:10px;div2/div/div2、设置float浮动示例代码为div classappdiv stylefloat:left;background:#f00;div1/divdiv stylefloat:left;background:#0f0;margin-left:10px;div2/div/div3、设置position定位属性为absolute, 示例代码为div classappdiv styleposition: absolute;width:100px;background:#f00;div1/divdiv styleposition: absolute;left:100px;background:#0f0;margin-left:10px;div2/div/div扩展资料css清除浮动方法1添加新的元素 、应用 clearboth.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!-- title --input onmouseoverthis.titlethis.value/ 如果input里面的内容固定,或者悬浮显示div里面的文字,需要悬浮显示,可以直接写为input title这个是悬浮显示的文字/ ,div title这个是悬浮显示的文字/divvue中悬浮的内容是变化的可以用 : 绑定数据el-input :titleitem.value v-modelitem.value :disableddisabledYanqi/el-input
/html
