|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。
破洛洛文章简介:HTML5供应了一些新的元素可让我们不必JS轻松完成有用的web表单,CSS3供应了良多新的特征,这些特征同意完成新的计划效果(好比动画、突变等).
HTML5供应了一些新的元素可让我们不必JS轻松完成有用的web表单,CSS3供应了良多新的特征,这些特征同意完成新的计划效果(好比动画、突变等)。
这里做了一个基于HTML5和CSS3的登录表单。实例代码利用到HTML5供应的一些表单新特征,以是你必要利用撑持HTML5和CSS3的扫瞄器来检察。
HTML5代码:
<formid="login">
<h1>用户登录</h1>
<fieldsetid="inputs">
<inputid="username"type="text"placeholder="用户名"autofocusrequired>
<inputid="password"type="password"placeholder="暗码"required>
</fieldset>
<fieldsetid="actions">
<inputtype="submit"id="submit"value="登录">
<ahref="">健忘暗码?</a><ahref="">注册</a>
</fieldset>
</form>
上面是这里用到的几个HTML5属性在最新标准里的注释:
- placeholder–供应一种提醒(hint),形貌输出域所等候的值。(正文:placeholder属性合用于以下范例的<input>标签:text,search,url,telephone,email和password。)提醒(hint)会在输出域为空时显现呈现,会在输出域取得核心时消散:
- required–划定必需在提交之前填写输出域(不克不及为空)。(正文:required属性合用于以下范例的<input>标签:text,search,url,telephone,email,password,datepickers,number,checkbox,radio和file。)
- autofocus–当页面加载时,域主动地取得核心
- type=”password”–界说暗码字段。暗码字段中的字符会被掩码(显现为星号或原点)。
CSS3代码:
这个demo里用到了CSS3的暗影突变等效果。好比,上面的代码用来完成登录表单全部区块的box-shadow效果:
#login{
box-shadow:
002pxrgba(0,0,0,0.2),
01px1pxrgba(0,0,0,.2),
03px0#fff,04px0rgba(0,0,0,.2),
06px0#fff,
07px0rgba(0,0,0,.2);
}
</p>
你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。 |
|