带来一篇用CSS制造具有亲和力的表单 password,standard,用户登录,legend,用户名

金色的骷髅 发表于 2015-1-16 00:14:09

带来一篇用CSS制造具有亲和力的表单

标准的选择器不能格式化一个元素内容的第一个字母或者第一行，而伪元素选择器能实现

　　关于表单，很经常使用。可是在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。

兰色精灵 发表于 2015-1-16 19:39:41