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"> </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"> </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> </div> <nav class="pagination-nav"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3005494681349730" data-ad-slot="7020762742" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </nav> </main> <aside class="side-col"> <div class="card"> <div class="section-title">相关文章</div> <div id="relatedArticles"> <div class="related-list"> <a class="related-item" href="https://habaijian.com/tech/5009.html"> <div class="related-title">如何用ASCII码表快速查找特殊字符</div> <div class="related-meta"> <span>2026-06-28</span> </div> </a> <a class="related-item" href="https://habaijian.com/tech/4990.html"> <div class="related-title">小米集团2024年三季度创造了单季史上最强业绩</div> <div class="related-meta"> <span>2024-12-12</span> </div> </a> <a class="related-item" href="https://habaijian.com/tech/4989.html"> <div class="related-title">苹果开发采用博通台积电N3P工艺制造的AI芯片</div> <div class="related-meta"> <span>2024-12-12</span> </div> </a> <a class="related-item" href="https://habaijian.com/tech/4988.html"> <div class="related-title">苹果为 AI 服务器腾出资源取消了高性能 Mac 芯片的开发</div> <div class="related-meta"> <span>2024-12-12</span> </div> </a> <a class="related-item" href="https://habaijian.com/tech/4987.html"> <div class="related-title">Rocky Linux是否支持远程桌面连接</div> <div class="related-meta"> <span>2024-05-15</span> </div> </a> </div> </div> </div> <div class="ad-placeholder" id="googleAdSlot"></div> </aside> </div> <footer class="footer"> <div class="footer-inner"> <div class="footer-bottom"> <div class="footer-copyright"> © 2026 ASCII 码查询工具 | 知识文章详情页 </div> <div class="ad-placeholder" style="min-width:200px;"> <span></span> </div> </div> </div> </footer> <script> (function() { const themeToggle = document.getElementById('themeToggle'); const themeIcon = document.getElementById('themeIcon'); function loadTheme() { const saved = localStorage.getItem('ascii-tool-theme') || 'light'; setTheme(saved); } function setTheme(theme) { document.body.dataset.theme = theme; if (themeIcon) themeIcon.textContent = theme === 'dark' ? 'L' : 'D'; localStorage.setItem('ascii-tool-theme', theme); } function toggleTheme() { const current = document.body.dataset.theme; setTheme(current === 'dark' ? 'light' : 'dark'); } themeToggle.addEventListener('click', toggleTheme); loadTheme(); })(); </script> <script src="https://habaijian.com/e/public/onclick/?enews=donews&classid=3&id=4255"></script></body> </html>