结构化表单布局

<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. POJ 1700 Crossing River (贪心)

    Crossing River Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9585 Accepted: 3622 Descri ...

  2. IOS 提交审核，遇到Missing Push Notification Entitlement 问题。

    貌似不影响提交........还是有人提交成了. 昨天晚上提交软件审核,遇到了Missing Push Notification Entitlement 的问题. 问题起因:这个版本我添加了PUSH推 ...

  3. visual studio 2012 Github

    前言 一直以来都想使用Git来管理自己平时积累的小代码,就是除了工作之外的代码了.有时候自己搞个小代码,在公司写了,就要通过U盘或者网盘等等一系列工具进行Copy,然后回家才能继续在原来的基础上作业. ...

  4. hadoop 2.0 native

    1.安装protobuf,参照http://wiki.apache.org/hadoop/HowToContribute 安装java模块 在java目录mvn install 2.配置protobu ...

  5. 关于playmaker play animation出现警告 The AnimationClip 'xxx' used by the Animati ...

    转载自网络: 出现这个提示: The AnimationClip 'xxx' used by the Animation component 'xxx' must be marked as Legac ...

  6. lintcode:Ugly Number I

    Ugly Number Write a program to check whether a given number is an ugly number`. Ugly numbers are pos ...

  7. Jlink更新新固件USB连接不上的问题

    采购新买了一个jlink,在调试过程中发现不能使用.拿到手后对jink上电以后,发现灯不亮,到网上查了一下估计是固件损坏的原因,经过一番摸索从新更新了固件,然后可以正常使用了,下面说一下步骤: 新版的 ...

  8. My SQL InnoDB 1217 - Cannot delete or update a parent row:aforeign key constraint fals

    InnoDB 允许有外键  MyISAM 不允许有外键 InnoDB修改成MyISAM 证明有外键 一张表如果有其他表的外键关联的是它  它也不能是MyISAM 来自为知笔记(Wiz)

  9. Struts2笔记——利用token防止表单重复提交

    在一些项目中经常会让用户提交表单,当用户点击按钮提交后,如果再次浏览器刷新,这就会造成表单重复提交,若是提交的内容上传至服务器并请求数据库保存,重复提交的表单可能会导致错误,然后跳转到错误界面,这是一 ...

  10. intellij idea搭建ssh开发框架之绑定数据源

    原文:intellij idea搭建ssh开发框架之绑定数据源 在intellij idea中绑定数据源并生成hibernate实体对象.在IDE中的右边找到Database标签. 点击弹出窗口中的图 ...