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

创建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. bzoj3637: Query on a tree VI

    Description You are given a tree (an acyclic undirected connected graph) with n nodes. The tree node ...

  2. 误差逆传播(error BackPropagation, BP)算法推导及向量化表示

    1.前言 看完讲卷积神经网络基础讲得非常好的cs231后总感觉不过瘾,主要原因在于虽然知道了卷积神经网络的计算过程和基本结构,但还是无法透彻理解卷积神经网络的学习过程.于是找来了进阶的教材Notes ...

  3. "Redis客户端连接数一直降不下来"的有关问题解决

    [线上问题] "Redis客户端连接数一直降不下来"的问题解决 前段时间,上线了新的 Redis缓存(Cache)服务,准备替换掉 Memcached. 为什么要将 Memcach ...

  4. FFmpeg常用基本命令

    FFmpeg常用基本命令 1.分离视频音频流 ffmpeg -i input_file -vcodec copy -an output_file_video //分离视频流 ffmpeg -i inp ...

  5. C++中强制变换之const_cast

    今天学习了一下C++中的强制转换,看了const_cast,我发现了这个转换关键字的奇怪之处,于是把它记录一下,废话不说,先看一个程序: #include <iostream> using ...

  6. Pie（二分）

    ime Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8930   Accepted: 3235   Special Judge De ...

  7. Qt入门（18）——使用信号和槽连接控件

    下面显示了如何使用信号和槽来创建自定义窗口部件,和如何使用更加复杂的方式把它们连接起来. 首先,源文件被我们分成几部分并放在放在t7目录下. t7/lcdrange.h包含LCDRange类定义.t7 ...

  8. HDU 5396 Expression(DP+组合数)（详解）

    题目大意: 给你一个n然后是n个数. 然后是n-1个操作符,操作符是插入在两个数字之间的. 由于你不同的运算顺序,会产生不同的结果. 比如: 1 + 1 * 2 有两种  (1+1)*2   或者   ...

  9. 【模拟】ECNA 2015 I What's on the Grille? (Codeforces GYM 100825)

    题目链接: http://codeforces.com/gym/100825 题目大意: 栅栏密码.给定N(N<=10),密钥为一个N*N的矩阵,'.'代表空格可以看到,'X'代表被遮挡,还有密 ...

  10. Binary Tree Zigzag Level Order Traversal——LeetCode

    Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...