要求：

html代码：

<!DOCTYPE html>

<html>

  <head>

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

    <meta charset="utf-8">

    <!--

        1. rel 定义当前文档与目标文档之间的关系。

        2. rel="stylesheet" 说明href连接的文档是一个新式表 。

        3. href 目标文档或资源的 URL。

    -->

    <link rel="stylesheet" type="text/css" href="css/reg.css"   />

  </head>

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

  <body>

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

        <table>

            <tr>

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

                <td>

                    <input type="text" name="username"/>

                </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="password2"/>

                </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="emil"/>

                </td>

            </tr>

            <tr>

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

                <td>

                    <input type="text" name="valistr"/>

                    <img src="img/reg/yzm.jpg"/>

                </td>

            </tr>

            <tr>

                <td class="td_sub" class="td_txt" colspan="2">

                    <input type="submit" value="用户注册"/>

                </td>

            </tr>

        </table>

    </form>

  </body>

</html>

css代码：

@CHARSET "UTF-8";

body{/*标签选择器*/

    font-familly: "微软雅黑";/*规定元素的字体系列。*/

    background-image: url("../img/reg/zc.jpg");/*设置背景图像。*/

    background-position: center top;/*设置背景图像的起始位置。*/

}

h1{

    text-align: center;/*规定元素中的文本的水平对齐方式*/

    color: #990000;

    margin-top:190px /*margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。*/

}

table{/*标签选择器*/

    margin:0px auto;/*auto 浏览器计算外边距*/

}

table tr td.td_txt{/*后代选择器.类选择器*/

    text-align: right;/*规定元素中的文本的水平对齐方式*/

    font-size: 18px;/*设置字体的尺寸*/

}

td{

    padding-top: 10px;

}

input{

    border: 1px solid #ccc;/*border 简写属性在一个声明设置所有的边框属性。width, style, color*/

    width: 150px;

    height: 22px;

}

input[name='valistr']{/*属性选择器*/

    width: 80px;

    vertical-align: middle;/*vertical-align 属性设置元素的垂直对齐方式。*/

}

input[name='valistr']+img{/*相邻兄弟选择器*/

    vertical-align: middle;

}

input[type='submit']{

    width: 127px;/*width 属性设置元素的宽度。*/

    height: 44px;

    font-size: 20px;/*font-size 属性可设置字体的尺寸。*/

    border: none;

    color: #FFFFFF;

    font-weight: bolder;/*font-weight 属性设置文本的粗细。*/

    background-image: url('../img/reg/zc_btn01.jpg')

}

table tr td.td_sub{

    text-align: center;

}

input[type='submit']:hover{/*:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。*/

    background-image: url('../img/reg/zc_btn02.jpg')

}

图片资源：

yzm.jpg

zc_btn01.jpg

zc_btn02.jpg

zc.jpg

文件之间的层级关系

Java-Web 用html和css写一个EasyMall注册界面的更多相关文章

  1. 使用Boostrap框架写一个登录\注册界面

    Bootstrap是一个Web前端开发框架,使用它提供的css.js文件可以简单.方便地美化HTML控件.一般情况下,对控件的美化需要我们自己编写css代码,并通过标签选择器.类选择器.ID选择器为指 ...

  2. JAVA WEB快速入门之从编写一个基于SpringBoot+Mybatis快速创建的REST API项目了解SpringBoot、SpringMVC REST API、Mybatis等相关知识

    JAVA WEB快速入门系列之前的相关文章如下:(文章全部本人[梦在旅途原创],文中内容可能部份图片.代码参照网上资源) 第一篇:JAVA WEB快速入门之环境搭建 第二篇:JAVA WEB快速入门之 ...

  3. 用java写一个用户登陆界面

    一.课堂测试源代码及其结果截图 用java的swing写一个用户登录界面,采用网格布局.源代码如下: /** * */package LiuLijia; import java.awt.CardLay ...

  4. QT学习日记篇-03-仿写一个智能家居界面

    课程大纲: <1>让界面漂亮起来,仿写一个智能家居界面 ->第一:给QT工程添加图片 进入下一步: <注意路径和名称一定不能有中文>                   ...

  5. Java Web 开发利用Struts2+Spring+mybatis写一个用户登录界面以及简单的数据交互

    框架的东西太复杂也难以讲通,直接上代码: 一.首先得配置环境 和导入必要的jar包 有一些重要的如下: Filter文件夹下的SafetyFilter.java   model文件夹下的 Global ...

  6. JAVA WEB快速入门之从编写一个基于SpringMVC框架的网站了解Maven、SpringMVC、SpringJDBC

    接上篇<JAVA WEB快速入门之通过一个简单的Spring项目了解Spring的核心(AOP.IOC)>,了解了Spring的核心(AOP.IOC)后,我们再来学习与实践Maven.Sp ...

  7. JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署

    接上篇<JAVA WEB快速入门之环境搭建>,在完成了环境搭建后(JDK.Tomcat.IDE),现在是万事具备,就差写代码了,今天就来从编写一个JSP WEB网站了解JSP WEB网站的 ...

  8. 还在为小三角形切图？使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  9. 死磕 java同步系列之自己动手写一个锁Lock

    问题 (1)自己动手写一个锁需要哪些知识? (2)自己动手写一个锁到底有多简单? (3)自己能不能写出来一个完美的锁? 简介 本篇文章的目标一是自己动手写一个锁,这个锁的功能很简单,能进行正常的加锁. ...

随机推荐

  1. 【各类MQ比较】消息队列MQ

    目前业界有很多MQ产品,我们作如下对比: RabbitMQ 是使用Erlang编写的一个开源的消息队列,本身支持很多的协议:AMQP,XMPP, SMTP, STOMP,也正是如此,使的它变的非常重量 ...

  2. 【转】集群/分布式环境下5种session处理策略

    转载至:http://blog.csdn.net/u010028869/article/details/50773174 在搭建完集群环境后,不得不考虑的一个问题就是用户访问产生的session如何处 ...

  3. nodejs真的是单线程吗？

    [原文] 一.多线程与单线程 像java.python这个可以具有多线程的语言.多线程同步模式是这样的,将cpu分成几个线程,每个线程同步运行. 而node.js采用单线程异步非阻塞模式,也就是说每一 ...

  4. Android -- 在一个Activity开启另一个Activity 并 获取他的返回值。

    1. 视图示例, 按选择弹出 2界面, 选择选项  回显到1    2. 示例代码 MainActivity.java, 第一个activity public class MainActivity e ...

  5. TCGA系列--TCGA可视化数据库GEPIA

    中国大牛力作  张泽民: http://gepia.cancer-pku.cn/index.html http://cancer-pku.cn/

  6. zoj Candies 思维

    http://acm.zju.edu.cn/changsha/showProblem.do?problemId=31 题意: 给你n个非负整数,然后输入n个x[i],x[i] == -1表示第i个数不 ...

  7. codevs 2216 行星序列 线段树+延迟标记（BZOJ 1798）

    2216 行星序列  时间限制: 2 s  空间限制: 256000 KB     题目描述 Description “神州“载人飞船的发射成功让小可可非常激动,他立志长大后要成为一名宇航员假期一始, ...

  8. js urlencode

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. [原][osgearth]osgearth本地（离线）数据源处理小结

    参考:http://docs.osgearth.org/en/latest/data.html Processing Local Source Data If you have geospatial ...

  10. H5 canvas控制坦克移动2

    接着上一篇(http://www.cnblogs.com/zhouhuan/p/H5_tankgame2.html),这篇主要修复两个bug,第一,玩家按下方向键时,坦克的炮筒应该指向相应的方向,并向 ...