search

博客列表 >0318作业

0318作业

zhang
zhang原创
2022年04月11日 21:40:45314浏览

作业内容：

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) */
上一条：双色球选项卡实践下一条：0317作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多