结构化表单布局

<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. js java正则表达式替换手机号4-7位为星*号

    需求: 一个手机号13152461111,由于安全性,需要替换4-7位字符串为星号,为131****1111,那么有2中玩法,一种是前端隐藏,一种是后台隐藏. 1. 前台隐藏 <!DOCTYPE ...

  2. HackPorts – Mac OS X 渗透测试框架与工具

    HackPorts是一个OS X 下的一个渗透框架. HackPorts是一个“超级工程”,充分利用现有的代码移植工作,安全专业人员现在可以使用数以百计的渗透工具在Mac系统中,而不需要虚拟机. 工具 ...

  3. PC和移动端浏览器同步测试工具Browsersync使用介绍

    在移动端网页开发中,总是因为不方便调试,导致各种问题不容易被发现.但是现在有了Browsersync,一切都解决了. 不熟悉的同学可以看看Browsersync的官方网站Browsersync中文网. ...

  4. Effeckt.css项目：CSS交互动画应用集锦

    目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...

  5. Javascript引擎单线程机制及setTimeout执行原理说明

    setTimeout用法在实际项目中还是会时常遇到.比如浏览器会聪明的等到一个函数堆栈结束后才改变DOM,如果再这个函数堆栈中把页面背景先从白色设为红色,再设回白色,那么浏览器会认为DOM没有发生任何 ...

  6. javascript实现数据结构：线性表--线性链表（链式存储结构）

    上一节中, 线性表的顺序存储结构的特点是逻辑关系上相邻的两个元素在物理位置上也相邻,因此可以随机存取表中任一元素,它的存储位置可用一个简单,直观的公式来表示.然后,另一方面来看,这个特点也造成这种存储 ...

  7. 【☆】javascript数据类型拾遗

    一.Array对象 1.两个数组能用< > == ===做比较吗? 答:数组可以用> <进行矩阵比较,比如a=[1,2,3] b=[1,2,4],那么a<b,如果a的数值 ...

  8. Javascript里的那些距离们

    1.有滚动条的控件的距离: scrollTop和scrollLeft:分别指有滚动条的容器控件的滚动条的top和left:页面滚动条的通用取法:document.body.scrollTop(FF\C ...

  9. POJ 1759

    Garland Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 1236   Accepted: 547 Descriptio ...

  10. Eclipse 字体选择

    Windows下推荐使用Consolas Linux下推荐使用DejaVu Sans Mono, Website: http://dejavu-fonts.org/wiki/Main_PageDown ...