目录
今天分享一个用HTML5+CSS3+JavaScript做的个人博客界面代码(可编辑)的代码
代码
<!DOCTYPE html>
<html>
<head>
<title>个人博客主页</title>
<style>
/* CSS样式 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
main {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.editable {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
.editable:focus {
outline: none;
border-color: #333;
}
.save-btn {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
.save-btn:hover {
background-color: #555;
}
</style>
</head>
<body>
<header>
<h1>个人博客主页</h1>
</header>
<main>
<ol>
<li>
<h2>个人简介</h2>
<div class="editable" contenteditable="true"></div>
</li>
<li>
<h2>个人信息</h2>
<ul>
<li><strong>用户名</strong><div class="editable" contenteditable="true"></div></li>
<li><strong>年龄</strong><div class="editable" contenteditable="true"></div></li>
<li><strong>工作</strong><div class="editable" contenteditable="true"></div></li>
</ul>
</li>
<li>
<h2>联系方式</h2>
<ul>
<li><strong>电话号码</strong><div class="editable" contenteditable="true"></div></li>
<li><strong>Email</strong><div class="editable" contenteditable="true"></div></li>
</ul>
</li>
</ol>
<button class="save-btn">保存</button>
</main>
<script>
// JavaScript代码
const saveBtn = document.querySelector('.save-btn');
const editableDiv = document.querySelector('.editable');
saveBtn.addEventListener('click', () => {
const content = editableDiv.innerHTML;
// 在这里可以将内容保存到服务器或进行其他处理
console.log(content); // 在控制台输出内容,仅作演示用途
});
</script>
</body>
</html>