H5-浮动和表单以及经纬度的查询

1.透明度(opacity)

如果是父子结构的标签,透明度会跟随父标签的透明度,父标签设置为透明,那么子标签也跟着透明

opacity的值在0~1之间,可以是小数

/* opacity:0.1 */

2.相对定位(relative)

相对定位的参照物是本身

设置相对定位并没有脱离当前的层级,所以下面的元素不会挤上来

偏移计算的位置,自身左上角

/* position:relative;

left:20px;

top:20px; */

3.绝对定位(absolute)

参照物寻找的流程,从父级标签开始寻找,寻找是否定位效果的父标签.如果找到就以当前的这个父级为参照物;如果没打到就继续向上寻找,寻找父级的父级,如果有开启定位效果,就以父级的父级为参照物,如果一直没找到,就以body为参照物进行定位.如果上几级都开启了定位效果,那么就找最近的一个父级为参照物,不继续向上寻找

绝对定位会脱离当前的层级

position:absolute;

left:20px;

top:20px;

4.清除浮动

清除浮动这个效果只会作用你要改变其位置这个标签上

/* clear:left; */

清除前:

清除后:

5.表单的操作

<form action=" " method=" "></form>

action你要去往的网址

method提交内容的方法

请求方法:get 铭文

post 密文(二进制的形式)

默认的提交方式是get

占位符(placeholder)

多用于一些输入框,作为提示的作用

<input type="text" name="username" placeholder="占位符"/>

密码输入框

输入的信息以圆点的形式显示在密码框中

<input type="password" name="pwd" />

文件的输入框

<input type="file" name="" />

name一般写文件的名字

数字的输入框

<input type="number" max="15" min="-10" step="5" />

step每次增加或减少的值

大文本输入框

可以用鼠标拉缩文本的大小

<textarea></textarea>

单选框

只能进行单个选择

男<input type="radio" name=" " value="男" />

复选框

能够选择几个

你喜好的类型<br />

男<input type="checkbox" name="sex" value="nan"><br />

女<input type="checkbox" name="sex" value="nv"><br />

选择器

<select name="">

<option value="bj">北京</option>

<option value="sh">上海</option>

<option value="wh">武汉</option>

</select>

隐藏提交

<input type="hidden" name="hidden" value="" />

在浏览器中看不见任何按钮

onclick点击按钮,触发事件

<input type="button" onclick="alert('你点到我了')" value="你点我啊" />

提交按钮

<input type="submit" value="提交" />

6.经纬度的查询

<form action="http://api.map.baidu.com/place/v2/search" method="get">

搜索名称：<input type="text" name="query" /><br/>

区域：<input type="text" name="region" /><br />

返回数据的类型：

<select name="output">

<option value="json">json</option>

<option value="xml">xml</option>

</select>

<!--隐藏提交用户的ID-->

<input type="hidden" name="ak" value="6E823f587c95f0148c19993539b99295" />

<br />

<input type="submit" value="搜索">

</form>