表格的CSS设计

最新推荐文章于 2025-05-20 08:38:41 发布

翻译最新推荐文章于 2025-05-20 08:38:41 发布 · 645 阅读

文章标签：

#CSS表格 #HTML5

CSS 专栏收录该内容

5 篇文章

订阅专栏

<!--
表格的CSS设计
version:01
-->
<!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>表格</title>
<style>
html,body{
	height:100%;
}
html{
	overflow-y:scroll;
	background:url(image/bg-pattern.jpg) center;
}
body{
	font-family:Georgia, "Times New Roman", Times, serif;
	background:url(image/bg.jpg) no-repeat center;
}
#reg{
	position:absolute;
	top:50%;
	left:50%;
	width:500px;
	min-height:390px;
	margin-top:-1*390px/2;
	margin-left:-1*500px/2;
	border:1px solid #dcdcdc;
	background:#f2f2f2;
}
#reg h2{
	border-bottom:1px solid #ddd;
	text-shadow:1px 1px #fff;
}
#reg label{
	display:block;
}
#reg input:not([type=checkbox]){
	width:15em;
	border:1px solid #cdcdcd;
	padding:1em 0.5em 1em 2.5em;
}
#reg input:not([type=checkbox]):focus{
	width:17em;
	background-color:#fff;
	border-color:#7ccbe8;
}
#accept label{
	display:inline;
}
#accept_terms{
	margin-left:-1px;
}
</style>
</head>

<body>
  <div id="reg">
    <h2 title="注册会员">Registration</h2>
    <form id="reg_form" action="#" method="post">
    	<p>
        	<label for="u_name">名字</label>
            <input id="u_name" name="u_name" type="text" placeholder="名字" required />
        </p>
        <p>
        	<label for="u_phone">电话号码</label>
            <input id="u_phone" name="u_phone" type="tel" placeholder="电话号码" required />
        </p>
        <p>
        	<label for="u_email">电子邮件</label>
            <input id="u_email" name="u_email" type="email" placeholder="电子邮件" required />
        </p>
        <p>
        	<label for="u_site">网站</label>
            <input id="u_site" name="u_site" type="url" placeholder="网站" />
        </p>
        <p>
        	<label for="u_pass">密码</label>
            <input id="u_pass" name="u_pass" type="password" placeholder="密码" required />
        </p>
        <p id="accept">
        	<input id="accept_terms" name="accept_terms" type="checkbox" />
            <label for="accept_terms">
            	<strong>
                	<a href="#" rel="external" target="_blank">服务使用条款</a>我同意
                </strong>
            </label>
        </p>
        <p id="add_count">
        	<button id="reg_new" type="submit" title="加入会员">+</button>
        </p>
    </form>
  </div>
</body>
</html>

：没有附脚本代码