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; /*高度*/
width: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;width: 1200px;height: 100px;margin:auto;position: relative">
<div style="width: 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>
html标签学习2的更多相关文章
- java struts2入门学习--OGNL语言常用符号和常用标签学习
一.OGNL常用符号(接上一篇文章): 1.#号 1)<s:property value="#request.username"/> 作用于struts2的域对象,而不 ...
- 论文笔记：多标签学习综述（A review on multi-label learning algorithms）
2014 TKDE(IEEE Transactions on Knowledge and Data Engineering) 张敏灵,周志华 简单介绍 传统监督学习主要是单标签学习,而现实生活中目标样 ...
- HTML标签学习总结（2）
点我:HTLM标签学习总结(1) 11. 在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器. 语法: & ...
- video标签学习使用
video标签学习使用 学习前的理解 video是HTML5中的新标签,可以用来播放视频.对于不同的浏览器支持的视频格式不一样,但是具体浏览器支持的类型并不清楚. 支持的类型 视频的格式分为编码格式和 ...
- HTML基础标签学习
HTML基础学习 前言 HTML基础学习会由HTML基础标签学习.HTML表单学习和一张思维导图总结HTML基础三篇文章构成,文章中博主会提取出重点常用的知识和经常出现的bug,提高学习的效率,后续会 ...
- html中的一些标签学习
今天看手册学习到了HTML5很多属性.现在总结如下 <body bgcolor="BED1A2" text="FFFFFF" link="yel ...
- （转）DEDECMS模板原理、模板标签学习 - .Little Hann
本文,小瀚想和大家一起来学习一下DEDECMS中目前所使用的模板技术的原理: 什么是编译式模板.解释式模板,它们的区别是什么? 模板标签有哪些种类,它们的区别是什么,都应用在哪些场景? 学习模板的机制 ...
- HTML中的Head标签学习
在页面加载完成的时候,标签head里的内容,是不会在页面中显示出来的.它包含了像页面的<title>(标题) ,CSS(如果你想用CSS来美化页面内容),图标和其他的元数据(比如 作者,关 ...
- spring自定义标签学习
看到几篇很全的自定义标签,从定义到使用,写的很好. 这里我也是在那里学习的,对学习spring源码也很有帮助. 贴出来与大家共享. http://sammor.iteye.com/blog/11009 ...
- 2、head 标签学习
5秒自动刷新 <meta http-equiv="refresh" content="5,url:http://www.baidu.com" /> ...
随机推荐
- java版飞机大战代码
@ 目录 前言 Plane PlaneStatus类 Power类 Gift Diji play类 over类 MainFrame主类 MyZiDan DijiZiDan Before 前言 很久之前 ...
- ceph的pg平衡插件balancer
前言 ceph比较老的版本使用的reweight或者osd weight来调整平衡的,本篇介绍的是ceph新的自带的插件balancer的使用,官网有比较详细的操作手册可以查询 使用方法 查询插件的开 ...
- 每天一个linux命令之stat
[Linux]Linux下使用stat命令所显示出来的三个时间 转 https://blog.csdn.net/pointer_y/article/details/54347968 在linux系统下 ...
- 面试官：小伙子，你给我说一下HashMap 为什么线程不安全？
前言:我们都知道HashMap是线程不安全的,在多线程环境中不建议使用,但是其线程不安全主要体现在什么地方呢,本文将对该问题进行解密. 1.jdk1.7中的HashMap 在jdk1.8中对HashM ...
- 仅需几步，EasyRecovery就能恢复RAID数据
RAID是什么?RAID是具有冗余能力的磁盘阵列,简单的来说就是把相同的数据存储在多个硬盘的不同的地方. 在了解了RAID之后就会知道,RAID中的数据也是有可能丢失的,虽然RAID数据丢失会引发一系 ...
- Vegas教程分享，制作古装墨迹笔刷开场效果
许多酷炫的古装大片,片头曲介绍人物的时候,都有一种墨迹笔刷的开场效果,那么这个特效如何利用Vegas去做呢? 1.导入素材文件 首先呢,导入相关文件素材到视频制作软件Vegas中,点击页面上方如图1箭 ...
- C语言模拟实现先来先服务(FCFS)和短作业优先(SJF)调度算法
说明 该并非实现真正的处理机调度,只是通过算法模拟这两种调度算法的过程. 运行过程如下: 输入进程个数 输入各个进程的到达事件 输入各个进程的要求服务事件 选择一种调度算法 程序给出调度结果:各进程的 ...
- 【Java】Java socket通信使用read,readline函数的阻塞问题
Socket通信是Java网络编程中比较基础的部分,其原理其实就是源ip,源端口和目的ip,目的端口组成的套接字通信.其底层还设及到了TCP协议的通信. Java中的Socket通信可以通过客户端的S ...
- FDR校正
一.假设检验 假设检验的基本思路是: 设立零假设(null hypothesis)H0,以及与零假设H0相对应的非零假设(alternative hypothesis)H1,在假设H0成立的前提下,计 ...
- 教学之Treap
放在前面的话 本蒟蒻因为最近的题目总是搞点奇奇怪怪的平衡树,就去学了下\(Treap\) 现在来总结一下 由于本人是个蒟蒻,本文可能有部分错误,麻烦各位读者大佬在评论区提醒 什么是\(Treap\) ...