|
购物专题 | 基金专题 | 性专题 | 饮食专题 | 教育专题 | 生活大参考 | 园林资讯 | 园艺库 | 健康专题 | |
| 论文专题 | 家庭养花 | 园林景观 | 盆景奇石 | 激情图库 | 农业资料库 | 园林古建 | 英文站 | 花卉栽培 |
我们在进行CSS网页布局的时候，常常会遇到下拉列表select，我们可以应用CSS对表单的元素进行控制，可是下拉列表select的样式该如何设置呢？
我们来看看下面的xhtml代码，这是一个典型的下拉列表select：
<select>
<option>我爱CSS</option>
<option>Div+CSS教程</option>
<option>CSS布局实例</option>
<option>CSS2.0教程</option>
<option>CSS在线手册</option>
<option>Web标准</option>
<option>XHTML教程</option>
</select>
我们再来看看控制它的CSS代码：
div {
border:1px solid #C0C0C0;
width:183px;
height:18px;
clip:rect(0px,18px,22px,0px);
overflow:hidden;
}
select {
position:relative;
left:-2px;
top:-2px;
font-size:12px;
width:185px;
line-height:18px;border:0px;
color:#909993;
}
完整示例代码如下：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.it130.cn</title>
<style type="text/css">
<!--
div {
border:1px solid #c00;
width:123px;
height:18px;
clip:rect(0px,18px,22px,0px);
overflow:hidden;
}
select {
position:relative;
left:-2px;
top:-2px;
font-size:12px;
width:125px;
line-height:18px;border:0px;
color:#909993;
}
-->
</style>
</head>
<body>
<div>
<select>
<option>我爱CSS</option>
<option>Div+CSS教程</option>
<option>CSS布局实例</option>
<option>CSS2.0教程</option>
<option>CSS在线手册</option>
<option>Web标准</option>
<option>XHTML教程</option>
</select>
</div>
</body>
</html>
有关更多的css教程，请及时访问我们的网站http://www.it130.cn，我们会不断的更新。
浙ICP备 ：07003766号 Copyright © 2001-2007 JUBAO163,All rights reserved. |
