一个简单的网站注册页面制作。

创建CSS文件如下：

@charset "utf-8";

/* CSS Document */

* {

    margin: 0px;

    padding: 0px;

    border: 0px;

}

body {

    font-family: 宋体;

    font-size: 12px;

    color: #333;

    line-height: 22px;

    background-color: #FFF;

}

#login-bg {

    width: 630px;

    height: auto;

    overflow: hidden;

    margin: auto;

    background-color: #FFF;

    background-image: url(../images/login-bg1.jpg);

    background-repeat: repeat-x;

}

#login-title {

    width: 139px;

    height: 46px;

    font-family: 微软雅黑;

    font-size: 16px;

    font-weight: bold;

    text-align: center;

    line-height: 46px;

    border-top: solid 3px #E91162;

    border-right: solid 1px #F4F4F4;

    background-color: #FFF;

}

#login-text {

    height: 44px;

    border-bottom: solid 1px #F4F4F4;

    color: #ABABAB;

    font-size: 14px;

    line-height: 44px;

    background-image: url(../images/login-ico.gif);

    background-repeat: no-repeat;

    background-position: 20px center;

    padding-left: 60px;

}

#login-left {

    width: 630px;

    height: auto;

    overflow: hidden;

    border-right: solid 1px #F4F4F4;

    float: left;

}

#login-left dt {

    width: 130px;

    height: 69px;

    font-size: 14px;

    line-height: 69px;

    text-align: right;

    border-bottom: solid 1px #F4F4F4;

    float: left;

}

#login-left dd {

    width: 485px;

    height: 69px;

    font-size: 14px;

    line-height: 69px;

    padding-left: 15px;

    border-bottom: solid 1px #F4F4F4;

    float: left;

}

.input01 {

    width: 260px;

    height: 36px;

    font-size: 14px;

    line-height: 36px;

    background-image: url(../images/login-bg2.gif);

    background-repeat: repeat-x;

    border: solid 1px #ABADB3;

    margin-top: 17px;

}

.input02 {

    width: 100px;

    height: 25px;

    font-size: 14px;

    line-height: 36px;

    background-image: url(../images/login-bg2.gif);

    background-repeat: repeat-x;

    border: solid 1px #ABADB3;

    margin-top: 20px;

}

.red-font1 {

    color: #E91162;

}

.black-font1 {

    color: #666666;

}

.black-font2 {

    color: #999999;

}

.login-btn {

    margin-top: 13px;

    margin-left:200px;

}

HTML文件如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<link href="css/style.css" rel="stylesheet" type="text/css" />

<title>无标题文档</title>

</head>

<div id="login-title">新用户注册</div>

<div id="login-text">Hi,<span class="black-font1">新朋友</span>

        欢迎注册某某网站。</div>

<div id="login-left">

  <form id="form1" name="form1" method="post" action="">

    <dl>

      <dt>邮箱</dt>

        <dd>

          <input name="username" type="text" class="input01" id="username" />

        </dd>

      <dt>密码</dt>

        <dd>

          <input name="password" type="password" class="input01" id="password" />

        </dd>

        <dt>确认密码</dt>

        <dd>

          <input name="password" type="password" class="input01" id="password" />

        </dd>

      <dt>昵称</dt>

        <dd>

          <input name="username" type="text" class="input01" id="username" />

        </dd>

        <dt>城市</dt>

        <dd>

          <select name="city" class="input02">

          <option selected="selected">北京</option>

          <option>广州</option>

          <option>深圳</option>

          <option>上海</option>

          <option>杭州</option>

          <option>武汉</option>

          </select>

        </dd>

       <dt>验证码</dt>

        <dd>

          <input name="yanzheng" type="text" class="input01" id="yanzheng" />

        <img src="data:images/temp1.jpg" width="105" height="27" />看不清，<span class="red-font1">换一个</span></dd>

        <dd>

          <input type="checkbox" name="chockbox" id="chockbox" />

          我已认真阅读并同意某某网<span class="red-font1">《使用协议》</span>

          </dd>

        <dt></dt>

          <input name="login-btn" type="image" class="login-btn" id="login-btn" src="data:images/reg-btn.jpg" />

        </dd>

    </dl>

  </form>

