<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>表单文件域跟图像域-制用用户信息注册页面</title>
    <link href="css/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="mr-bg">
    <h2>用户信息注册</h2>
    <form action="index.html" method="get" name="regist" enctype="application/x-www-form-urlencoded" target="_self">
        <div class="mr-box">
            <label><input type="file"/></label>
            <label><input type="image" src="images/btn.jpg"/></label>
        </div>
    </form>
</div>
</body>
</html>
@charset "utf-8";
/**css document*/
* { /*通配选择器，清除所有标签默认样式*/
    padding: 0;
    margin: 0;
}

#mr-bg { /*id选择器，设置整体背景样式*/
    width: 800px;
    height: 600px;
    margin: 20px auto;
    border: 1px solid rgb(255, 0, 0);
    background: url("../images/bg.png");
}

h2 { /*标签选择器，设置标题样式*/
    margin: 60px 0 20px;
    text-align: center;
}

.mr-box { /*类选择器，设置用户注册内容样式*/
    width: 554px;
    height: 462px;
    margin-left: 150px;
    background: url("../images/4-9.png");
    position: relative;
}

.mr-box [type="file"] { /*属性选择器，设置文件上传控件位置*/
    padding-left: 175px;
    margin-top: 100px;
}

[type="image"] { /*属选择器，设置图像域上传控件位置*/
    position: absolute;
    top: 427px;
    left: 282px;
}

表单文件域跟图像域-制用用户信息注册页面_选择器

表单文件域跟图像域-制用用户信息注册页面_html_02

表单文件域跟图像域-制用用户信息注册页面_选择器_03