Question

我的html网站上有一个标签。当您单击名为“Profile”的选项卡时;它将显示一个显示个人资料卡的页面。使用此卡可显示您的图片，您的工作，您所知的语言以及消息按钮。

我有我的代码。但我想弄清楚的是。如何使用户能够更改配置文件卡？就像他们想要改变他们所知道的语言或配置卡片图片一样。

到目前为止我的代码：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        max-width: 300px;
        margin: auto;
        text-align: center;
        font-family: arial;
    }
    
    .title {
        color: grey;
        font-size: 18px;
    }
    
    button {
        border: none;
        outline: 0;
        display: inline-block;
        padding: 8px;
        color: white;
        background-color: #000;
        text-align: center;
        cursor: pointer;
        width: 100%;
        font-size: 18px;
    }
    
    a {
        text-decoration: none;
        font-size: 22px;
        color: black;
    }
    
    button:hover,
    a:hover {
        opacity: 0.7;
    }
    </style>
</head>

<body>
    <h2 style="text-align:center">User Profile Card</h2>
    <div class="card">
        <img src="IMAGE" alt="IMAGE HERE" style="width:100%">
        <h1>Name Here</h1>
        <p class="title">What is your job</p>
        <p>What programming languages you know</p>
        <div style="margin: 24px 0;">
            <a href="#"><i class="fa fa-comments-o"></i></a>
        </div>
</body>
</html>

Answer 1

只需输入输入字段并将其设计为类似CSS的段落。如果你愿意，可以删除它们的边框。

希望This link将为您效劳，并将为您提供创造性思考的新方法。根据需要更改此代码。

Answer 2

在卡片显示中使用HTML内容可编辑字段（div）。如果用户更改了卡中的任何字段，请在卡本身中提供“保存”按钮和“取消”按钮。原始值与当前值不同。对于图像，您可以提供上传URL模式弹出窗口，然后更新卡片图片上传中的链接。

Answer 3

以下代码可能对您有所帮助

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
    .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        max-width: 300px;
        margin: auto;
        text-align: center;
        font-family: arial;
    }
    
    .title {
        color: grey;
        font-size: 18px;
    }
    
    button {
        border: none;
        outline: 0;
        display: inline-block;
        padding: 8px;
        color: white;
        background-color: #000;
        text-align: center;
        cursor: pointer;
        width: 100%;
        font-size: 18px;
    }
    
    a {
        text-decoration: none;
        font-size: 22px;
        color: black;
    }
    
    button:hover,
    a:hover {
        opacity: 0.7;
    }
    </style>
</head>

<body>
    <h2 style="text-align:center">User Profile Card</h2>
    <div class="card">
<h2>Fill in the information below:</h2>
        <!-- <img src="IMAGE" alt="IMAGE HERE" style="width:100%">-->
        
        <form enctype="multipart/form-data">
        <div style="margin: 10px 0;text-align:center;">
          <input type="file" class="title" style="font-size: 16px;width: 68%;"> 
        </div>
        <div style="margin: 10px 0;text-align:center;">
          <input type="text" class="title" placeholder="Your name here">
        </div>

        <div style="margin: 10px 0;text-align:center;">
          <input type="text" class="title" placeholder="What is your job">
        </div>

        <div style="margin: 10px 0;text-align:center;">
        <select name="language" style="height: 32px;">
          <option value="">Choose programming language</option>
          <option value="node-js">Node.js</option>
          <option value="angular-js">Angular.js</option>
        </select>
        </div>
        </form>
        <div style="margin: 24px 0;">
            <a href="#"><i class="fa fa-comments-o"></i></a>
        </div>
</body>
</html>

Html个人资料卡

3 个答案: