Heim > Artikel > Web-Frontend > CSS-Schreibformeffekt
CSS-Schreibformeffekt
- 墨辰丷Original
- 2018-05-09 17:03:251450Durchsuche
In diesem Artikel wird hauptsächlich die Verwendung von P + CSS zum Erzielen von Formeffekten vorgestellt. Die reine P + CSS-Implementierung kann darauf verwiesen werden.
Der Code lautet wie folgt:
<!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>Verwandte Empfehlungen:
p Fünf Tipps für das CSS-Formular „layout_html/css_WEB-ITnose“
Fünf Tipps für das DIV+CSS-Formular „layout_html/css_WEB-ITnose“
thinkphp Formular lädt Dateien hoch und speichert den Dateipfad in der Datenbank
Das obige ist der detaillierte Inhalt vonCSS-Schreibformeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So schreiben Sie Couplet-Werbecode mit CSSNächster Artikel：So schreiben Sie Couplet-Werbecode mit CSS