常用代码初始化模板
HTML初始化
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>标题</title>
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="css/weui.min.css" />
<script src="js/weui.min.js"></script>
</head>
<body>
<p>主体内容</p>
</body>
</html>
CSS初始化
/*@font-face {
font-family: 'INTER';
src: url('../font/INTERSTATECOND.eot');
src:
url('../font/INTERSTATECOND.eot?#font-spider') format('embedded-opentype'),
url('../font/INTERSTATECOND.woff') format('woff'),
url('../font/INTERSTATECOND.ttf') format('truetype'),
url('../font/INTERSTATECOND.svg') format('svg');
font-weight: normal;
font-style: normal;
}*/
@charset "utf-8";
/* 初始化CSS */
blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) }
li { list-style: none }
fieldset,img { display: inline-block; vertical-align: middle; border: none }
h1, h2, h3, h4, h5, h6 { font-weight: 400 }
h4, h5, h6 { font-size: 100% }
button, input, optgroup, option, select, textarea { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0; vertical-align: middle }
pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word }
table { border-collapse: collapse; border-spacing: 0 }
body { line-height: 24px; font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif }
hr { height: 1px; margin: 10px 0; border: 0; clear: both }
a { color: inherit; text-decoration: none; }
a:active, a:hover { outline: 0 }
a:hover { color: #777 }
.clearfix:after { display: block; visibility: hidden; clear: both; height: 0; content: ""; }
.clearfix { zoom: 1; }
.fl { float: left; }
.fr { float: right; }
/*对图片适应的处理*/
.img-fill { object-fit: fill; }
.img-contain { object-fit: contain; }
.img-cover { object-fit: cover; }
.img-none { object-fit: none; }
.img-scale-down { object-fit: scale-down; }
/*小号文字 scale以12号字体为基准 需写实际字号大小*/
.font_adjust { -webkit-text-size-adjust: none; }
.font_scale8 { -webkit-transform: scale(0.66); }
.font_scale10 { -webkit-transform: scale(0.83); }
.font_lc { -webkit-transform-origin: left center; }
.font_rc { -webkit-transform-origin: right center; }
.font_up { text-transform: uppercase; }
/*transition*/
.tranimg200 img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; }
.tranimg300 img { -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear; }
.tranimg400 img { -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; transition: all 0.4s linear; }
.tranimg500 img { -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; transition: all 0.5s linear; }
.tranimg1000 img { -webkit-transition: all 1s linear; -moz-transition: all 1s linear; transition: all 1s linear; }
.scaleimg img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); }
/*网页限定宽度*/
.con_1000 { position: relative; margin: 0 auto; width: 1000px; }
.con_1000:after { content: ""; display: block; height: 0; clear: both; }
AJAX请求模板
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>jq接口测试</title>
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.ajax({
url: "/index.php/index-getComment.html",
type: "post",
data: {
tid: 2,
pageindex: pageindex,
pagesize: pagesize,
order: "desc"
},
success: function(data) {
console.log(data)
},
error: function(error){
console.log(error)
},
complete: function(XMLHttpRequest, textStatus) {
}
});
</script>
</body>
</html>
<form id="form" action="" method="post">
<div class="weui-cells__title">用户名</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<input class="weui-input" name="username" type="text" placeholder="请输入文本" emptyTips="请输入文本" value="murphy" required />
</div>
</div>
</div>
<div class="weui-cells__title">密码</div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<input class="weui-input" name="password" type="text" placeholder="请输入文本" emptyTips="请输入密码" notMatchTips="您输入的密码格式不对" value="" required pattern="REG_PASSWORD" />
</div>
</div>
</div>
<div class="weui-btn-area">
<a class="weui-btn weui-btn_primary" href="javascript:formSubmit();">确定</a>
</div>
</form>
<script type="text/javascript">
function formSubmit() {
weui.form.validate('#form', function(error) {
if (!error) {
var loading = weui.loading('提交中...');
let formArray = $("#form").serializeArray();
let formObj = {};
for (var i = 0; i < formArray.length; i++) {
formObj[formArray[i].name] = formArray[i].value;
}
setTimeout(function() {
loading.hide();
weui.toast('提交成功', 3000);
}, 1500);
}
}, {
regexp: {
PASSWORD: /^.{6,18}$/
}
});
}
</script>
sass初始化模板
@charset "utf-8";
$design-draft-size: 750px !default;
@function pxTorem($px) {
@return $px / $design-draft-size * 10rem;
}
/* Reset CSS */
* {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: bold;
}
fieldset, img {
border: none;
vertical-align: middle;
}
address, caption, cite, code, dfn, th, var {
font-style: normal;
font-weight: normal;
}
ul, ol {
list-style: none;
}
li {
list-style-type: none;
}
input {
padding-top: 0;
padding-bottom: 0;
font-family: "Microsoft Yahei", "SimSun", Arial, sans-serif;
}
select, input {
vertical-align: middle;
}
select, input, textarea {
margin: 0;
font-size: 12px;
}
input[type="text"], input[type="search"], input[type="password"], textarea {
outline-style: none;
}
input[type="submit"] {
cursor: pointer;
}
textarea {
font-family: "Microsoft Yahei", "SimSun", Arial, sans-serif;
resize: none;
}
body {
font: 12px "Microsoft Yahei", "SimSun", Arial, sans-serif;
color: #333;
background: #fff;
}
a {
text-decoration: none;
color: inherit;
}
i, em {
font-style: normal;
}
.clearfix {
zoom: 1;
&:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: "";
}
}
.fl {
float: left;
}
.fr {
float: right;
}
.auto {
margin-left: auto;
margin-right: auto;
}
.TXTovehid {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
&.flexColumn {
flex-direction: column
}
.flex-item {
white-space: nowrap;
}
.flex-grow {
flex-grow: 1;
}
}