登录器练习

代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>
  11. <body>
  12.     <!-- method: 提交类型,提交数据以?k=y&k=y查询字符串添加到url中 -->
  13.     <form action="check.php" method="post">
  14.         <div>
  15.             <!-- type, name, value -->
  16.             <label for="username">用户名:</label>
  17.             <!-- label.for = input.id  -->
  18.             <!-- autofocus: 布尔属性 -->
  19.             <input type="text" id="username" name="username" value="admin" placeholder="至少8位" autofocus required />
  20.         </div>
  21.         <div>
  22.             <label for="psw">密码:</label>
  23.             <input type="password" id="psw" name="password" value="123" placeholder="数字+字母" required />
  24.         </div>
  25.         <div>
  26.             <label for="my-email">邮箱:</label>
  27.             <input type="email" id="my-email" name="email" value="" placeholder="a@email.com" required />
  28.         </div>
  30.         <!-- 单选按钮 -->
  31.         <div>
  32.             <label for="male">性别:</label>
  33.             <!-- 所有input.name 必须相同 -->
  34.             <input type="radio" name="gender" id="male" checked /><label for="male">男</label>
  35.             <input type="radio" name="gender" id="female" /><label for="female">女</label>
  36.         </div>
  37.         <!-- 复选框 -->
  38.         <div>
  39.             <label for="male">爱好:</label>
  40.             <!-- 所有input.name 必须是一个数组格式 -->
  41.             <input type="checkbox" name="hobbies[]" id="game" checked /><label for="game">游戏</label>
  42.             <input type="checkbox" name="hobbies[]" id="programmer" checked /><label for="programmer">编程</label>
  43.             <input type="checkbox" name="hobbies[]" id="shoot" /><label for="shoot">摄影</label>
  44.         </div>
  46.         <!-- 下拉列表 -->
  47.         <!-- select.name, option.value , name,value属性不在同一个标签中 -->
  48.         <label for="user">会员:</label>
  49.         <select name="user" id="user">
  50.         <option value="1">金牌会员</option>
  51.         <option value="2">银牌会员</option>
  52.         <option value="3" selected>铜牌会员</option>
  53.         <option value="4">木牌会员</option>
  54.       </select>
  55.         <div>
  56.             <!-- 多行文本框 -->
  57.             <textarea name="" id="" cols="30" rows="10"></textarea>
  58.         </div>
  59.         <div>
  60.             <button>提交</button>
  61.         </div>
  62.     </form>
  63. </body>
  65. </html>

代码效果图

内联框架练习

代码

  1.     <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>Document</title>
  8. </head>
  9. <style type="text/css">
  10.           * {
  11.         margin: 0;
  12.         padding: 0;  
  14.     }
  15.     .liftbox{
  16.         width:80px;
  17.         height:510px;
  18.         background-color:beige;
  19.         float: left;
  20.     }
  21.     .headbox{
  22.         width:1265px;
  23.         height:50px;
  24.         background-color: skyblue;
  25.         /* float: left; */
  26.     }
  27.         li{
  28.             text-align: center;
  29.             margin: 25px auto;
  32.         }
  33.    iframe{
  34.         width: 1170px; ;
  35.         height: 510px;
  36.    }
  37.    a:link{
  38.         color: black;
  39.         text-decoration: none;
  40.    }
  41. </style>
  42. <body>
  43.     <div class="headbox";><h1>许小可网站管理后台系统</h1></div>
  44.     <div class="liftbox";><ul>
  45.         <hr>
  46.         <li><a href="https://sports.sina.com.cn/nba/" target="boxiframe">测试按钮</a></li>
  47.         <hr>
  48.         <li><a href="https://sports.sina.com.cn/nba/" target="boxiframe">测试按钮</a></li>
  49.         <hr>
  50.         <li><a href="https://sports.sina.com.cn/nba/" target="boxiframe">测试按钮</a></li>
  51.         <hr>
  52.         <li><a href="https://sports.sina.com.cn/nba/" target="boxiframe">测试按钮</a></li>
  53.         <hr>
  54.         <li><a href="https://sports.sina.com.cn/nba/" target="boxiframe">测试按钮</a></li>
  55.         <hr>
  56.     </ul></div>
  57.     <iframe name="boxiframe" src="https://www.sina.com.cn/" frameborder="0" scrolling="no"></iframe>
  61. </body>
  62. </html>

代码效果图

CSS优先级练习

代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>Document</title>
  8. </head>
  9. <style type="text/css">
  10.   .box1{
  11.     color: red;
  12.     font-size: 5px;
  13.   }
  14.   *{
  15.     color: blue;
  16.     font-size: 15px;
  17.     margin: 0;
  18.     padding: 0;
  19.   }
  20.   span{
  21.       color: aqua;
  22.       font-size: 25px;
  23.   }
  24.   .sclass{
  25.       color: chartreuse;
  26.       font-size: 35px;  
  28.   }
  29.     #sid{
  31.       color: crimson;  
  32.       font-size: 45px;
  34.   }
  35.     .sclass2{
  36.         color:hotpink !important;
  38.     }
  39. </style>
  40. <body>
  41.  <div class="box1"><p>子元素会继承父元素的样式</p></div>
  42.  <div class="box1"><span>通配符选择器的优先级大于继承样式的优先级</span></div>
  43.  <div class="box1"><span>html标签选择器的优先级大于通配符选择器</span></div>
  44.  <div class="box1"><span class="sclass">类选择器的优先级大于标签选择器</span></div>
  45.  <div class="box1"><span class="sclass" id="sid">id选择器的优先级大于类选择器</span></div>
  46.  <div class="box1"><span class="sclass" id="sid" style="color: black;font-size: 55px">行内样式的优先级大于id选择器</span></div>
  47.  <div class="box1"><span class="sclass2" id="sid" style="color: black;font-size: 55px">!important优先级最高可以覆盖行内样式</span></div>
  50. </body>
  51. </html>

代码效果

更多相关文章

  1. Android(安卓)利用ScaleDrawable实现缩放
  2. android 线程优先级设置
  3. 【移动安全高级篇】————7、APK 的自我保护
  4. android application
  5. 在Ubuntu16.04上下载并编译Android内核源代码
  6. android 中使用java aes加密算法，报错信息android javax.crypto.B
  7. Android，开源还是封闭？
  8. android主流UI布局
  9. Android: Service中创建窗口Dialog

随机推荐

  1. Django EventLog：传入当前用户
  2. Python---64位的windows系统中python的下
  3. 编程语言与Python学习（二）
  4. Python基础--图形用户界面GUI
  5. python tkinter窗口弹出置顶的方法
  6. Python 身份运算符
  7. Python基础之socket编程
  8. Fast RCNN的配置流程
  9. 在Python中的大文件中拆分行的内存问题
  10. Python之CMDB资产管理系统