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個人資料卡

回答

相關問題