input 系列
<form enctype="multipart/form-data"> <input type="text" name="user" value="haha"> <!--value是默认值--> <input type="password" name="pwd" value="hah"> <!--value是默认值--> <input type="button" value="登录1"> <input type="submit" value="登录2"> <!--value提交到后台 --> <p>性别:</p> <p>男<input type="radio" name="xingbie" ></p> <!--单选框 name相同互斥--> <p>女<input type="radio" name="xingbie" ></p> <p>爱好:</p> <p>篮球<input type="checkbox" name="aihao"></p> <!--多选框 name相同同类--> <p>足球<input type="checkbox" name="aihao"></p> <p><input type="file"></p> <!--上传文件 依赖form表单属性enctype="multipart/form-data"--> <p><input type="reset"></p> <!--重置--> </form>
<textarea name="sasa">默认值</textarea> <select name="dizhi"> <option value="1">安徽</option> <option value="2">合肥</option> <option value="3">荷兰</option> </select>
以上提交后台的标签
a 标签 跳转 锚
<a href="https://www.baidu.com/">百度</a> <a href="#a1">第一章</a> <a href="#a2">第二章</a> <a href="#a3">第三章</a> <a href="#a4">第四章</a> <div id="a1" style="height: 600px">第一章内容</div> <div id="a2"style="height: 600px">第二章内容</div> <div id="a3"style="height: 600px">第三章内容</div> <div id="a4"style="height: 600px">第四章内容</div>
css
<link rel="stylesheet" href="1.css"> 导入
<head> <meta charset="UTF-8"> <title>Title</title> <style> /*#i1,#i2{*/ /*background-color: yellow;*/ /*color: #b3d4fc;*/ /*}*/ /*.c1{*/ /*background-color: yellow;*/ /*color: #b3d4fc;*/ /*}*/ /*div{*/ /*background-color: yellow;*/ /*color: #b3d4fc;*/ /*}*/ /*span div{*/ /*background-color: yellow;*/ /*color: #b3d4fc;*/ /*}*/ div[name="alex"]{ background-color: yellow; color: #b3d4fc; } </style> </head> <body> <div class="c1">hello</div> <div class="c1">hello</div> <span> <div class="c1">hello</div>hello </span> <div name="alex">hello</div> </body> </html>
<div style=" border: 4px solid red; /*边框 像素 虚实线 边框颜色*/ height: 48px; /*高度*/ 80%; /* 宽度*/ font-size: 16px; /*字体大小*/ text-align: center; /*水平居中*/ line-height: 48px; /*垂直根据标签高度居中*/ font-weight: bold; /*字体加粗*/ color: red; /* 字体颜色*/ ">hello</div>
position ：fixed relative absolute <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="background-color: yellow; 1200px;height: 100px;margin:auto;position: relative"> <div style=" 40px;background-color: red; height:40px;position:absolute;left: 0;bottom: 0"></div> </div> </body> </html>
后台管理页面
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 } 10 .ms-head{ 11 height: 48px; 12 background-color: #b3d4fc; 13 } 14 .body-menu{ 15 position: absolute; 16 left: 0; 17 background-color: yellow; 18 width: 200px; 19 } 20 .body-content{ 21 position: absolute; 22 top: 48px; 23 right: 0; 24 left: 200px; 25 bottom: 0; 26 background-color: #2459a2; 27 overflow: auto; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="ms-head"></div> 33 <div class="ms-body"> 34 <div class="body-menu"> 35 <ol> 36 <li>1</li> 37 <li>1</li> 38 <li>1</li> 39 </ol> 40 </div> 41 <div class="body-content"> 42 <h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1> 43 </div> 44 </div> 45 </body> 46 </html>
边缘提示框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <table> 9 <tr> 10 <td>1</td> 11 <td>2</td> 12 <td> 13 <div style="position: relative"> 14 <a>删除</a> 15 <div style="position: absolute;left: 38px;top: 0px"> 16 <input type="button" value="确定"> 17 <input type="button" value="取消"> 18 </div> 19 </div> 20 </td> 21 </tr> 22 <tr> 23 <td>11</td> 24 <td>22</td> 25 <td>删除</td> 26 </tr> 27 <tr> 28 <td>11</td> 29 <td>22</td> 30 <td>删除</td> 31 </tr> 32 </table> 33 </body> 34 </html>
输入框和图表
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .d1{ 8 width: 200px; 9 position: relative; 10 /*background-color: #2459a2;*/ 11 } 12 .d1 input{ 13 padding-right: 30px; 14 width:150px; 15 } 16 .r{ 17 position: absolute; 18 left: 160px; 19 top: 1px; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="d1"> 25 <input type="text"> 26 <span class="r">r</span> 27 </div> 28 </body> 29 </html>
模态对话框 三级层叠
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 padding: 0; 10 } 11 .d1{ 12 background-color: #b3d4fc; 13 z-index: 1; 14 } 15 .c2{ 16 position: fixed; 17 top: 0; 18 left: 0; 19 right: 0; 20 bottom: 0; 21 background:rgba(0,0,0,.5); 22 z-index: 2; 23 } 24 .c3{ 25 position: fixed; 26 top: 50%; 27 left: 50%; 28 background-color: white; 29 width: 200px; 30 height: 200px; 31 margin-left: -100px; 32 margin-top: -100px; 33 z-index: 3; 34 } 35 </style> 36 </head> 37 <body> 38 <div class="d1"> 39 <h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1> 40 </div> 41 <div class="c2"></div> 42 <div class="c3"></div> 43 </body> 44 </html>
加减框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .dw{ 12 height: 22px; 13 width: 150px; 14 border: 1px solid darkgray; 15 } 16 .d1{ 17 float: left; 18 height: 22px; 19 width: 40px; 20 text-align: center; 21 line-height:22px; 22 } 23 .d2 input{ 24 float: left; 25 height: 20px; 26 width: 66px; 27 border: 1px solid darkgray; 28 } 29 .d3{ 30 float: left; 31 height: 22px; 32 width: 40px; 33 text-align: center; 34 line-height: 22px; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="dw"> 40 <div class="d1">-</div> 41 <div class="d2"> 42 <input type="text"> 43 </div> 44 <div class="d3">+</div> 45 </div> 46 </body> 47 </html>
加减框 2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .dw{ 12 float: left; 13 height: 22px; 14 width: 156px; 15 float: left; 16 } 17 .d1{ 18 float: left; 19 height: 22px; 20 width: 40px; 21 text-align: center; 22 line-height:22px; 23 border: 1px solid darkgray; 24 } 25 .d2 input{ 26 padding: 0; 27 float: left; 28 height: 20px; 29 width: 60px; 30 border: 1px solid darkgray; 31 margin-left:5px; 32 } 33 .d3{ 34 float: right; 35 height: 22px; 36 width: 40px; 37 text-align: center; 38 line-height: 22px; 39 border: 1px solid darkgray; 40 margin-left:5px; 41 } 42 </style> 43 </head> 44 <body> 45 <div class="dw"> 46 <div class="d1">-</div> 47 <div class="d2"> 48 <input type="text"> 49 </div> 50 <div class="d3">+</div> 51 </div> 52 </body> 53 </html>
加减框js实现
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .dw{ 12 height: 22px; 13 width: 150px; 14 border: 2px solid darkgray; 15 } 16 .d1{ 17 float: left; 18 height: 22px; 19 width: 40px; 20 text-align: center; 21 line-height:22px; 22 cursor: pointer; 23 } 24 .d2 input{ 25 float: left; 26 height: 20px; 27 width: 66px; 28 border: 1px solid darkgray; 29 } 30 .d3{ 31 float: left; 32 height: 22px; 33 width: 40px; 34 text-align: center; 35 line-height: 22px; 36 cursor: pointer; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="dw"> 42 <div class="d1" onclick="Minus();">-</div> 43 <div class="d2"> 44 <input id="count" type="text"value="123"> 45 </div> 46 <div class="d3" onclick="Plus();">+</div> 47 </div> 48 <script type="text/javascript"> 49 function Plus() { 50 var old_str = document.getElementById('count').value; 51 var old_int = parseInt(old_str) 52 var new_int = old_int + 1 53 document.getElementById('count').value=new_int 54 } 55 function Minus() { 56 var old_str = document.getElementById('count').value; 57 var old_int = parseInt(old_str) 58 var new_int = old_int - 1 59 document.getElementById('count').value=new_int 60 } 61 </script> 62 </body> 63 </html>