effet de formulaire d'écriture CSS-tutoriel CSS-php.cn

effet de formulaire d'écriture CSS

墨辰丷

Libérer： 2018-05-09 17:03:25

original

1478 Les gens l'ont consulté

Cet article présente principalement comment utiliser p+css pour obtenir des effets de formulaire, implémentation pure de p+css, vous pouvez vous y référer.

Le code est le suivant :

<!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>by 阿会楠 2008-12-4</title> 
<script language="javascript" type="text/javascript"> 
//js辅助 
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:#cccccc; 
    height:500px; 
} 
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:400px; 
    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 p{ 
    padding-top:3px; 
} 
</style> 
</head> 

<body> 
<p id="reg"> 
<h6>欢迎您注册玩具购会员！</h6> 
<p 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> 
</p> 
<p id="content"> 
<form> 
<dl> 
    <dt>用户名</dt> 
<dd><p><input type="text" /></p></dd> 
<dt>密码</dt> 
<dd><p><input type="text" /></p></dd> 
<dt>确认密码</dt> 
<dd><p><input type="text" /></p></dd> 
<dt></dt> 
<dd><input type="button" value="注册" /></dd> 
</dl> 
    </form> 
</p> 
</p> 
</body> 
</html>

Copier après la connexion

Recommandations associées :

p Cinq conseils pour la mise en page des formulaires CSS_html/css_WEB-ITnose

Cinq conseils pour la mise en page des formulaires DIV+CSS_html/css_WEB-ITnose

Le formulaire thinkphp télécharge les fichiers et enregistre le chemin du fichier dans la base de données

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!