请选择 进入手机版 | 继续访问电脑版

01BIM社区

 找回密码
 立即注册

扫一扫,访问微社区

查看: 512|回复: 1

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

[复制链接]

111

主题

232

帖子

930

积分

高级会员

Rank: 4

积分
930
发表于 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>

45.jpg
回复

使用道具 举报

111

主题

232

帖子

930

积分

高级会员

Rank: 4

积分
930
 楼主| 发表于 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>

46.jpg
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|01BIM社区 - 最专业的BIM技术交流平台 ( 渝ICP备15000873号 )

GMT+8, 2018-12-19 07:13 , Processed in 0.071715 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表