结构化表单布局

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GBK" />

<title>选择符类型_标签选择符</title>

<style type="text/css">

    #regForm fieldset {

        padding:20px;;

        border:0;

        border-top:1px #d0d0bf solid;

    }

    #regForm legend {

        padding:0 10px;

        font-weight:bold;

    }

    #regForm .dataArea {

        padding:3px 0;

    }

    #regForm .frist {

        padding:8px 0 2px;

    }

    #regForm .subArea input {

        padding:1px 4px;

    }

    #regForm label {

        width:112px;

        text-align:right;

        float:left;

    }

</style>

</head>

<body>

    <form id="regForm">

        <fieldset>

            <legend>登陆信息</legend>

                <div class="dataArea frist">

                    <label for="username"> 用户 名 ： </label><input type="text" id="username" class="input" />

                </div>

                <div class="dataArea">

                    <label for="password"> 密 码 ： </label><input type="text" id="password" class="input" />

                </div>

                <div class="dataArea">

                    <label for="passwordVerify"> 确 认 密 码 ： </label><input type="text" id="passwordVerify" class="input" />

                </div>

        </fieldset>

        <fieldset>

            <legend>个人信息</legend>

                <div class="dataArea frist">

                    <label for="nickname"> 昵 称 ： </label><input type="text" id="nickname" />

                </div>

                <div class="dataArea">

                    <label for="email" class="hint"> 电子邮 件 ： </label><input type="text" id="email" />

                </div>

                <div class="subArea">

                    <input type="submit" value="注册 " /> <input type="button" value="返回" />

                </div>

        </fieldset>

    </form>

</body>

表单外边框设置

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GBK" />

<title>选择符类型_标签选择符</title>

<style type="text/css">

    Fieldset {

        Margin:0 0 10px 0;

        Padding: 5px;

        Border: 1px solid #333;

    }

    Legend {

        Background-color: #ddd;

        Margin:0;

        Padding: 5px;

        Border-style: solid;

        Border-width: 1px;

        Border-color: #fff #aaa #666 #fff;

    }

    Fieldset {

        Background: #ddd;

    }

</style>

</head>

<body>

    <form>

        <fieldset>

            <legend>登陆信息</legend>

        </fieldset>

     </form>

</body>

CSS构造表单的更多相关文章

  1. 26 , CSS 构造表单

    1. 表单标签使用 2. 下拉菜单背景 3. 滚动条的使用 4. 结构化表单布局 1 1 1 1. . . . 表单标签的使用 <label for=”name”>姓名: <inpu ...

  2. 纯CSS实现表单验证

    ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...

  3. （10）用css建立表单

    1.用css建立表单 本篇资料主要介绍使用css设置表单元素的方法. 表单是网页与用户交互所不可缺少的元素,表单是网页的访问者进行交互的接口,例如大家都常遇到的:网上注册.网上登录.网上交易.网上投票 ...

  4. 学习笔记 第十章 使用CSS美化表单

    第10章   使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1  表单的基本结构 表单包含多个标签,由很多控件组成 ...

  5. css中的单冒号和双冒号

    最近突然被别人问起css单冒号和双冒号有什么区别,答曰:"不知道". 虽然还在填坑中,但作为一个跨过了初级的FEer,感觉着实汗颜,刚好今天下午在搜别的问题的时候,突然看到一个对比 ...

  6. css表格表单和统筹

    css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...

  7. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  8. 应用Css美化表单

    原来的效果  美化之后的效果  实现代码 <style> .container { margin:0auto; width:620px; } fieldset { padding:18px ...

  9. CSS控制表单

    一个简单的网站注册页面制作. 创建CSS文件如下: @charset "utf-8"; /* CSS Document */ * { margin: 0px; padding: 0 ...

随机推荐

  1. SOA之（1）——SOA架构基础概念

    在深入探讨什么是面向服务的架构(SOA)之前,先建立一些基本的概念和术语的基本描述而非严格定义,所以也许有些定义在业内还存留争议,此处暂且忽略. 架构基础 技术架构(Technology Archit ...

  2. javascript 注意事项

    1.submit input 标签的 type里的submit是提交表单的按钮 提交时应注意 为 标签加上 “name=""”字段和form标签,才能达到想要的效果  2.正则表达 ...

  3. 历代诗词咏宁夏注释3----蔡升元:<题大清渠>

    题大清渠 蔡升元 为怜□□□□□,□□□□□□□. □□□□沙碛里,凿开峡口贺兰旁. 支分九堡通沟浍,鼎峙三渠并汉唐. 作吏尽如君任事,不难到处乐丰穰. 两渠中划大清渠,畚筑无劳民力纾.[1] 心画万 ...

  4. C# 工厂

    /// <summary> /// 创造实例 /// </summary> /// <typeparam name="T">类型</typ ...

  5. <Win32_1>深入浅出windows消息机制[转自crocodile_]

    上学期学习了Java ,感觉Java写一个窗口真心简单,很易上手,也就难怪很多开发人员选择Java作为自己的开发编程语言.但是由于自身对windows的热爱,让我觉得c.c++语言才是我亲睐的编程语言 ...

  6. Project Euler 106：Special subset sums: meta-testing 特殊的子集和：元检验

    Special subset sums: meta-testing Let S(A) represent the sum of elements in set A of size n. We shal ...

  7. 【Apache运维基础(2)】主配置文件说明

    ServerTokens OS 系统信息,在访问出错时出现;把OS改为Minor,就不显示系统信息 ServerSignature On 把On改为Off就连普通的系统都给隐藏起来;改为Email就会 ...

  8. (KEIL)MDK5安装与JLINK问题解决方法(支持代码自动补全)

    MDK V5在10月8日发布,昨天终于没忍住装上使用了一下,尝了尝鲜.   安装和破解的方法相信各位高手都不在话下,实在不会的可以参考keil4的安装步骤,keil5 和 keil4的安装没有的区别. ...

  9. Dire Wolf ---hdu5115（区间dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5115 题意:有一排狼,每只狼有一个伤害A,还有一个伤害B.杀死一只狼的时候,会受到这只狼的伤害A和这只 ...

  10. CodeForces484A——Bits(贪心算法)

    Bits Let's denote as the number of bits set ('1' bits) in the binary representation of the non-negat ...