第九章：CSS表单设计

敖游
2015-12-23
来源：遨游建站

　　<!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">

　　.select { border:1px solid #f60; background:#FF9; height:30px;}

　　.tip { width:50px; border:1px solid #ccc; background:#fff; position:absolute; top:5px; left:70px; font-size:12px; height:100px; padding:5px;}

　　</style>

　　</head>

　　<body>

　　<p>请选择项目：</p>

　　<p>

　　<select name="select" id="select">

　　<option>请选择----------------</option>

　　<option>标准之路</option>

　　</select>

　　</p>

　　<div>看看谁能把我挡着</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="name">姓名：</label>

　　<input type="text" name="name" id="name" />

　　</p>

　　<p>性别：

　　<input type="radio" name="sex" id="male" value="radio" /><label for="male">男</label>

　　<input type="radio" name="sex" id="female" value="radio2" /><label for="female">女</label></p>

　　<p>爱好：

　　<input type="checkbox" name="music" id="music" /><label for="music">听音乐</label>

　　<input type="checkbox" name="web" id="web" /><label for="web">上网</label>

　　<input type="checkbox" name="book" id="book" /><label for="book">看书</label></p>

　　<p>

　　<label for="content">简历：</label>

　　<textarea name="content" id="content" cols="45" rows="5"></textarea>

　　</p>

　　<p>&nbsp;</p>

　　<p>&nbsp; </p>

　　</body>

　　</html>

　　提示：可以先修改部分代码后再运行



3  /  3
网页设计基础教程
阅读原文
阅读472
分享
写评论...