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

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 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>


页: [1]
查看完整版本: HTML学习心得——如何用CSS控制表单样式