纯CSS使用DT、DD实现漂亮的表单效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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=utf-8" /> 
<title>CSS表单</title> 
<script language="javascript" type="text/javascript"> 
window.onload = function(){ 
    var initleft = 200;// 初始化定位 
    var lis = document.getElementById("menu").getElementsByTagName("li"); 
    for(var i = 0;i < lis.length;i++){ 
        lis[i].style.left = initleft + i*100 + "px"; 
    } 
     
} 
</script> 
<style type="text/css"> 
*{ 
    font-size:12px; 
    padding:0; 
    margin:0; 
} 
body{ 
    text-align:center; 
} 
#reg{ 
    margin:0 auto; 
    width:600px; 
    background:#eee; 
    height:360px; 
} 
h6{ 
    background:black; 
    height:28px; 
    color:white; 
    text-align:left; 
    line-height:28px; 
    padding-left:3px; 
} 
#menu{ 
    height:30px; 
    text-align:left; 
    padding-top:15px; 
    padding-left:10px; 
    overflow:hidden; 
} 
li{ 
    list-style-type:none; 
} 
#menu li{ 
     
    float:left; 
    color:green; 
    height:30px; 
    padding:0 5px; 
    line-height:30px; 
    margin-left:20px; 
    position:absolute; 
} 
.current{ 
    border:1px solid blue; 
    border-bottom:0; 
    background:white; 
} 
#content{ 
    border:1px solid blue; 
    height:256px; 
    margin:8px; 
    margin-top:0; 
    background:white; 
    padding:10px; 
     
} 
#content dl{ 
    border-top:1px solid #ccc; 
    border-left:1px solid #ccc; 
    width:560px; 
    height:116px; 
} 
#content dl dd,#content dl dt{ 
    border-right:1px solid #cccccc; 
    border-bottom:1px solid #cccccc; 
    height:28px; 
} 
#content dl dt{ 
    width:200px; 
    float:left; 
    text-align:right; 
    padding-right:3px; 
    background:#F0F0F0; 
    line-height:28px; 
} 
#content dl dd{ 
    width:352px; 
    float:left; 
    text-align:left; 
    padding-left:3px; 
} 
/*兼容ie 6.0*/ 
#content dl dd div{ 
    padding-top:3px; 
} 
</style> 
</head>

<body> 
<div id="reg"> 
<h6>欢迎注册会员！</h6> 
<div id="menubox"> 
<ul id="menu"> 
<li style="left:200px;">您的注册信息：</li> 
<li class="current" style="left:300px;">选择用户名：</li> 
<li style="left:400px;">用户类型：</li> 
<li style="left:500px;">详细资料：</li> 
</ul> 
</div> 
<div id="content"> 
<form> 
<dl> 
    <dt>用户名：</dt> 
<dd><div><input type="text" /></div></dd> 
<dt>您的密码：</dt> 
<dd><div><input type="text" /></div></dd> 
<dt>确认密码：</dt> 
<dd><div><input type="text" /></div></dd> 
<dt></dt> 
<dd><input type="button" value="注册" /></dd> 
</dl> 
    </form> 
</div> 
</div> 
</body> 
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

纯CSS使用DT、DD实现漂亮的表单效果

分类

表单按钮

描述

这段CSS代码不错，虽然现在CSS已经盛行了，但是用CSS布局表格类的东西还是有不少朋友摸不着头绪，这里向大家介绍一种常规的用CSS的DD/DT标签实现的表格效果，然后再加入你的表单元素，这样就完成一个比较不错的表单特效。