Html个人资料卡

-1

我在我的网站中有一个标签。当你点击名为“Profile”的标签时;它会弹出一个页面，显示一个配置文件卡。通过这张卡，它可以显示你的照片，你的工作，你知道什么语言，以及一个消息按钮。Html个人资料卡

我有我的代码。但我想弄清楚的是。我该怎么做才能使用户能够更改那里的个人资料卡？就好像他们想改变他们知道的语言或者有个人资料卡图片。

我迄今为止代码：

<!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>

来源

2017-09-14 D. Doke

欢迎堆栈溢出。请回顾[预计需要多少研究工作？]（https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users）。你的问题显示没有尝试实现你所问的功能。堆栈溢出不是一种编码服务。您需要研究您的问题，并尝试在发布之前亲自编写代码。 – FluffyKitten

，只需提供输入字段，并设计他们就像他们是用CSS段落。如果你想要删除边框。

希望This link将为你工作，并会给你新的思维方式创造性。根据需要更改此代码。

来源

2017-09-14 05:22:24

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

来源

2017-09-14 05:23:40 Amit

下面的代码可以帮助你

<!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>

来源

2017-09-14 05:43:10 Mohit

谢谢Mohit！这大大帮助我！现在我要添加一个保存和编辑按钮！你会说什么代码添加到用户的图像？ –

很高兴你喜欢它，我要编辑我的答案并添加输入类型文件以提交配置文件图像。 – Mohit

Html个人资料卡

回答

相关问题