论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

DOV CSS表单:超炫的单选框与复选框效果!-Adam

文章类别:div+css布局 | 发表日期:2008-9-26 11:27:44

  在DIV CSS构建的网页中,表单一直是一个比较头疼的问题,表单的布局与样式的定义还需要更多的学习与思考,今天介绍一款CSS表单,超炫的单选框与复选框效果。非常棒的感觉,希望对大家以后的布局有参考意义。
  我们看正常情况下此表单的效果:


  我们看经过CSS样式定义后的效果:


  实现这样的效果,作者除了对表单元素进行样式定义,还用JS对其进行了控制。

  我们看下面的CSS代码:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
/* Off state for a ARC checkbox */
#labcontent .checkboxOff {
display: inline;
margin: 0px;
padding: 2px; /* NS 6 problem */
padding-left: 20px;
color: #666;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
background-image: url(checkbox_off.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
}
/* On state for a ARC checkbox */
#labcontent .checkboxOn {
display: inline;
margin: 0px;
padding: 2px; /* NS 6 problem */
padding-left: 20px;
color: #000;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
background-image: url(checkbox_on.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
}


/* Off state for a ARC checkbox */
#labcontent .altCheckboxOff {
display: inline;
padding: 20px 2px; /* NS 6 problem */
padding-left: 70px;
color: #666;
line-height: 60px;
font-family: "Courier New", Courier, mono;
font-size: 1.2em;
background-image: url(alt_checkbox_off.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
cursor: pointer;
}
/* On state for a ARC checkbox */
#labcontent .altCheckboxOn {
display: inline;
padding: 20px 2px; /* NS 6 problem */
padding-left: 70px;
color: #000;
line-height: 60px;
font-family: "Courier New", Courier, mono;
font-size: 1.2em;
font-weight: bold;
background-image: url(alt_checkbox_on.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
}


/* Off state for a ARC radio button */
.radioOff {
display: inline;
margin: 0px;
padding: 2px;
padding-left: 20px;
color: #666;
font: .8em/16px Verdana,Arial,Helvetica;
background: transparent url(off.gif) no-repeat 0% 50%;
}
/* On state for a ARC radio button */
.radioOn {
display: inline;
margin: 0px;
padding: 2px; /* NS 6 problem */
padding-left: 20px;
color: #000;
font: .8em/16px Verdana,Arial,Helvetica;
background: transparent url(on.gif) no-repeat 0% 50%;
}
/* use CSS to full effect with hover states. Ohhh, perty! */
.radioOn:hover {
background-image: url(on_hover.gif);
}
.radioOff:hover {
color: #333 !important;
background-image: url(off_hover.gif);
}

/* Alternative Off state for a ARC radio button */
.altRadioOff {
display: inline;
margin: 0px;
padding: 2px;
padding-left: 20px;
color: #000;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-image: url(alt_off.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
cursor: pointer;
}
/* Alternative On state for a ARC radio button */
.altRadioOn {
display: inline;
margin: 0px;
padding: 2px; /* NS 6 problem */
padding-left: 20px;
line-height: 16px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
background-image: url(alt_on.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
border: 0px;
cursor: pointer;
text-decoration: underline;
}

  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058