重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
尖角在上面
成都创新互联公司服务项目包括和平网站建设、和平网站制作、和平网页制作以及和平网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,和平网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到和平省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
代码:
html
head
title尖角div/title
style type="text/css"
#top
{
width:400px;
height:250px;
border:3px solid; /* 边框宽度为3px */
position:relative;
}
.sp1,.sp2
{
display:block;
height:0px;
width:0px;
position:absolute;
font-size:0;
line-height:0;
}
.sp1
{
top:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */
left:40px; /* 它来确定尖角的位置 */
border-top:0px;
border-bottom:6px solid black; /* 注意颜色的变化 */
border-right:6px solid white;
border-left:6px solid white;
}
.sp2
{
top:6px; /* 是自身边框宽度的2倍 */
left:-3px; /* 是自身边框宽度的-1倍 */
border-top:0px;
border-bottom:3px solid white;
border-right:3px solid black;
border-left:3px solid black;
}
/style
/head
body
div id="top"
span class="sp1"
span class="sp2"/span
/span
/div
/body
/html
尖角在下面
代码:
html
head
title尖角div/title
style type="text/css"
#bottom
{
width:400px;
height:250px;
border:3px solid; /* 边框宽度为3px */
position:relative;
}
.sp1,.sp2
{
display:block;
height:0px;
width:0px;
position:absolute;
font-size:0;
line-height:0;
}
.sp1
{
bottom:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */
left:40px; /* 它来确定尖角的位置 */
border-bottom:0px;
border-top:6px solid black; /* 注意颜色的变化 */
border-right:6px solid white;
border-left:6px solid white;
}
.sp2
{
bottom:6px; /* 是自身边框宽度的2倍 */
left:-3px; /* 是自身边框宽度的-1倍 */
border-bottom:0px;
border-top:3px solid white;
border-right:3px solid black;
border-left:3px solid black;
}
/style
/head
body
div id="bottom"
span class="sp1"
span class="sp2"/span
/span
/div
/body
/html
尖角在左边
代码:
html
head
title尖角div/title
style type="text/css"
#left
{
width:400px;
height:250px;
border:3px solid; /* 边框宽度为3px */
position:relative;
}
.sp1,.sp2
{
display:block;
height:0px;
width:0px;
position:absolute;
font-size:0;
line-height:0;
}
.sp1
{
left:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */
top:40px; /* 它来确定尖角的位置 */
border-left:0px;
border-top:6px solid white; /* 注意颜色的变化 */
border-right:6px solid black;
border-bottom:6px solid white;
}
.sp2
{
left:6px; /* 是自身边框宽度的2倍 */
top:-3px; /* 是自身边框宽度的-1倍 */
border-left:0px;
border-top:3px solid black;
border-right:3px solid white;
border-bottom:3px solid black;
}
/style
/head
body
div id="left"
span class="sp1"
span class="sp2"/span
/span
/div
/body
/html
尖角在右边
代码:
html
head
title尖角div/title
style type="text/css"
#right
{
width:400px;
height:250px;
border:3px solid; /* 边框宽度为3px */
position:relative;
}
.sp1,.sp2
{
display:block;
height:0px;
width:0px;
position:absolute;
font-size:0;
line-height:0;
}
.sp1
{
right:-9px; /* 它的绝对值加上span的边框宽度等于div边框宽度的5倍 */
top:40px; /* 它来确定尖角的位置 */
border-right:0px;
border-top:6px solid white; /* 注意颜色的变化 */
border-bottom:6px solid white;
border-left:6px solid black;
}
.sp2
{
right:6px; /* 是自身边框宽度的2倍 */
top:-3px; /* 是自身边框宽度的-1倍 */
border-right:0px;
border-top:3px solid black;
border-bottom:3px solid black;
border-left:3px solid white;
}
/style
/head
body
div id="right"
span class="sp1"
span class="sp2"/span
/span
/div
/body
/html
用CSS定位的方法
css代码
.caption{width:100%;height:180px;background-color:#000;opacity:.6;position:realtive;}
.triangle{display :block;width:20px;height:20px;background:url(三角形图片路径) no-repeat;position:absolute;left:200px;top:0;}
html代码
div class="caption"span class="triangle"/span/div
是的
一、前言
前3篇文章实际都是为本文做铺垫的,如果以下棋表示,前三篇是普通走棋,本篇是将军!
目前市面上有不少表单验证插件,看似强大,实在糟糕!
总结下,有以下一些问题:
过多干预
包括:改变了表单元素UI, 为表单元素绑定过多事件等
布局等限制
包括:需要特定结构的布局,需要特定的类名或者ID
学习成本
包括:N多元作者自定义的属性,或者自定义的特定的数据结构
可用性
当JS出现错误的时候而无法正常运作的时候,验证就是聋子的耳朵——摆设,即使在现代浏览器下也是如此。
面向未来的表单验证
验证驱动
验证信息HTML驱动,例如HTML5中required, pattern, multiple等
验证形式
非即时响应,submit验证,如Chrome浏览器的处理;或者弱即时响应,如FireFox浏览器仅仅红色外发光。
验证交互
浮动形式,尖角指示。
换言之,所谓面向未来的表单验证,是遵循W3C HTML5规范的表单验证,我们可以从目前领先的浏览器中看到大致雏形。而本文所有展示的html5Validate表单验证插件,就是基于这个未来设计的。
二、html5Validate概述
html5Validate插件的验证机制、交互形式甚至形式与Chrome浏览器HTML5表单内置验证走的很近。在使用的时候,就是写写原生的HTML5表单代码。我只想说:走阳光大道和过独木桥的感觉是完全不一样的。
举个简单例子,一个邮箱验证,HTML5代码表示应该是下面这个样子:
input type="email" required
好巧的是,使用html5Validate进行表单验证的时候,也是使用上面这段HTML代码!
类似下面的绑定:
$("form").html5Validate();
于是,您在提交表单的时候会(在各个浏览器下)看到这样子的提示:
跟Chrome浏览器下的提示文字近似:
html5Validate支持我所知的HTML5验证相关的东西,如type="email", type="number", type="tel", type="url", step, min, max, required, pattern, multiple等,并有一些本地化扩展,如增加了type="zipcode"邮编等,支持type="hidden"的完整验证(HTML5中是忽略的),支持多type共存,例如type="email|tel", 可以让文本框输入邮箱或者手机号码。
type="date", type="hour", type="password"等因为不同网站规则不一样,因此,没有放在html5Validate中,不过,您可以很简单地进行扩展,使您的项目支持之,这个后面会介绍(参见 part 9-4)。
为了满足实际开发需求,额外增加了四个自定义属性值:data-key, data-target, data-min, data-max. 具体何用,下面会详细讲解。
支持自动的全角转半角。
注意:type="submit", type="reset", type="file", type="image"以及disabled的表单元素没有验证性可言,因此,下面所说的表单元素,并不包括他们。
兼容性
html5Validate通过jQuery1.4+测试,支持正常IE6-IE10浏览器,FireFox, Chrome等现代浏览器。