Home > Article > Web Front-end > css writing form effect

css writing form effect

墨辰丷Original: 2018-05-09 17:03:251439browse

This article mainly introduces how to use p css to achieve form effects, pure p css implementation, you can refer to it.

The code is as follows:

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

Related recommendations:

p Five tips for css form layout_html/css_WEB-ITnose

DIV Five tips for css form layout_html/css_WEB-ITnose

thinkphp form uploads files and saves the file path to the database

The above is the detailed content of css writing form effect. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to write couplet advertising code using cssNext article：How to write couplet advertising code using css

See more

css writing form effect

Related articles