HTML学习心得——如何用CSS控制表单样式

tzbm123456 · 发表于 2018-4-19 11:24:22

本帖最后由 tzbm123456 于 2018-4-19 11:27 编辑

HTML学习心得——如何用CSS控制表单样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
      <style>
            p {
                     border:2px solid red;
                     border-radius: 25px;
                     width:200px;
                     text-align:center;
                     padding:20px 0;
            }
            .ArchInputText {
                     border:2px solid red;
                     border-radius:20px;
                     width:150px;
                     text-align:center;
                     padding:20PX 0;
                     background:#E8E8E8;
            }
      </style>
</head>
<body>

<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
      <form>
            姓名：<input type="text" class="ArchInputText" value="" placeholder="请输入员工姓名......" /><br/>
            姓别：<input type="text" class="ArchInputText" value="" placeholder="请输入员工姓别......" /><br/>
            年龄：<input type="text" class="ArchInputText" value="" placeholder="请输入员工年龄....." /><br/>
      </form>

</body>
</html>

tzbm123456 · 发表于 2018-4-19 11:25:04

本帖最后由 tzbm123456 于 2018-4-19 14:29 编辑

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {
background: #cccccc;
}

p {
border:2px solid black;
border-radius: 25px;
text-align:center;
padding:20px 0;
}
.ArchForm {
font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
font-size: 14px;
border-bottom: 2px solid black;
padding-bottom: 10px;
}
.ArchInputText {
font-size:14px;
border:2px solid black;
width:110px;
text-align:center;
padding:2PX 0;
background:#E8E8E8;
margin: 2px 0;
}
label {
color: #000000;
text-shadow: 1px 1px 2px #000000;
}
</style>
</head>
<body>

<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<form class="ArchForm">
<label>姓名1：<input type="text" class="ArchInputText" value="" placeholder="请输入员工姓名......" /></label>
<label>姓名2：<input type="text" class="ArchInputText" value="" placeholder="请输入员工姓名......" /></label><br/>
<label>姓别1：<input type="text" class="ArchInputText" value="" placeholder="请输入员工姓别......" /></label>
<label>姓别2：<input type="text" class="ArchInputText" value="" placeholder="请输入员工姓别......" /></label><br/>
<label>年龄1：<input type="text" class="ArchInputText" value="" placeholder="请输入员工年龄....." /></label>
<label>年龄2：<input type="text" class="ArchInputText" value="" placeholder="请输入员工年龄....." /></label><br/>
</form>

</body>
</html>

		自动登录	找回密码
密码			立即注册