梅竹生辉

用户工具

站点工具

您的足迹: • init

侧边栏

Wechat

框架知识

JS常用效果

工具

个人相关资料

ThinkPHP

init

常用代码初始化模板

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表单提交

<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;
    }
}
init.txt · 最后更改: 2021/12/23 17:19 (外部编辑)

页面工具

除额外注明的地方外，本维基上的内容按下列许可协议发布： CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki