作业内容：

1. 写一个登录表单,要求有邮箱,密码,登录按钮

2. 写一个简单后台架构: <a> + <iframe>

3. 实例演示元素样式来源与优先级

  • 登录示例图 仿七牛云

  • 写一个简单后台架构示例图

登录示例代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>0318登录页面作业</title>
  6.   <meta charset="utf-8">
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  10.   <link rel="stylesheet" type="text/css" href="https://sso.qiniu.com/asserts/css/bootstrap.min.css">
  11.   <link rel="stylesheet" type="text/css" href="https://sso.qiniu.com/asserts/css/app.css?13">
  12.   <!-- 以下引用的是网站ico图标 -->
  13.   <link rel="icon" type="image/x-icon" href="https://sso.qiniu.com/asserts/favicon.ico" />
  14. </head>
  16. <body>
  19. <header
  20.   class="navbar navbar-default navbar-static-top"
  21.   id="top"
  22. >
  23.   <div class="container-fluid">
  24.     <div class="navbar-header">
  25.       <button
  26.         class="collapsed navbar-toggle"
  27.         aria-controls="bs-navbar"
  28.         aria-expanded="false"
  29.         data-target="#navbar"
  30.         data-toggle="collapse"
  31.         type="button"
  32.       >
  33.         <span class="sr-only">Toggle navigation</span>
  34.         <span class="icon-bar"></span>
  35.         <span class="icon-bar"></span>
  36.         <span class="icon-bar"></span>
  37.       </button>
  38.       <a
  39.         class="navbar-brand"
  40.         href="../"
  41.       >
  42.         <div
  43.           class="brand"
  44.           title="七牛云"
  45.         ></div>
  46.       </a>
  47.     </div>
  49.     <nav
  50.       class="collapse navbar-collapse"
  51.       id="navbar"
  52.     >
  53.       <ul class="nav navbar-nav navbar-right">
  54.         <li>
  55.           <a
  56.             class="btn btn-primary btn-emphasis"
  57.             id="nav-signup-btn"
  58.             href="#"
  59.           >
  60.             立即注册
  61.           </a>
  62.         </li>
  63.       </ul>
  64.     </nav>
  65.   </div>
  66. </header>
  68. <div id="feedback-entry"></div>
  70. <div id="main">
  72. <div class="container">
  74.   <div class="login-container">
  75.     <div class="login-aside col-sm-6">
  76.       <a
  77.         class="login-aside-content"
  78.         style="background-image: url(https://img1.baidu.com/it/u=2774261946,3406162344&fm=253&fmt=auto&app=138&f=JPEG?w=954&h=500);"
  80.       ></a>
  81.     </div>
  83.     <div class="col-sm-6 login-main">
  84.       <div class="form">
  85.         <div class="login-title">
  86.           版权归七牛云所有 仅供参考学习
  87.         </div>
  88.         <div class="login-sub-title">
  89.         php中文网0318登录作业  
  90.         </div>
  92.         <div
  93.           id="notice"
  94.           style="display: none;"
  95.         >
  96.           <div
  97.             class="alert alert-danger"
  98.             style="display: block;"
  99.             role="alert"
  100.           >
  101.             <button
  102.               class="close"
  103.               id="close_alert"
  104.               type="button"
  105.             >
  106.               <span>&times;</span>
  107.             </button>
  108.             <div class="message">
  109.             </div>
  110.           </div>
  111.         </div>
  112.         <!-- form 创建表单 + action 请求后端的api地址 + method 请求方法 GET/POST  -->
  113.         <form action="" method="post"></form>
  114.         <div class="form-group field-email">
  115.           <div class="field-email-input">
  116.             <input class="form-control form-input" type="text" id="email"placeholder="邮箱 / 手机号（仅支持中国大陆号码）"autofocus
  117.         autocomplete="false" required/>
  118.           </div>
  119.           <span class="help-block">请输入正确的邮箱或手机号</span>
  120.         </div>
  122.         <div class="form-group field-userid-select" id="userIdSelDiv" style="display: none;">
  123.           <div class="dropdown form-control">
  124.             <div class="dropdown-value" data-toggle="dropdown">
  125.               <span class="dropdown-content"></span>
  126.               <div class="dropdown-arrow"></div>
  127.             </div>
  128.             <div class="dropdown-menu" id="userIdSel"></div>
  129.         </div>
  130.         </div>
  132.         <div class="form-group field-password">
  133.           <div class="field-password-input">
  134.             <input class="form-control form-input" id="password" type="password" placeholder="请输入密码" required/></div>
  135.           <span class="help-block">密码不能为空</span>
  136.         </div>
  138.         <div
  139.           class="form-group field-captcha captcha-div hide"
  140.           id="captcha-div"
  141.         >
  142.           <div class="input-group">
  144.             <div class="input-group-addon">
  145.               <img
  146.                 id="captcha-image"
  147.                 src=""
  148.                 alt=""
  149.               />
  150.             </div>
  151.           </div>
  153.         </div>
  155.         <button class="btn btn-primary btn-emphasis btn-block" id="login-button" type="button">登录</button>
  157.         <div class="login-bottom">
  158.           <a
  159.             class="login-link"
  160.             href="#"
  161.           >
  162.             立即注册
  163.           </a>
  164.           <div class="login-link-spacing"></div>
  165.           <a
  166.             class="login-link"
  167.             href="#"
  168.           >
  169.             忘记密码
  170.           </a>
  171.         </div>
  172.       </div>
  173.     </div>
  174.   </div>
  176. </div>
  178. <div class="copyright">© 2022 七牛云 版权所有</div>
  179. </div>
  181. </body>
  182. </html>

iframe后台框架示例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>后台使用iframe实战</title>
  8.     <style>
  9.         a{
  10.             font-size: 20px;
  11.             color: brown;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <a href="https://j.map.baidu.com/26/BK" target="content"  >天安门地图</a>
  17.     <iframe src="" frameborder="2" name="content" width="500" height="400"></iframe>
  18. </body>
  19. </html>

css元素优先级示例

  1. /* tag 看作个位
  2.  id  看作百位 
  3.  class 看作十位
  4.  例如 
  5.  <div class="class" id="id">test</div>
  6.  其中 div为tag class 为十位  id为百位 )*/
  7. /* 如按下计算 */
  9.  #id{
  11. }
  13. /* 权重则为 (1,0,0) */

更多相关文章

  1. Android第三方登录-----微信登录接入方法
  2. LGame(Android及J2SE游戏引擎)入门示例——如何构建一个游戏
  3. Yii2使用驼峰命名的形式访问控制器的示例代码
  4. 1. 实例演示classList对象 2. 使用blur事件进行表单非空验证
  5. Androidの联系人群组Group操作示例
  6. Android动态显示隐藏密码输入框的内容
  7. Android(安卓)登录界面调用输入法时让界面自动上移，使输入法不会
  8. Eclipse开发简易的Android服务器
  9. Android中点击按钮后隐藏输入法

随机推荐

  1. 微服务架构下的自动化部署，使用Jenkins来
  2. 推荐一个项目管理工具，落地基于Scrum的敏
  3. 2019 我的 Github 开源之路！
  4. 一路走来，感谢有你！2020新年红包奉上！
  5. Spring Cloud Alibaba：Sentinel实现熔断与
  6. 使用Jenkins一键打包部署前端应用，就是这
  7. 大家心心念念的权限管理功能，这次安排上了
  8. Github标星19K+Star，10分钟自建对象存储服
  9. 前后端分离项目，如何优雅实现文件存储！
  10. 手把手教你搞定权限管理，结合Spring Secur