<!doctype html>

 <html>

     <head>

     <title>EasyMall注册界面</title>

     <meta http-equiv="content-type" content="text/html" charset="utf-8">

     <link rel="stylesheet" href="D:/MyEclipse 10/day02/regit/css/regit.css">

     </head>

     <body>

     <h1>欢迎注册EasyMall</h1>

     <form action="#" method="post">

     <table>

     <tr>

         <td class="td_txt">用户名：</td>

         <td><input type="text" name="usrename"></td>

     </tr>

     <tr>

         <td class="td_txt">密码：</td>

         <td><input type="password" name="password"></td>

     </tr>

     <tr>

         <td class="td_txt">确认密码：</td>

         <td><input type="password" name="password1"></td>

     </tr>

     <tr>

         <td class="td_txt">昵称：</td>

         <td><input type="text" name="nickname"></td>

     </tr>

     <tr>

         <td class="td_txt">邮箱：</td>

         <td><input type="text" name="email"></td>

     </tr>

     <tr>

         <td class="td_txt">验证码：</td>

         <td><input class="td1" type="text" name="yzm">

         <img alt="图片加载失败" src="D:\MyEclipse 10\day02\regit\img\yzm.jpg"></td>

     </tr>

     <tr>

         <td colspan="2" class="td"><input type="submit" value="注册用户"></td>

     </tr>

     </table>

     </form>

     </body>

 </html>

 body{

     background-image: url("D:/MyEclipse 10/day02/regit/img/zc.jpg");

     background-repeat: no-repeat;

     font-family: "微软雅黑";

     background-position: top;

 }

 h1{

     text-align:center;

     margin-top: 190px;

     margin-bottom: 30px;

     color:#990000;

 }

 table{

     /*text-align:center;*/

     margin:0px auto;

 }

 table tr td.td_txt{

     text-align: right;

     font-size: 18px;

 }

 .td1{

     width:80px;

     vertical-align: middle;

 }

 .td1+img{

     vertical-align:middle;

 }

 table tr td.td{

     text-align: center;

 }

 input{

     width:150px;

     height:22px;

     border-color: #ccc;

 }

 input[type="submit"]{

     background-color:red;

     border:none;

     width:127px;

     height:44px;

     font-size: 20px;

     color:white;

     font-weight: bolder;

 }

 input[type="submit"]:hover{

     background-color:blue;

 }

 input[type="submit"]:active{

     background-color: green;

 }

 input[type="submit"]:visited{

     background-color: pink;

 }

css给html添加效果的更多相关文章

  1. 实用js+css多级树形展开效果导航菜单

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

  2. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  3. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  4. css冻结列的效果

    <!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8&quo ...

  5. css超出一行添加省略号属性:text-overflow和white-space

    通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素 ...

  6. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  7. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

  8. 有趣的css—简单的下雨效果2.0版

    简单的下雨效果2.0版 前言 笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作G ...

  9. 原生JS、CSS实现的转盘效果（目前仅支持webkit）

    这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...

随机推荐

  1. .NET Core 2.0 项目的智能提示是英文，改成中文的解决方案

    截至目前为止(2017.09.21),Microsoft 官方并没有提供 .NET Core 2.0 正式版的多语言安装包. 因此,在 Visual Studio 2015 Update 3 和 Vi ...

  2. Linux 主要目录速查表

    /:根目录,一般根目录下只存放目录,在 linux 下有且只有一个根目录,所有的东西都是从这里开始 当在终端里输入 /home,其实是在告诉电脑,先从 /(根目录)开始,再进入到 home 目录 /b ...

  3. MySQL文档翻译（八）附英文原文---性能优化概览

    优化概述 数据库性能表现依赖于数据库级别的几个因素,比如表,查询和配置设置.这些软件在硬件级别通过CPU和IO操作构筑结果,你需要尽可能的使用最少的资源达到最大的效果.当你专注于数据库的性能表现时,你 ...

  4. tee命令使用

    需求描述: 今天在看nginx内容的过程,遇到了tee这个命令,所以查询了下,在这里记录下使用方法. 操作过程: 1.执行以下的命令 [root@testvm ~]# uname -n | tee h ...

  5. opencv学习之路（41）、人脸识别

    一.人脸检测并采集个人图像 //take_photo.cpp #include<opencv2/opencv.hpp> using namespace cv; using namespac ...

  6. Bugku-CTF之Trim的日记本（不要一次就放弃）

    Day19 Trim的日记本 http://123.206.87.240:9002/ hints:不要一次就放弃

  7. 有关this

    this是Javascript函数内部的一个特殊对象,引用的是函数运行时的环境对象,也就是说,this是动态的(箭头函数除外),是在运行时进行绑定的,并不是在编写时绑定(箭头函数是编写时绑定). th ...

  8. JS实现打开本地文件或文件夹 ActiveXObject

    IE浏览器打开C盘,测试可用. 如果浏览器报错提示:ActiveXObject is not defined Internet 选项 -> 安全 - >安全级别,调低级别 function ...

  9. code回顾

    Linq return Content("<script>alert('你想说的话');javascript:history.go(-1);</script>&quo ...

  10. OS X EI Captain 下解决 There was a problem confirming the ssl certificate 问题

    参考: Problem Confirming the SSL Certificate - OSX OS X EI Captain 下解决 There was a problem confirming ...