我永远不会试图去战胜一个纯傻逼,因为他会用他丰富的经验来打败我...

分类目录
2月 06

HTML表单内容

表单可以用来在网页中发送数据,特别是经常被用在联系表单——用户输入信息然后发送到Email中,就像HTMLDog的这个连接页面。
表单本身是没有什么用的。这需要编一个程序来处理输入表单中的数据。这也超出了本站指南的范围。如果使用网络服务器来放置HTML,你能够自助地找到一些简单的教程,开发一个服务器端的程序使一个发送到Email的表单工作。
实际用在HTML中的标签有form、 input、 textarea、 select和option。
表单标签form定义的表单里头,必须有行为属性action,它告诉表单当提交的时候将内容发往何处。
可选的方法属性method告诉表单数据将怎样发送,有get(默认的)和post两个值。常用到的是设置post值,它可以隐藏信息(get的信息会暴露在URL中)。
所以一个表单元素看起来是这样子的:

input标签是表单世界中的“老大”。有10种形式,概括如下:
是标准的文本框。它可以有一个值属性value,用来设置文本框里的默认文本。
像文本框一样,但是会以星号代替用户所输入的实际字符。
是复选框,用户可以快速的选择或者不选一个条目。它可以有一个预选属性checked,像这样的格式.
与复选框相似,但是用户只可在一个组中选择一个单选按钮。它也有一个预选属性checked,使用方法跟复选框一样。
是展示你电脑上的文件的一个区域,就像你在一个软件中打开或者保存一个文档一样。
是一个被点击后提交表单的按钮。你可以用值属性value来控制按钮上显示的文本(下面的button和reset类型也可以这样,稍后介绍),如下: .
以图像代替按钮文本,src属性是必须的,像img标签一样。
是一个如果没有其他代码的话什么都不做的按钮。
是一个点击后会重置表单内容的按钮。
不会显示任何东西,它用来传输诸如用户正在用的页面的名字或者Email地址等表单必须传输的东西。
注意输入标签input也是用“/>”自关闭的。
多行文本输入框标签textarea基本上就是一个比较大的文本框。它必须有行属性rows和列属性cols,用法像这样:

选定标签select与选项标签option一起可以制作一个下拉选框。是这样工作的:

当表单被提交时,被选中选项的值将被发送。
与复选框和单选按钮的预选属性checked一样,选项标签option也有一个预选属性selected,它可以用在这样的格式中:
上述的标签中在网页中看起来都不错,但是,如果你有一个程序来处理这个表单,这些标签都不起作用。这是因为,表单字段需要名称。所以所有的字段中都需要增加名称属性name,比如
一个表单看起来应该像下面这样(注意:这个表单不会工作,除非有一个用来提交数据的“contactus.htm”的文件,它位于表单标签form的行为属性action中。)

2016-04-01 18:10

2月 06

HTML5 实现QQ聊天气泡效果

步骤1:布局
消息采用div+float布局,每条消息用一个DIV标签包裹,里面再放两个DIV分别用来包裹用户图标和用户消息内容。
左侧消息,先清除浮动,然后设置 float:left,这样用户图标和消息内容就可以显示在同一行了,其中用户图标在左边,消息内容紧邻着用户图标。
右侧消息,同样先清除浮动,然后设置 float:right,这样用户图标和消息显示在同一行了,其中图标在最右边,图标左侧是消息。

步骤2:设置圆角矩形
border-radius:7px;

步骤3:三角形箭头
将DIV的宽度和高度设置为0,设置边框宽度,可以使其表现出一个由四个三角形组成的矩形,每个三角形的颜色和大小可以通过设置border宽度和颜色设置。
这里将其中三个三角形颜色设置为透明,只留下一个三角形可见。
.triangle{
width: 0px;
height: 0px;
border-width: 15px;
border-style: solid;
border-color: red blue green gold;
}
.triangle{
width: 0px;
height: 0px;
border-width: 15px;
border-style: solid;
border-color: transparent transparent transparent red;
}

关键点4:三角形跟随矩形框
使用相对定位,可以使三角形始终固定在矩形框的边上。
position:relative;

全部代码:



hello, man!

hello world