《十天学会web标准(div+css)》第9天：CSS表单设计(6)

</p>

<p>

</select>

</p>

<div class="tip">看看谁能把我挡着</div>

</body>

</html>

在三个浏览器下显示都不尽相同，所以最好是寻求其它的办法或者使用默认样式了。基中IE6下被遮挡可以把浮动层用iframe，因下拉列表不会跑到 iframe上边。有更高美化需求的可以用div模拟来代替下拉列表，但这种方法实现起来麻烦，由于时间关系，本节不过多的介绍这种方法，感兴趣的朋友可以参考http://www.aa25.cn/css_example/541.shtml，进一步的学习。

四、用label标签提升用户体验

label标签常常被大家忽略了，合理利用会使页面的用户体验得到提升，我们可以对表单的说明文字使用label标签，这样当用户点击文字时，光标就定位到表单上了

如上图，当鼠标点击姓名文字时，光标就会定位到后边的文本框上了；点击男女文字也会选中相应的选项；同理，复选框和文本域也是一样的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style type="text/css"> 
</style> 
</head> 
<body> 
<p> 
<label for
	            
                       共 8页: 上一页12345678下一页
                

	
	  
	    标签: 
        div+css
        
        十天学会web标准
        
        web标准
        
        div+css教程
        
        十天学会div+css
        
        十天 学习 divcss

首页

《十天学会web标准(div+css)》第9天：CSS表单设计(6)

四、用label标签提升用户体验

猜您也喜欢...

热门TagS