马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
标准的选择器不能格式化一个元素内容的第一个字母或者第一行,而伪元素选择器能实现
关于表单,很经常使用。可是在webstandard建站的时分,他的排版常常让人忘记,到了真正用到的时分就发明让人头疼,固然我也碰到过。我如今要先容一个用<fieldset></label>标签制造大度并且详细亲和力的表单的办法。
基础的xhtml
<h3>已注册用户登录</h3>
<formaction=""method="post"name="apLogin"id="apLogin">
<fieldset>
<legend>用户登录</legend>
<div>
<labelfor="Name">用户名</label>
<inputtype="text"name="Name"id="Name"size="18"maxlength="30"/><br/>
</div>
<div>
<labelfor="password">暗码</label>
<inputtype="password"name="password"id="password"size="18"maxlength="15"/><br/>
</div>
<divclass="cookiechk">
<label><inputtype="checkbox"name="CookieYN"id="CookieYN"value="1"/><ahref="#"title="选择是不是纪录您的信息">记着我</a></label>
<inputname="login791"type="submit"class="buttom"value="登录"/>
</div>
<divclass="forgotpass"><ahref="#">您健忘暗码?</a></div>
</fieldset>
</form>
看了代码,发明标单形貌笔墨都在<label></label>中,只需让<label></label>标签浮动左对齐,fieldset包括的<div>扫除浮动,就能够完成我们罕见的那类结构。
上面是基础的CSS:
fieldsetlabel{
float:left;
width:120px;
text-align:right;
padding:4px;
margin:1px;
}
fieldsetdiv{
clear:left;
margin-bottom:2px;
}
交互部分的计划
交互计划,亲和力,用户体验,这些常常挂在计划师嘴边的名词却是是做甚么的?我们无妨来实验一下!
1、表单内容计划公道性,这里先容的是帐户上岸的交互界面,固然包容已注册和新用户两种人群,我们就计划出两个选择。
2、表单界面计划的亲和力,结构,色彩,字体,笔墨巨细,行初等要素。我利用了
字体:Arial,Helvetica,sans-serif
字体巨细:12px14px
色彩:#666666#1E7ACE#000000淡兰色,灰色,玄色给用户庄重平安的感到
3、内容细节,好比纪录用户信息,需要的提示。
就如许换位思索一下用户的需求,就可以做到基础的亲和力,失掉对照好的用户体验!要作到更完美的话,你就必要往看看MSNGoogle等外洋年夜型交互网站是怎样做的了
</p>
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。 |