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概念和应用场景一.表单标签及属性高级回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...

随机推荐

BZOJ 3107 二进制a+b
Description 输入三个整数$a, b, c$,把它们写成无前导$0$的二进制整数.比如$a=7, b=6, c=9$,写成二进制为$a=111, b=110, c=1001$ ...
Reducing the Dimensionality of data with neural networks / A fast learing algorithm for deep belief net
Deeplearning原文作者Hinton代码注解 Matlab示例代码为两部分,分别对应不同的论文: . Reducing the Dimensionality of data with neur ...
java interface
ikely()与unlikely() 都等同于if，此处只是做编译优化
ikely()与unlikely()在2.6内核中,随处可见,那为什么要用它们?它们之间有什么区别呢? 首先明确: if (likely(value))等价于if (value)if (likely( ...
CH Round #58 - OrzCC杯noip模拟赛day2
A:颜色问题题目:http://ch.ezoj.tk/contest/CH%20Round%20%2358%20-%20OrzCC杯noip模拟赛day2/颜色问题题解:算一下每个仆人到它的目的地 ...
BZOJ1631: [Usaco2007 Feb]Cow Party
1631: [Usaco2007 Feb]Cow Party Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 459 Solved: 338[Submit ...
winsock 收发广播包
☛广播包的概念广播包通常为了如下两个原因使用:1 一个应用程序希望在本地网络中找到一个资源,而应用程序对于该资源的地址又没有任何先验的知识. 2 一些重要的功能,例如路由要求把它们的信息发送给所有找 ...
Chrome启动参数的配置问题的补充
一.当Chrome浏览器不支持本地AJAX请求时,会出现AJAX跨域问题,这时候我们就要配置相应的启动参数使得浏览器可以访问本地文件: 配置参数为:--allow-file-access-from-f ...
poj1016
题目大意:数据统计看明白了,就是给你一个数,例如31123314,代表的意思有3个1,1个2,3个3,1个4,但数字本身的有的数字也是有3个1,1个2,3个3,1个4,所以这样的数叫做self-in ...
log4j配置祥解
第一步:加入log4j-1.2.8.jar到lib下. 第二步:在CLASSPATH下建立log4j.properties.内容如下: 1 log4j.rootCategory=INFO, stdou ...

CSS控制表单

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

随机推荐

热门专题