首页
ASCII
ASCII码相关
技术文档
首页
0318作业
发布于：
2022-04-12 10:39:24
栏目：
技术文档
作业内容：
1. 写一个登录表单,要求有邮箱,密码,登录按钮
+
" class="reference-link">2. 写一个简单后台架构: <a> + <iframe></h2><h2 id="h2-3-">3. 实例演示元素样式来源与优先级</h2><ul> <li><p>登录示例图 仿七牛云<img src="/d/file/p/2022/04-12/052da84b1b4719896a34e1e93e857eff.png" alt=""></p> </li><li><p>写一个简单后台架构示例图<img src="/d/file/p/2022/04-12/295efd908042ff0b14c18a23a407cb71.png" alt=""></p> </li></ul> <p>登录示例代码:</p> <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code class="lang-php"><!DOCTYPE html></code></li><li class="L1"><code class="lang-php"><html></code></li><li class="L2"><code class="lang-php"><head></code></li><li class="L3"><code class="lang-php"> <title>0318登录页面作业</title></code></li><li class="L4"><code class="lang-php"></code></li><li class="L5"><code class="lang-php"> <meta charset="utf-8"></code></li><li class="L6"><code class="lang-php"> <meta http-equiv="X-UA-Compatible" content="IE=edge"></code></li><li class="L7"><code class="lang-php"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /></code></li><li class="L8"><code class="lang-php"></code></li><li class="L9"><code class="lang-php"> <link rel="stylesheet" type="text/css" href="https://sso.qiniu.com/asserts/css/bootstrap.min.css"></code></li><li class="L0"><code class="lang-php"> <link rel="stylesheet" type="text/css" href="https://sso.qiniu.com/asserts/css/app.css?13"></code></li><li class="L1"><code class="lang-php"> <!-- 以下引用的是网站ico图标 --></code></li><li class="L2"><code class="lang-php"> <link rel="icon" type="image/x-icon" href="https://sso.qiniu.com/asserts/favicon.ico" /></code></li><li class="L3"><code class="lang-php"></head></code></li><li class="L4"><code class="lang-php"></code></li><li class="L5"><code class="lang-php"><body></code></li><li class="L6"><code class="lang-php"></code></li><li class="L7"><code class="lang-php"></code></li><li class="L8"><code class="lang-php"><header</code></li><li class="L9"><code class="lang-php"> class="navbar navbar-default navbar-static-top"</code></li><li class="L0"><code class="lang-php"> id="top"</code></li><li class="L1"><code class="lang-php">></code></li><li class="L2"><code class="lang-php"> <div class="container-fluid"></code></li><li class="L3"><code class="lang-php"> <div class="navbar-header"></code></li><li class="L4"><code class="lang-php"> <button</code></li><li class="L5"><code class="lang-php"> class="collapsed navbar-toggle"</code></li><li class="L6"><code class="lang-php"> aria-controls="bs-navbar"</code></li><li class="L7"><code class="lang-php"> aria-expanded="false"</code></li><li class="L8"><code class="lang-php"> data-target="#navbar"</code></li><li class="L9"><code class="lang-php"> data-toggle="collapse"</code></li><li class="L0"><code class="lang-php"> type="button"</code></li><li class="L1"><code class="lang-php"> ></code></li><li class="L2"><code class="lang-php"> <span class="sr-only">Toggle navigation</span></code></li><li class="L3"><code class="lang-php"> <span class="icon-bar"></span></code></li><li class="L4"><code class="lang-php"> <span class="icon-bar"></span></code></li><li class="L5"><code class="lang-php"> <span class="icon-bar"></span></code></li><li class="L6"><code class="lang-php"> </button></code></li><li class="L7"><code class="lang-php"> <a</code></li><li class="L8"><code class="lang-php"> class="navbar-brand"</code></li><li class="L9"><code class="lang-php"> href="../"</code></li><li class="L0"><code class="lang-php"> ></code></li><li class="L1"><code class="lang-php"> <div</code></li><li class="L2"><code class="lang-php"> class="brand"</code></li><li class="L3"><code class="lang-php"> title="七牛云"</code></li><li class="L4"><code class="lang-php"> ></div></code></li><li class="L5"><code class="lang-php"> </a></code></li><li class="L6"><code class="lang-php"> </div></code></li><li class="L7"><code class="lang-php"></code></li><li class="L8"><code class="lang-php"> <nav</code></li><li class="L9"><code class="lang-php"> class="collapse navbar-collapse"</code></li><li class="L0"><code class="lang-php"> id="navbar"</code></li><li class="L1"><code class="lang-php"> ></code></li><li class="L2"><code class="lang-php"> <ul class="nav navbar-nav navbar-right"></code></li><li class="L3"><code class="lang-php"> <li></code></li><li class="L4"><code class="lang-php"> <a</code></li><li class="L5"><code class="lang-php"> class="btn btn-primary btn-emphasis"</code></li><li class="L6"><code class="lang-php"> id="nav-signup-btn"</code></li><li class="L7"><code class="lang-php"> href="#"</code></li><li class="L8"><code class="lang-php"> ></code></li><li class="L9"><code class="lang-php"> 立即注册</code></li><li class="L0"><code class="lang-php"> </a></code></li><li class="L1"><code class="lang-php"> </li></code></li><li class="L2"><code class="lang-php"> </ul></code></li><li class="L3"><code class="lang-php"> </nav></code></li><li class="L4"><code class="lang-php"> </div></code></li><li class="L5"><code class="lang-php"></header></code></li><li class="L6"><code class="lang-php"></code></li><li class="L7"><code class="lang-php"><div id="feedback-entry"></div></code></li><li class="L8"><code class="lang-php"></code></li><li class="L9"><code class="lang-php"><div id="main"></code></li><li class="L0"><code class="lang-php"></code></li><li class="L1"><code class="lang-php"><div class="container"></code></li><li class="L2"><code class="lang-php"></code></li><li class="L3"><code class="lang-php"> <div class="login-container"></code></li><li class="L4"><code class="lang-php"> <div class="login-aside col-sm-6"></code></li><li class="L5"><code class="lang-php"> <a</code></li><li class="L6"><code class="lang-php"> class="login-aside-content"</code></li><li class="L7"><code class="lang-php"> style="background-image: url(https://img1.baidu.com/it/u=2774261946,3406162344&fm=253&fmt=auto&app=138&f=JPEG?w=954&h=500);"</code></li><li class="L8"><code class="lang-php"></code></li><li class="L9"><code class="lang-php"> ></a></code></li><li class="L0"><code class="lang-php"> </div></code></li><li class="L1"><code class="lang-php"></code></li><li class="L2"><code class="lang-php"> <div class="col-sm-6 login-main"></code></li><li class="L3"><code class="lang-php"> <div class="form"></code></li><li class="L4"><code class="lang-php"> <div class="login-title"></code></li><li class="L5"><code class="lang-php"> 版权归七牛云所有 仅供参考学习</code></li><li class="L6"><code class="lang-php"> </div></code></li><li class="L7"><code class="lang-php"> <div class="login-sub-title"></code></li><li class="L8"><code class="lang-php"> php中文网0318登录作业 </code></li><li class="L9"><code class="lang-php"> </div></code></li><li class="L0"><code class="lang-php"></code></li><li class="L1"><code class="lang-php"> <div</code></li><li class="L2"><code class="lang-php"> id="notice"</code></li><li class="L3"><code class="lang-php"> style="display: none;"</code></li><li class="L4"><code class="lang-php"> ></code></li><li class="L5"><code class="lang-php"> <div</code></li><li class="L6"><code class="lang-php"> class="alert alert-danger"</code></li><li class="L7"><code class="lang-php"> style="display: block;"</code></li><li class="L8"><code class="lang-php"> role="alert"</code></li><li class="L9"><code class="lang-php"> ></code></li><li class="L0"><code class="lang-php"> <button</code></li><li class="L1"><code class="lang-php"> class="close"</code></li><li class="L2"><code class="lang-php"> id="close_alert"</code></li><li class="L3"><code class="lang-php"> type="button"</code></li><li class="L4"><code class="lang-php"> ></code></li><li class="L5"><code class="lang-php"> <span>&times;</span></code></li><li class="L6"><code class="lang-php"> </button></code></li><li class="L7"><code class="lang-php"> <div class="message"></code></li><li class="L8"><code class="lang-php"> </div></code></li><li class="L9"><code class="lang-php"> </div></code></li><li class="L0"><code class="lang-php"> </div></code></li><li class="L1"><code class="lang-php"> <!-- form 创建表单 + action 请求后端的api地址 + method 请求方法 GET/POST --></code></li><li class="L2"><code class="lang-php"> <form action="" method="post"></form></code></li><li class="L3"><code class="lang-php"> <div class="form-group field-email"></code></li><li class="L4"><code class="lang-php"> <div class="field-email-input"></code></li><li class="L5"><code class="lang-php"> <input class="form-control form-input" type="text" id="email"placeholder="邮箱 / 手机号（仅支持中国大陆号码）"autofocus</code></li><li class="L6"><code class="lang-php"> autocomplete="false" required/></code></li><li class="L7"><code class="lang-php"> </div></code></li><li class="L8"><code class="lang-php"> <span class="help-block">请输入正确的邮箱或手机号</span></code></li><li class="L9"><code class="lang-php"> </div></code></li><li class="L0"><code class="lang-php"></code></li><li class="L1"><code class="lang-php"> <div class="form-group field-userid-select" id="userIdSelDiv" style="display: none;"></code></li><li class="L2"><code class="lang-php"> <div class="dropdown form-control"></code></li><li class="L3"><code class="lang-php"> <div class="dropdown-value" data-toggle="dropdown"></code></li><li class="L4"><code class="lang-php"> <span class="dropdown-content"></span></code></li><li class="L5"><code class="lang-php"> <div class="dropdown-arrow"></div></code></li><li class="L6"><code class="lang-php"> </div></code></li><li class="L7"><code class="lang-php"> <div class="dropdown-menu" id="userIdSel"></div></code></li><li class="L8"><code class="lang-php"> </div></code></li><li class="L9"><code class="lang-php"> </div></code></li><li class="L0"><code class="lang-php"></code></li><li class="L1"><code class="lang-php"> <div class="form-group field-password"></code></li><li class="L2"><code class="lang-php"> <div class="field-password-input"></code></li><li class="L3"><code class="lang-php"> <input class="form-control form-input" id="password" type="password" placeholder="请输入密码" required/></div></code></li><li class="L4"><code class="lang-php"> <span class="help-block">密码不能为空</span></code></li><li class="L5"><code class="lang-php"> </div></code></li><li class="L6"><code class="lang-php"></code></li><li class="L7"><code class="lang-php"> <div</code></li><li class="L8"><code class="lang-php"> class="form-group field-captcha captcha-div hide"</code></li><li class="L9"><code class="lang-php"> id="captcha-div"</code></li><li class="L0"><code class="lang-php"> ></code></li><li class="L1"><code class="lang-php"> <div class="input-group"></code></li><li class="L2"><code class="lang-php"></code></li><li class="L3"><code class="lang-php"> <div class="input-group-addon"></code></li><li class="L4"><code class="lang-php"> <img</code></li><li class="L5"><code class="lang-php"> id="captcha-image"</code></li><li class="L6"><code class="lang-php"> src=""</code></li><li class="L7"><code class="lang-php"> alt=""</code></li><li class="L8"><code class="lang-php"> /></code></li><li class="L9"><code class="lang-php"> </div></code></li><li class="L0"><code class="lang-php"> </div></code></li><li class="L1"><code class="lang-php"></code></li><li class="L2"><code class="lang-php"> </div></code></li><li class="L3"><code class="lang-php"></code></li><li class="L4"><code class="lang-php"> <button class="btn btn-primary btn-emphasis btn-block" id="login-button" type="button">登录</button></code></li><li class="L5"><code class="lang-php"></code></li><li class="L6"><code class="lang-php"> <div class="login-bottom"></code></li><li class="L7"><code class="lang-php"> <a</code></li><li class="L8"><code class="lang-php"> class="login-link"</code></li><li class="L9"><code class="lang-php"> href="#"</code></li><li class="L0"><code class="lang-php"> ></code></li><li class="L1"><code class="lang-php"> 立即注册</code></li><li class="L2"><code class="lang-php"> </a></code></li><li class="L3"><code class="lang-php"> <div class="login-link-spacing"></div></code></li><li class="L4"><code class="lang-php"> <a</code></li><li class="L5"><code class="lang-php"> class="login-link"</code></li><li class="L6"><code class="lang-php"> href="#"</code></li><li class="L7"><code class="lang-php"> ></code></li><li class="L8"><code class="lang-php"> 忘记密码</code></li><li class="L9"><code class="lang-php"> </a></code></li><li class="L0"><code class="lang-php"> </div></code></li><li class="L1"><code class="lang-php"> </div></code></li><li class="L2"><code class="lang-php"> </div></code></li><li class="L3"><code class="lang-php"> </div></code></li><li class="L4"><code class="lang-php"></code></li><li class="L5"><code class="lang-php"></div></code></li><li class="L6"><code class="lang-php"></code></li><li class="L7"><code class="lang-php"><div class="copyright">© 2022 七牛云 版权所有</div></code></li><li class="L8"><code class="lang-php"></div></code></li><li class="L9"><code class="lang-php"></code></li><li class="L0"><code class="lang-php"></body></code></li><li class="L1"><code class="lang-php"></html></code></li></ol></pre> <p>iframe后台框架示例:</p> <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code class="lang-php"><!DOCTYPE html></code></li><li class="L1"><code class="lang-php"><html lang="en"></code></li><li class="L2"><code class="lang-php"><head></code></li><li class="L3"><code class="lang-php"> <meta charset="UTF-8"></code></li><li class="L4"><code class="lang-php"> <meta http-equiv="X-UA-Compatible" content="IE=edge"></code></li><li class="L5"><code class="lang-php"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></code></li><li class="L6"><code class="lang-php"> <title>后台使用iframe实战</title></code></li><li class="L7"><code class="lang-php"> <style></code></li><li class="L8"><code class="lang-php"> a{</code></li><li class="L9"><code class="lang-php"> font-size: 20px;</code></li><li class="L0"><code class="lang-php"> color: brown;</code></li><li class="L1"><code class="lang-php"> }</code></li><li class="L2"><code class="lang-php"> </style></code></li><li class="L3"><code class="lang-php"></head></code></li><li class="L4"><code class="lang-php"><body></code></li><li class="L5"><code class="lang-php"> <a href="https://j.map.baidu.com/26/BK" target="content" >天安门地图</a></code></li><li class="L6"><code class="lang-php"> <iframe src="" frameborder="2" name="content" width="500" height="400"></iframe></code></li><li class="L7"><code class="lang-php"></body></code></li><li class="L8"><code class="lang-php"></html></code></li></ol></pre> <p>css元素优先级示例</p> <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code class="lang-css">/* tag 看作个位</code></li><li class="L1"><code class="lang-css"> id 看作百位 </code></li><li class="L2"><code class="lang-css"> class 看作十位</code></li><li class="L3"><code class="lang-css"> 例如 </code></li><li class="L4"><code class="lang-css"> <div class="class" id="id">test</div></code></li><li class="L5"><code class="lang-css"> 其中 div为tag class 为十位 id为百位 )*/</code></li><li class="L6"><code class="lang-css">/* 如按下计算 */</code></li><li class="L7"><code class="lang-css"></code></li><li class="L8"><code class="lang-css"> #id{</code></li><li class="L9"><code class="lang-css"></code></li><li class="L0"><code class="lang-css">}</code></li><li class="L1"><code class="lang-css"></code></li><li class="L2"><code class="lang-css">/* 权重则为 (1,0,0) */</code></li></ol></pre> <div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3005494681349730" crossorigin="anonymous"></script> <!-- home-a --> <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-3005494681349730" data-ad-slot="7020762742"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <blockquote class="layui-elem-quote">相关推荐</blockquote> <div> <a href="/tech/4993.html" target="_blank">合肥KTV招聘模特佳丽日结包住宿经验者享受优先待遇</a><br/> <a href="/tech/4992.html" target="_blank">上海KTV招聘酒水促销员全职兼职都可以少</a><br/> <a href="/tech/4991.html" target="_blank">合肥KTV招聘酒水促销员包住宿报路费</a><br/> <a href="/tech/4990.html" target="_blank">小米集团2024年三季度创造了单季史上最强业绩</a><br/> <a href="/tech/4989.html" target="_blank">苹果开发采用博通台积电N3P工艺制造的AI芯片</a><br/> </div> <div class="count layui-clear"> <span class="pull-left">阅读 <em><script src=/e/public/ViewClick/?classid=3&id=4255&addclick=1></script>+</em></span> <span class="pull-right like">点赞 <em><script src=/e/public/ViewClick/?classid=3&id=4255&addclick=1></script>+</em></span> </div> </div> </div> <div class="item"></div> </div> </div> </div> <div class="footer"> <p> <span>© 2020</span> <span><a href="https://habaijian.com" target="_blank">asciim码</a></span> <span></span> </p> <p><span>人生就是一场修行</span></p> </div> <script src="/e/public/onclick/?enews=donews&classid=3&id=4255"></script></body> </html>
