博主信息
博文 6
粉丝 0
评论 0
访问量 4230
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
一个html表单,后台架构及元素样式与优先级
P粉150142745
原创
949人浏览过
  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. </head>
  9. <body>
  10. <!-- 1. 写一个登录表单,要求有邮箱,密码,登录按钮 -->
  11. <div>
  12. <form action="" method="post">
  13. <label for="myid">用户名:</label>
  14. <input
  15. type="text"
  16. id="myid"
  17. name="username"
  18. value=""
  19. placeholder="填写用户名"
  20. autofocus
  21. required
  22. />
  23. </form>
  24. </div>
  25. <div>
  26. <form action="">
  27. <label for="pw">密码:</label>
  28. <input
  29. type="password"
  30. id="pw"
  31. name="mypw"
  32. value=""
  33. placeholder="数字+字母至少8位"
  34. required
  35. />
  36. </form>
  37. </div>
  38. <div>
  39. <form action="">
  40. <label for="mail">邮箱:</label>
  41. <input
  42. type="email"
  43. id="mail"
  44. name="myemail"
  45. value=""
  46. placeholder="abc@qq.com"
  47. required
  48. />
  49. </form>
  50. </div>
  51. <div>
  52. <button>提交</button>
  53. </div>
  54. <hr />
  55. <!-- 2. 写一个简单后台架构: <a> + <iframe> -->
  56. </body>
  57. </html>
  58. <!DOCTYPE html>
  59. <html lang="en">
  60. <head>
  61. <meta charset="UTF-8" />
  62. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  63. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  64. <title>后台架构</title>
  65. </head>
  66. <body>
  67. <div class="header">
  68. <h3>后台架构</h3>
  69. <div>
  70. <span>admin</span>
  71. <a href="">退出</a>
  72. </div>
  73. </div>
  74. <!-- 左侧导航 -->
  75. <ul class="nav">
  76. <li><a href="demo1.html" target="content">菜单项1</a></li>
  77. <li><a href="demo2.html" target="content">菜单项2</a></li>
  78. <li><a href="demo1.html" target="content">菜单项3</a></li>
  79. <li><a href="demo2.html" target="content">菜单项4</a></li>
  80. <li><a href="demo1.html" target="content">菜单项5</a></li>
  81. </ul>
  82. <!-- 右侧内容区 -->
  83. <iframe src="" frameborder="3" name="content"></iframe>
  84. <hr />
  85. </body>
  86. </html>

  1. <!-- 3. 实例演示元素样式来源与优先级 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <title>元素样式与优先级</title>
  9. </head>
  10. <body>
  11. <h4>代理样式/浏览器样式/默认样式</h4>
  12. <div style="color: rgb(240, 217, 10)"><h2>继承特征</h2></div>
  13. <!-- <h1>行内样式</h1> -->
  14. <h2 style="color: rgb(72, 233, 23)">自定义样式</h2>
  15. <h2 style="color: rgb(100, 51, 180)">行内样式</h2>
  16. <h5>文档样式1</h5>
  17. <style>
  18. h5 {
  19. color: aquamarine;
  20. }
  21. </style>
  22. <h1>文档样式2</h1>
  23. <style>
  24. @import url("static/style.css");
  25. </style>
  26. </body>
  27. </html>

批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学