1. 表单、内联框架以及CSS基础

登录表单

代码

  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.     <div>
  11.     <form action="check.php" method="post">
  12.     <label for="username">用户名：</label>
  13.     <input type="text " name="username" id="username" value="" autofocus  placeholder="不能超过六位" required />
  14. </div>
  15.     <div>
  16.         <label for="pwd">密码：&nbsp;&nbsp;&nbsp;</label>
  17.         <input type="password" name="pwd" id="pwd" value=""  required placeholder="字母+数字">
  18.     </div>
  19.     <div>
  20.         <label for="myemail">邮箱：&nbsp;&nbsp;&nbsp;</label>
  21.         <input type="email" name="email" id="myemail" value="" required placeholder="@qq.com">
  22.     </div>
  23. <div>
  24.     <label for="male">性别:&nbsp;&nbsp;&nbsp;&nbsp;</label>
  25.     <input type="radio" id="male" name="sex" checked><label for="male">男</label>
  26.     <input type="radio" id="female" name="sex" ><label for="female">女</label>
  28. </div>
  29. <div>
  30.     <label for="">兴趣：&nbsp;&nbsp;</label>
  31.     <input type="checkbox" name="aihao[]" id="game" checked> <label for="game">王者</label>
  32.     <input type="checkbox" name="aihao[]" id="php"> <label for="php">php</label>
  33.     <input type="checkbox" name="aihao[]" id="youyon"checked> <label for="youyon">游泳</label>
  34. </div>
  35. <div>
  36.     <label for="city">城市：&nbsp;&nbsp;</label>
  37.     <select name="city" id="city">
  38.         <option value="1" selected >广东</option>
  39.         <option value="2" >上海</option>
  40.         <option value="3">北京</option>
  41. </select>
  42. </div>
  43. <!-- 多行文本框 -->
  44. <textarea name="" id="" cols="30" rows="10" placeholder="请输入内容"></textarea>
  45. <div><button>提交登录</button></div>
  46. </form>
  47. </body>
  48. </html>

效果图

2. 简单的后台架构实现

代码

  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.         }
  18.         body .header {
  19.             grid-column-end: span 2;
  20.             border-bottom: 1px solid currentColor;
  21.             background-color: #efe;
  22.             padding: 2em;
  23.             display: flex;
  24.             align-items: center;
  25.         }
  27.         body .header div {
  28.             margin-left: auto;
  29.         }
  31.         body .nav {
  32.             background-color: #efc;
  33.             margin: 0;
  34.             padding-top: 1em;
  35.             list-style: none;
  36.         }
  38.         body iframe {
  39.             width: calc(100vw - 10em);
  40.             height: calc(100vh - 6em);
  41.             border-left: 1px solid currentColor;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <!-- 头部 -->
  47.    <div class="header">
  48.        <h1>后台管理</h1>
  49.        <div>
  50.        <span>admin</span>
  51.        <a href="">退出</a>
  52.     </div>
  53.    </div>
  54. <!-- 左侧导航 -->
  55. <ur class="nav">
  56.     <li><a href="1.html" target="content">菜单项1</a></li>&nbsp;
  57.     <li><a href="2.html" target="content">菜单项2</a></li>&nbsp;
  58.     <li><a href="3.html" target="content">菜单项3</a></li>&nbsp;
  59.     <li><a href="4.html" target="content">菜单项4</a></li>&nbsp;
  60. </ur>
  62. <!-- 右侧内容 -->
  64. <iframe src="" frameborder="0" name="content"></iframe>
  65. </body>
  66. </html>

效果图

3. 元素样式来源与优先级

来源1，浏览器默认样式/代理默认样式

hello word

" class="reference-link">代码：<h1>hello word</h1>

效果图

来源2，自定义样式 会覆盖默认样式

第一种 style属性

hello

" class="reference-link">代码：<h1 style="color: red;">hello</h1>

效果图

第二种 style 标签

代码:

  1.      <h1>111</h1>
  2.      <h1>222</h1>
  3.      <style>
  4.          h1{color: blue;}
  5.      </style>

效果图

第三种外部引用css

代码:

  1.     <link rel="stylesheet" href="style.css">
  2.     <h1>555</h1>

效果图

或者

  1. <style>
  2.     @import url(style.css);
  3. </style>
  4. <h1>1111</h1>

效果图

来源3: 书写顺序,写在后面的同名属性会覆盖前面的(优先级相同的情况下) 某些属性具有继承特征,例如颜色,字号,字体,子元素会继承父元素的同名属性

代码:

  1.  <style>
  2.     div{color: red;}
  3. </style>
  4. <div>
  5.     <h1>66666</h1>
  6. </div>

效果图