HTML5+CSS3+JavaScript个人博客界面代码(可编辑)

最新推荐文章于 2024-06-06 15:07:55 发布

hello141219

最新推荐文章于 2024-06-06 15:07:55 发布

阅读量171

点赞数 3

分类专栏： HTML网页代码文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/lamchichentao/article/details/136127873

版权

HTML网页代码专栏收录该内容

7 篇文章 0 订阅

订阅专栏

代码
运行结果

今天分享一个用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>