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

随机推荐

bzoj3047: Freda的传呼机 && 2125: 最短路
Description 为了随时与rainbow快速交流,Freda制造了两部传呼机.Freda和rainbow所在的地方有N座房屋.M条双向光缆.每条光缆连接两座房屋,传呼机发出的信号只能沿着光缆传 ...
原生JS写Ajax的请求函数
一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
BZOJ 1507 Editor
Description Input 输入文件editor.in的第一行是指令条数t,以下是需要执行的t个操作.其中: 为了使输入文件便于阅读,Insert操作的字符串中可能会插入一些回车符,请忽略掉它 ...
nodejs--book
https://github.com/0xlen/nodejs-wiki-book http://www.nodebeginner.org/index-zh-cn.html http://book.n ...
check sql server edition (version 版本)
SELECT @@VERSION refer : https://www.mssqltips.com/sqlservertip/1140/how-to-tell-what-sql-server-ver ...
sublime每次打开时都提示升级，怎么取消这个弹出框？
答案其实很简单,设置如下: 进入Preferences -> Settings-User ,添加 "update_check": false 重启Sublime. 发现了什么 ...
【转】Android4.3 蓝牙BLE初步
原文网址:http://www.cnblogs.com/savagemorgan/p/3722657.html 一.关键概念: Generic Attribute Profile (GATT) 通过B ...
Computer Vision Algorithm Implementations
Participate in Reproducible Research General Image Processing OpenCV (C/C++ code, BSD lic) Image man ...
Java Topology Suite (JTS)与空间数据模型
JTS是Java的处理地理数据的API,它提供以下功能: 实现了OGC关于简单要素SQL查询规范定义的空间数据模型一个完整的.一致的.基本的二维空间算法的实现,包括二元运算(例如touch和over ...
String拼接也有用加号更好的时候
做String拼接时用StringBuilder(或StringBuffer)好还是直接用+号性能好?一般来说是前者,不过也有用加号略好的时候.首先我一直认为用+号有很好的可读性,而且当String拼 ...

CSS控制表单

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

随机推荐

热门专题