常用前端代码整理

Grid布局实现每行显示10个标签的CSS代码示例

<style>
    .container-div {
        display: grid;
        grid-template-columns: repeat(10, minmax(min-content, max-content)); /* 严格设置为10列 */
        grid-gap: 5px; /* 设置网格项之间的间距 */
    }
</style>

<div class="container-div">
    <label>样例标签</label><label>样例标签</label><label>样例标签</label><label>样例标签</label><label>样例标签</label><label>样例标签</label>
    <label>样例标签</label><label>样例标签</label><label>样例标签</label><label>样例标签</label><label>样例标签</label><label>样例标签</label>
    <label>样例标签</label><label>样例标签</label><label>样例标签</label><label>样例标签</label><label>样例标签</label><label>样例标签</label>
    <label>样例标签</label><label>样例标签</label><label>样例标签</label><label>样例标签</label><label>样例标签</label><label>样例标签</label>
<</div>

title属性内容换行处理

title="
"
data-original-title="<br>" data-html="true"

layer.prompt设置下拉框样式数据

layer.prompt({title: '请选择设置数据', formType: 1,content: '<select class="layui-layer-input"><option value="">请选择</option></select>'}, function(pass, index){
    layer.close(index);
    console.log(pass);
});

页面指定utf-8编码的两种方法

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
header("Content-type:text/html; charset=utf-8");

js获取当前页面的url

var getParms = window.location.search.substr(1);

input不显示历史记录设置

增加参数
autocomplete="off"

table边框样式

<table border="1" cellspacing="0" cellpadding="5" bordercolor="purple" style="border-collapse:collapse;" >
</table>

页面单独设置favicon.ico图标

<link rel="icon" href="../img/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon" /><!-- 必须 -->

移动设备屏幕适应meta标签

<meta name="viewport" content="width=device-width, initial-scale=1">

html网页来源referer设置

禁止页面使用referer
<meta content="never" name="referrer">
强制使用referer
<meta content="always" name="referrer">

CSS表单增加必填样式星号

.form-group.required > label:before {
    content: "*";
    color: #ed5565;
    margin-right: 5px;
}

layer子iframe弹框关闭并刷新父页面

var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
parent.layer.load(1,{shade:[0.3]});
parent.location.reload();

js动态加载引入js文件

var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js";
oHead.appendChild( oScript);
$(".article-featured-image").hide();