博客列表 >form表单提交、使用iframe编写后台简单布局、css样式分类与优先级

form表单提交、使用iframe编写后台简单布局、css样式分类与优先级

Time
Time原创
2022年03月19日 21:46:12474浏览

form表单提交、使用iframe编写后台简单布局、css样式分类与优先级

form表单提交

图片:

form-demo

代码:

  1. <form action="" method="post">
  2. <div class="">
  3. <label for="username">用户名:</label>
  4. <input type="text" placeholder="填写用户名" value="wuyu" id="username" name="username" autofocus required>
  5. </div>
  6. <div class="">
  7. <label for="password">密码:</label>
  8. <input type="password" placeholder="填写密码" value="123" id="password" name="password" required>
  9. </div>
  10. <div class="">
  11. <label for="email">邮箱:</label>
  12. <input type="email" placeholder="填写邮箱" value="" id="email" name="email" required>
  13. </div>
  14. <div class="">
  15. <label for="man">性别:</label>
  16. <input type="radio" value="1" id="man" name="sex" checked >
  17. <label for="man"></label>
  18. <input type="radio" value="2" id="woman" name="sex" >
  19. <label for="woman"></label>
  20. </div>
  21. <div class="">
  22. <label for="lanqiu">爱好:</label>
  23. <input type="checkbox" value="1" id="game" name="aihao[]" ><label for="game">游戏</label>
  24. <input type="checkbox" value="2" id="zuqiu" name="aihao[]" checked><label for="zuqiu">足球</label>
  25. <input type="checkbox" value="3" id="lanqiu" name="aihao[]" ><label for="lanqiu">篮球</label>
  26. </div>
  27. <div class="">
  28. <button>提交</button>
  29. </div>
  30. </form>

使用iframe编写后台简单布局

图片:

iframe-demo

代码:

  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>后台管理简单布局</title>
  8. <style>
  9. body {
  10. height: 100vh;
  11. width: 100vw;
  12. display: grid;
  13. grid-template-columns: 10em 1fr;
  14. grid-template-rows: 6em 1fr;
  15. margin: 0;
  16. }
  17. body .header {
  18. grid-column-end: span 2;
  19. border-bottom: 1px solid currentColor;
  20. background-color: #efe;
  21. padding: 2em;
  22. display: flex;
  23. align-items: center;
  24. }
  25. body .header div {
  26. margin-left: auto;
  27. }
  28. body .nav {
  29. background-color: #efc;
  30. margin: 0;
  31. padding-top: 1em;
  32. list-style: none;
  33. }
  34. body iframe {
  35. width: calc(100vw - 10em);
  36. height: calc(100vh - 6em);
  37. border-left: 1px solid currentColor;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <!-- 头部 -->
  43. <div class="header">
  44. <h1>后台管理</h1>
  45. <div>
  46. <span>admin</span>
  47. <a href="">退出</a>
  48. </div>
  49. </div>
  50. <!-- 左侧 -->
  51. <ul class="nav">
  52. <li><a href="form.html" target="my-iframe">form表单</a></li>
  53. <li><a href="https://www.ifeng.com/" target="my-iframe">凤凰网首页</a></li>
  54. <li><a href="https://flive.ifeng.com/" target="my-iframe">凤凰网直播</a></li>
  55. </ul>
  56. <!-- 内容 -->
  57. <div>
  58. <iframe srcdoc="点击左侧菜单栏" name="my-iframe" frameorder="1"></iframe>
  59. </div>
  60. </body>
  61. </html>

css样式分类与优先级

图片:

css-demo

代码:

  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>css样式分类与优先级</title>
  8. <style>
  9. .color-blue{
  10. color: blue;
  11. }
  12. </style>
  13. <link rel="stylesheet" href="./static/css/style.css">
  14. </head>
  15. <body>
  16. <h1>默认样式</h1>
  17. <div>
  18. <span style="color: red;">自定义样式(行内样式)</span>
  19. </div>
  20. <div>
  21. <span class="color-blue">自定义样式(内部样式)</span>
  22. </div>
  23. <div>
  24. <span class="color-yellow">自定义样式(外部样式)</span>
  25. </div>
  26. </body>
  27. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议