HTML学习心得——如何用CSS控制表单样式
本帖最后由 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 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>
页:
[1]