CSS控制表单

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

创建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控制表单的更多相关文章

怎么控制表单placeholder属性的样式兼容各大浏览器？
当我们使用placeholder的时候会遇到样式的控制和版本的兼容问题(但是还是只有css3支持),以至于达不到我们想要的效果,下面来看一种: 下面是css: .invalid:-moz-placeh ...
DOM（八）使用DOM控制表单
1.表单简介表单<form>是网页中交互最多的形式之一,它通过各种形式接收用户的数据,包括下拉列表框,单选按钮,复选框和文本框,本篇主要介绍表单中常用的属性和方法 javascript中 ...
Yii 2.0 ActiveForm生成表单，控制表单label和filed样式,filed一旦报错，前面lable颜色跟着变,看图，帮你解决
需要生成如下图的表单样式,图一:
学习笔记第十章使用CSS美化表单
第10章使用CSS美化表单 [学习重点] 正确使用各种表单控件熟悉HTML5新增的表单控件掌握表单属性的设置设计易用性表单页面 10.1 表单的基本结构表单包含多个标签,由很多控件组成 ...
HTML+JS---限制表单多次提交
限制表单多次提交: 表单只能提交一次 function check_form_data(){ $("#once_submit").attr("disabled" ...
遍历所有表，取每个表的MAXID更新到ID控制表
) Declare @TID int DECLARE Temp_Cursor1 Cursor--定义游标 FOR SELECT Name FROM Sys_Entity OPEN Temp_Curso ...
纯CSS实现表单验证
ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...
（10）用css建立表单
1.用css建立表单本篇资料主要介绍使用css设置表单元素的方法. 表单是网页与用户交互所不可缺少的元素,表单是网页的访问者进行交互的接口,例如大家都常遇到的:网上注册.网上登录.网上交易.网上投票 ...
css表格表单和统筹
css:表格表单和统筹学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景一.表单标签及属性高级回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...

随机推荐

关于ios object-c 类别-分类 category 的静态方法与私有变量，协议 protocol
关于ios object-c 类别-分类 category 的静态方法与私有变量,协议 protocol 2014-02-18 19:57 315人阅读评论(0) 收藏举报 1.category, ...
Buffer Sort
BUFFER (SORT) Description Performs a memory sort on a row source CREATE TABLE t1 (c01 NUMBER); CREAT ...
【HDOJ】2609 How many
循环同构的最小表示法. #include <cstdio> #include <cstring> #define MAXN 10005 #define MAXL 105 cha ...
Unity Time的使用
脚本语言:C# 1.deltatime: deltatime它表示距上一次调用Update或FixedUpdate所用的时间,调用deltatime可以使物体的旋转以一种恒定的速度来运行,而不受帧速率 ...
ikely()与unlikely() 都等同于if，此处只是做编译优化
ikely()与unlikely()在2.6内核中,随处可见,那为什么要用它们?它们之间有什么区别呢? 首先明确: if (likely(value))等价于if (value)if (likely( ...
gif动画问题
iOS没有自带支持显示gif动画的功能, 用UIImageView的animationImage虽然可以实现图片动画, 当毕竟不方便. http://blog.stijnspijker.nl/200 ...
数据结构(动态树)：COGS 27. [WC 2006] 水管局长
27. [WC 2006] 水管局长 ★★★☆ 输入文件:tube.in 输出文件:tube.out 简单对比时间限制:3 s 内存限制:128 MB [问题描述 ] SC 省 MY ...
Divide Two Integers —— LeetCode
Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...
CodeForces 689C　　Mike and Chocolate Thieves
题目链接:http://acm.hust.edu.cn/vjudge/problem/visitOriginUrl.action?id=412145 题目大意:给定一个数字n,问能不能求得一个最小的整 ...
cf601A The Two Routes
A. The Two Routes time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

CSS控制表单

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

随机推荐

热门专题