<!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. java面向对象总结(一)

    1. 对象的概念及面向对象的三个基本特征 面向对象的三大核心特性 面向对象开发模式更有利于人们开拓思维,在具体的开发过程中便于程序的划分,方便程序员分工合作,提高开发效率.面向对象程序设计有以下优点. ...

  2. Linux中DDNS配置

    1.实验拓扑结构 图1 实验拓扑图 2.项目要求 通过系统的搭建,能够为Web Server动态更新DNS信息. 3.项目开展思路(思维导图) 图2 DDNS实验思维导图 4.实验步骤 (1) 基础网 ...

  3. 基于ROS的运动识别

    #!/usr/bin/env python # -*- coding: utf-8 -*- import rospy import cv2 import numpy as np from sensor ...

  4. Tomcat笔记 #01# WEB应用管理工具简介

    索引 查看JVM以及SERVLET/接口的情况 动态管理WEB应用 Tomcat自带了一个基于网页的web应用管理工具,可以帮助我们监控&管理部署上去的WEB APP,特别方便!恰好之前碰到的 ...

  5. 996.ICU与死亡因素

    昨天,我为996.ICU这场国际运动贡献了一颗星. 关于这件事,第一想到的就是我们工作的初心是为了更好的生活,工作扼杀生活的不良风气应该坚决抵制. 查了一下,近些年人类正常死亡原因中排名前三的原因为: ...

  6. Gatling实战（三）

    无论是性能测试还是自动化测试,有一个很重要的点就是变量(参数化),因为真实环境是很少同时产生并发很高而且所有参数都一模一样的请求的,就算有这样的接口,开发肯定用缓存来挡了,这种一般不会是瓶颈,真正瓶颈 ...

  7. JDK一键部署, 新添加进度条

    JDK部署, 脚本与JDK安装包放在同一目录 然后执行 source ./jdk.sh 稍等进度条100%即可 #******************************************* ...

  8. 使用proces explorer查看系统gdi

    用mfc开发,使用双缓冲刷新屏幕时,可能会造成GDI的增长,当增长到一定数量[10000]时,软件会崩,可以通过 proces explorer来监测GDI,调试代码 打开proces explore ...

  9. jQuary学习の四の遍历

    向上遍历DOM树: parent():返回被选元素的直接父元素 parents():返回被选元素的所有祖先元素(当后边参数存在时则表示其中与参数相同的祖先元素) parentsUntil()返回介于两 ...

  10. 【新特性】JDK1.7

    一.switch中可以使用字串 String s = "test";switch (s) { case "test" :   System.out.printl ...