html标签学习2

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>

View Code

边缘提示框

 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>

View Code

输入框和图表

 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>

View Code

模态对话框三级层叠

 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>

View Code

加减框

 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>

View Code

加减框 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>

View Code

加减框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>

View Code

相关阅读:
小学四则运算APP 最后阶段
 小学四则运算APP 第三阶段冲刺-第一天
 小学四则运算APP 第二阶段冲刺-第五天
 小学四则运算APP 第二次冲刺第四天
 小学四则运算APP 第二阶段冲刺-第三天
 小学四则运算APP 第二次冲刺-第二天
 小学四则运算APP 第二个冲刺第一天
 小学四则运算APP 第一个冲刺第八天
 小学四则运算APP 第一个冲刺第七天
 小学四则运算APP 第一个冲刺阶段第六天
原文地址：https://www.cnblogs.com/koushuige/p/8126850.html