Html个人资料卡
我在我的网站中有一个标签。当你点击名为“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>
在卡片显示中使用HTML内容可编辑字段(div)。如果用户更改卡片中的任何字段,请在卡片本身中提供一个保存按钮和一个取消按钮。原始值与当前值不同。对于Image,您可以提供上传URL模式弹出窗口,然后更新卡片上传后的链接。
下面的代码可以帮助你
<!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>
谢谢Mohit!这大大帮助我!现在我要添加一个保存和编辑按钮!你会说什么代码添加到用户的图像? –
很高兴你喜欢它,我要编辑我的答案并添加输入类型文件以提交配置文件图像。 – Mohit
欢迎堆栈溢出。请回顾[预计需要多少研究工作?](https://meta.*.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users)。你的问题显示没有尝试实现你所问的功能。堆栈溢出不是一种编码服务。您需要研究您的问题,并尝试在发布之前亲自编写代码。 – FluffyKitten