结构化表单布局

<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. JavaScript原生折叠扩展收缩菜单带缓冲动画

    JavaScript原生折叠扩展收缩菜单带缓冲动画 @落雨 <div id="div_two" style="display: none;"> &l ...

  2. Http Module 介绍

    引言 Http 请求处理流程 和 Http Handler 介绍 这两篇文章里,我们首先了解了Http请求在服务器端的处理流程,随后我们知道Http请求最终会由实现了IHttpHandler接口的类进 ...

  3. Sqli-labs less 44

    Less-44 本关是基于盲注的,这里盲注主要是要没有报错信息,所以要采用盲注.这关与42关的区别就在于没有报错信息,同时,我们使用同样方式的payload: 登录 username:admin Pa ...

  4. MJRefresh插件引起的错误

    添加的头部或者尾部刷新,离开这个界面的时候需要移除 - (void)dealloc {    [_tableView removeHeader];} 不同版本的处理的方式不同 报的错误: 类的一个实例 ...

  5. POJ 1477

    #include <iostream> #define MAXN 100 using namespace std; int _[MAXN]; int main() { //freopen( ...

  6. HDU 1428 漫步校园（记忆化搜索，BFS， DFS）

    漫步校园 http://acm.hdu.edu.cn/showproblem.php?pid=1428 Problem Description LL最近沉迷于AC不能自拔,每天寝室.机房两点一线.由于 ...

  7. Visual Studio 自定义控件不显示在工具箱

    工具＝>选项＝>Windows窗体设计器＝>常规＝>AutoToolBoxPopulate＝>True

  8. JSTL Tag学习笔记(一)之<c: />

    注:本文中的例子主要来自http://www.tutorialspoint.com/jsp/jsp_standard_tag_library.htm.  ======================= ...

  9. Tomcat打印运行时日志（控制台），访问日志，启动日志

    1.sh catlina.sh run以控制台形式输出 2.sever.xml.配置acesslog,设置访问日志输出 Tomcat的访问日志是靠org.apache.catalina.valves. ...

  10. Log4J入门教程（一） 入门例程

    Log4J的入门简介学习 简介: Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务器.NT的事件记录器.U ...