</div>

<body>

</body>

</html>

最终效果图如下：

CSS控制表单的更多相关文章

  1. 怎么控制表单placeholder属性的样式兼容各大浏览器？

    当我们使用placeholder的时候会遇到样式的控制和版本的兼容问题(但是还是只有css3支持),以至于达不到我们想要的效果,下面来看一种: 下面是css: .invalid:-moz-placeh ...

  2. DOM（八）使用DOM控制表单

    1.表单简介 表单<form>是网页中交互最多的形式之一,它通过各种形式接收用户的数据,包括下拉列表框,单选按钮,复选框和文本框,本篇主要介绍表单中常用的属性和方法 javascript中 ...

  3. Yii 2.0 ActiveForm生成表单 ，控制表单label和filed样式,filed一旦报错，前面lable颜色跟着变,看图，帮你解决

    需要生成如下图的表单样式,图一:

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

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

  5. HTML+JS---限制表单多次提交

    限制表单多次提交: 表单只能提交一次 function check_form_data(){ $("#once_submit").attr("disabled" ...

  6. 遍历所有表，取每个表的MAXID更新到ID控制表

    ) Declare @TID int DECLARE Temp_Cursor1 Cursor--定义游标 FOR SELECT Name FROM Sys_Entity OPEN Temp_Curso ...

  7. 纯CSS实现表单验证

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

  8. （10）用css建立表单

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

  9. css表格表单和统筹

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

随机推荐

  1. 测试gcc的优化选项

    一.测试准备及原理 测试代码: static void wait(volatile unsigned long dly) { ; dly--); } int main(void) { unsigned ...

  2. Oracle数据库还原方法

    Win +X → 运行→cmd C:\Documents and Settings\Administrator>sqlplus /nolog SQL> connect sys/passwo ...

  3. 关于Weblogic Server（介绍）

    Weblogic, 美国Oracle公司名下产品,是一个基于 J2EE 架构.可扩展的应用服务器. 本文档选取部分官方文档翻译 总览 支持多种类型的分布式应用 基于 SOA 应用的理想架构 完整实现 ...

  4. 8个经典的HTML5游戏在线试玩及源码学习

    原文地址:http://www.oschina.net/news/32364/html5-games 游戏,毫无疑问是拿来供大家娱乐玩耍的,这也无可厚非,但是,今天给大家分享的8个HTML5游戏,在好 ...

  5. BZOJ 1185 最小矩形覆盖

    Description Input Output Sample Input Sample Output HINT 其实这题就是一道旋转卡壳的裸题,但是我的精度萎了.直接上hzwer的代码吧... #i ...

  6. Altium Designer 从导入DXF文件，并转换成板框

    大多数人都知道,PADS中导入DXF文件,然后转换成板框,是很方便的.AD也同样可以做到. PADS导入DXF见:http://www.cnblogs.com/craftor/archive/2012 ...

  7. 根据div 标签 查看数组@class=modulwrap 下面的/table/tbody/tr/td

    <div class="modulwrap"> <div class="request_title"> <span class=& ...

  8. 【算法Everyday】第二日 求子数组的最大和

    题目 // 3.求子数组的最大和 // 题目: // 输入一个整形数组,数组里有正数也有负数. // 数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和. // 求所有子数组的和的最大值. ...

  9. 微信下载APK

    腾讯应用宝 微信屏蔽了来源不是腾讯的APK function isWeixin() { var ua = navigator.userAgent.toLowerCase() if(ua.match(/ ...

  10. 一键源码安装Ansible

    #!/bin/bash # @Name:install_ansible.sh # @Author:Eivllom # @Create -- # @Modify -- app_soft="/a ...