Rumah >hujung hadapan web >tutorial css >css 编写表单效果
css 编写表单效果
- 墨辰丷asal
- 2018-05-09 17:03:251486semak imbas
本篇文章主要介绍如何使用p+css实现表单效果，纯p+css实现，大家可以参考下。
代码如下：
<!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>相关推荐：
p css表单布局的五个小技巧_html/css_WEB-ITnose
DIV+CSS表单布局的五个小技巧_html/css_WEB-ITnose
Atas ialah kandungan terperinci css 编写表单效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何用css写对联广告代码Artikel seterusnya：css实现图片切换效果