HTML/CSS 一个非常漂亮的户信息输入页面（含照片）

最新推荐文章于 2025-05-22 13:56:14 发布

原创最新推荐文章于 2025-05-22 13:56:14 发布 · 置顶 · 2.8w 阅读

115 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML #用户信息

CSS 同时被 2 个专栏收录

12 篇文章

订阅专栏

HTML

9 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的个人信息表单设计案例，包括表单布局、样式设置及文件上传功能。通过该示例可以了解如何创建美观且实用的网页表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一次发博客，有什么问题还请大神指出。

先上效果图：

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UserInfo</title>
    <style type="text/css">
        .Content-Main{
            max-width: 500px;
            margin: auto;
            border: none;
            border-radius: 5px; 
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
            text-shadow: 1px 1px 1px #444;
            color: #D3D3D3;
            background: #555;
        }
        .Content-Main h1{
            padding: 8px 0px 40px 10px;
            display: block;
            border-bottom: 1px solid #444;
        }
        .text1{
            margin-left: 3px;
        }
        .Content-Main label{
            margin: 0px 0px 5px;
            display: block;
        }
        .fileInputContainer{
            height: 99px;
            width: 99px;
            margin: 20px 20px 20px 20px ;
            border: none;
            background: url("img/Example.jpg");
            overflow: hidden; 
            position: relative; 
        }
        .fileInput{
            height: 106px;
            border: none;
            font-size: 300px;
            opacity: 0;  
            filter:alpha(opacity=0);
            cursor: pointer;
            position: absolute;
        }
        .Content-Main label>span{
            width: 20%;
            float: left;
            text-align: right;
            padding-right: 10px;
            margin-top: 10px;
            font-weight: bold;
        }
        .Main-sex{
            padding-right: 13px;
            padding-bottom: 13px;
            font-weight: bold;
            line-height: 4px; 
        }
        .Main-sex input[type=checkbox]{
            margin-top:6px;
            vertical-align:middle; 
        }
        .Content-Main input[type="text"],.Content-Main input[type="email"],.Content-Main textarea{
            height: 25px;
            width: 70%;
            line-height: 15px;
            padding: 5px 0px 5px 5px; 
            margin-bottom: 16px;
            margin-right: 6px;
            margin-top: 2px;
            border: none;
            border-radius:2px;
            -webkit-border-radius:2px;
            -moz-border-radius:2px;
            outline: 0 none; 
            background:  #DFDFDF;
            color: #525252;
        }
        .Content-Main textarea{
            height: 100px;
            width: 70%;
            padding: 5px 0px 0px 5px;
        }
        .Content-Main .button{
            padding: 8px 24px 8px 24px;
            margin-bottom: 8px;
            border: none;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            font-weight: bold;
            text-shadow: 1px 1px 1px #FFE477;
            box-shadow: 1px 1px 1px  #3D3D3D;
            -moz-box-shadow: 1px 1px 1px  #3D3D3D;
            -webkit-box-shadow: 1px 1px 1px  #3D3D3D;
            color: #585858;
            background: #f6ff0a;
        }
        .Content-Main .button:hover{
            color:  #333;
            background-color:  #EBEBEB ;
        }
    </style>
</head>
<body>
        <div class="Content-Main">
            <form  action="" method="post" class="form-userInfo">
                <h1>个人信息</h1>
                <span class="text1">请在文本框中完善您的个人信息：</span>
                <p>
                <div class="fileInputContainer">
                    <input class="fileInput" id="" type="file" name="">
                </div>
                <label>
                    <span>Your name:</span>
                    <input type="text"  name="name" placeholder="Your Full Name">
                </label>
                <label class="Main-sex">
                    <span>Your sex:</span>
                    <input type="checkbox" class="man">男
                    <input type="checkbox" class="women">女
                </label>
                <label>
                    <span>Your email :</span>
                    <input type="email" name="email" placeholder="@.com">
                </label>
                <label>
                    <span>Your phone:</span>
                    <input type="text" name="phone" placeholder="Please input 11 number">
                </label>
                <label>
                    <span>Message:</span>
                    <textarea id="message" name="message" placeholder="Your message to us"></textarea>
                </label>
                <label>
                    <input type="button" class="button" value="提交">
                </label>
            </form>
        </div>
</body>
</html>