结构化表单布局

<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. sencha Touch 2.4 学习之 XTemplate模板

    XTemplate模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  2. DSP中的cmd文件

    一.CMD文件 链接命令文件(Link Command Files),以后缀.cmd结尾,简称CMD文件. CMD文件的两大功能是指示存储空间和分配段到存储空间. 在编写CMD文件时,主要采用MEMO ...

  3. ios 图片转视频

    转自:http://blog.iosxcode4.com/archives/160 用到的FrameWork有: MediaPlayer.framework,QuartzCore.framework, ...

  4. Unity3d之音效播放和调用手机震动

    http://blog.csdn.net/sunshine_1984/article/details/12943979 今天研究了下Unity3d音效播放相关内容,整理下实现细节. 1,添加音效文件到 ...

  5. 如何在 Swift 语言下使用 iOS Charts API 制作漂亮图表？

    [编者按]本文作者 Joyce Echessa 是渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.文中作者通过示例介绍用 ios-charts 库创建简易美观的 ...

  6. Android 内存剖析 – 发现潜在问题

    简介 移动平台上的开发和内存管理紧密相关.尽管随着科技的进步,现今移动设备上的内存大小已经达到了低端桌面设备的水平,但是现今开发的应用程序对内存的需求也在同步增长.主要问题出在设备的屏幕尺寸上-分辨率 ...

  7. Windows Server2008+IIS7部署网站的日期格式问题

    最近部署一个ASP网站,发现网站的某个功能上的日历在原来的服务器上访问时是会根据特定日期来对该日进行加粗加红显示的,但部署到我公司机房的win2008服务器上访问时却没有这效果了. 于是通过本地部署, ...

  8. 安装mysql之后，存入中文出现乱码

    如图显示:安装mysql之后,存入中文出现乱码 解决方案: 找到如图的文件位置 打开进行如图的修改: 结果:

  9. ExtJs之Ext.query

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  10. OpenGL程序运行提示glut32.dll丢失问题

    转: http://blog.csdn.net/liufeng520/article/details/8064170 今天调试OpenGl的源程序,编译通过,但一运行就提示,计算机丢失 glut32. ...