要求：

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. ArrayList扩容

    jdk1.5 public ArrayList(int initialCapacity) { super(); if (initialCapacity < 0) throw new Illega ...

  2. Django-ORM查询api

    models.py示例 class Book(models.Model): nid=models.AutoField(primary_key=True) title=models.CharField( ...

  3. SpringBoot与Dubbo整合下篇

    (1)pom.xml引入相关依赖jar包,如下: <dependency> <groupId>com.alibaba</groupId> <artifactI ...

  4. POJ 2407 Relatives（欧拉函数）

    http://poj.org/problem?id=2407 题意: 给出一个n,求小于等于的n的数中与n互质的数有几个. 思路: 欧拉函数的作用就是用来求这个的. #include<iostr ...

  5. mybatis报Invalid bound statement (not found) 分析

      解决问题的步骤,请参考: 1.mapper.xml要和对应的mapper接口在同一个包下,包名要一模一样. 2.Mapper接口中的方法在Mapper.xml中没有,然后执行Mapper接口的方法 ...

  6. Mybatis之SSM配置

    applicationContext-dao.xml <?xml version="1.0" encoding="UTF-8"?> <bean ...

  7. mysql 判断表字段是否存在，然后修改

    -- ---------------------------- -- 判断 vrv_paw_rule 表是否存在 thresholdMin 字段,不存在则添加; 存在则修改字段类型 DELIMITER ...

  8. 数据库使用B+树原理

    转载:http://zhuanlan.51cto.com/art/201808/582078.htm https://www.cnblogs.com/vincently/p/4526560.html( ...

  9. MVC4 绑定下拉框方法，解决编辑时不绑定值

    方法一  Controller 部分代码: public ActionResult Modify(int id) { //3.1.1 检查id //3.1.2根据id查询数据 Models.Stude ...

  10. Hadoop本地安装

    安装JDK卸载已经安装的JDK安装sun公司的JDK安装Hadoop(本地方式)解压并安装启动测试程序 安装JDK 卸载已经安装的JDK rpm -qa|grep jdk rpm -qa|grep g ...