<!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. python习题一

    1.26个字母大小写成对打印,例如:Aa,Bb...... 方法1: for i in range(26): print(chr(65+i)+chr(97+i)) 方法2: for i in rang ...

  2. SpringBoot 项目打包分开lib,配置和资源文件

    原文地址:https://blog.csdn.net/u012811805/article/details/80878848 1 jar启动分离依赖lib和配置 先前发布boot项目的时候,改动一点东 ...

  3. PKUWC 2017 Day 2 简要题解

    *注意:题面请移步至loj查看. 从这里开始 Problem A 随机算法 Problem B 猎人杀 Problem C 随机游走 怎么PKU和THU都编了一些假算法,然后求正确率[汗]. 之前听说 ...

  4. day11函数的参数，函数对象 - 函数名，函数的嵌套调用

    复习 # 什么是函数:具体特定功能的代码块 - 特定功能代码块作为一个整体,并给该整体命名,就是函数 # 函数的优点: # 1.减少代码的冗余 # 2.结构清晰,可读性强 # 3.具有复用性,开发效率 ...

  5. linux系统ansible一键完成三大服务器基础配置（剧本）

    ansible自动化管理剧本方式一键完成三大服务器基础配置 环境准备:五台服务器:管理机m01:172.16.1.61,两台web服务器172.16.1.7,172.16.1.8,nfs存储服务器17 ...

  6. Android中的广播基本实现及回调方法的理解

    在Android中broadcast这一节的内容其实不算多主要是牵扯到一个broadcastreceiver类,这个类是一个抽象类,下面有一个抽象方法onreceiver(),可以再我们收到网络状态变 ...

  7. linux编译链接找不到库文件的解决方法。

    今天编译出现ld: 0706-006 Cannot find or open library file: -l xerces-c_static,ld:open(): A file or directo ...

  8. .NET Core Agent

    .NET Core Agent 熟悉java的朋友肯定知道java agent,当我看到java agent时我很是羡慕,我当时就想.net是否也有类似的功能,于是就搜索各种资料,结果让人很失望.当时 ...

  9. 北京AI外包团队 祝大家2019事业有事，大吉大利！

    未来已来,以人工智能为核心的科技力量,在重新塑造着我们生活的环境.这种重新塑造的现象如此之明显,力量如此强大,以至于越来越多的人在讨论,我们面临着新一轮的工业革命.而且现在我们面临的这次新的科技力量, ...

  10. H5外包团队 MUI文档技术资料大全

    HTML5+ API缓存:http://www.dcloud.io/docs/api/zh_cn/cache.html h.js:http://www.hcoder.net/h vue.js:http ...