要求：

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. iOS动画进阶 - 手摸手教你写ShineButton动画

    移动端访问不佳,请访问我的个人博客 前段时间在github上看见一个非常nice的动画效果,可惜是安卓的,想着用swift写一个iOS版的,下下来源代码研究了一下,下面是我写代码的心路历程 先上图和d ...

  2. Coursera SDN M1.1 SDN History: Central Control

    source Structure 1.讨论SDN的时间线,从1980s至今. 2.认识到SDN背后的原则和idea. 3.识别SDN起源的架构主题. NOTE Four Chapter in SDN ...

  3. python 清空列表

    # lst = ["篮球","排球","乒乓球","足球","电子竞技","台球" ...

  4. install ros-indigo-pcl-conversions

    CMake Warning at /opt/ros/indigo/share/catkin/cmake/catkinConfig.cmake: (find_package): Could not fi ...

  5. 农历03__ZC

    代码,改自 农历01(http://www.cnblogs.com/cppskill/p/5930558.html) 1.main.cpp #include "Lunar_ZC.h" ...

  6. https wireshark抓包——要解密出原始数据光有ssl 证书还不行，还要有浏览器内的pre-master-secret（内存里）

    基于wireshark抓包的分析 首先使用wireshark并且打开浏览器,打开百度(百度使用的是HTTPS加密),随意输入关键词浏览. 我这里将抓到的包进行过滤.过滤规则如下 ip.addr == ...

  7. zoj2314

    题解: 有上限的网络流 基本模板 代码: #include<bits/stdc++.h> using namespace std; ; int ne[N],num,n,m,d[N],S,T ...

  8. checkbox选中的问题（Ajax.BeginForm）

    判断checkbox选中的方法方法一:if ($("#checkbox-id")get(0).checked) { // do something} 方法二:if($('#chec ...

  9. Java LRU的实现

    最近在leetcode上做题的时,看到了一道有关LRU Cache的题目,正好我当初面试阿里巴巴的时候问到的.主要采用linkedHashMap来实现. package edu.test.algori ...

  10. Howto: 在ArcGIS10中将地图文档（mxd文档）批量保存到之前版本

     Howto: 在ArcGIS10中将地图文档(mxd文档)批量保存到之前版本 文章编号 : 38783 软件: ArcGIS - ArcEditor 10 ArcGIS - ArcInfo 10 A ...