个人博客Html页面

最新推荐文章于 2024-06-22 14:57:11 发布

runqu

最新推荐文章于 2024-06-22 14:57:11 发布

阅读量973

点赞数 8

文章标签： html java 前端

本文链接：https://blog.csdn.net/runqu/article/details/137017489

版权

一、简单页面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>个人博客</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }

h1 {
  text-align: center;
}

.post {
  margin-bottom: 20px;
}

.post h2 {
  margin: 0;
}

.post p {
  margin-top: 10px;
}

.post-date {
  color: gray;
  font-size: 14px;
}

.post-content {
  margin-top: 10px;
}

</style> </head> <body> <h1>个人博客</h1>

<div class="post"> <h2>第一篇博客</h2> <p class="post-date">发布日期: 2021年1月1日</p> <div class="post-content"> <p>这是我的第一篇博客内容。</p> <p>写下你想要分享的内容。</p> </div> </div>

<div class="post"> <h2>第二篇博客</h2> <p class="post-date">发布日期: 2021年1月2日</p> <div class="post-content"> <p>这是我的第二篇博客内容。</p> <p>继续写下你想要分享的内容。</p> </div> </div>

<div class="post"> <h2>第三篇博客</h2> <p class="post-date">发布日期: 2021年1月3日</p> <div class="post-content"> <p>这是我的第三篇博客内容。</p> <p>继续写下你想要分享的内容。</p> </div> </div> </body> </html>

二、综合应用

制作一个简单的个人博客Html页面，有用户登陆页面和展示页面，css和js文件分开。

首先，我们需要创建一个HTML文件来作为我们的个人博客页面。我们先创建一个名为index.html的文件，并在其中添加以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>个人博客</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <h2>Welcome to My Blog</h2>

    <form id="login-form">
      <h3>Login</h3>
      <input type="text" id="username" placeholder="Username">
      <input type="password" id="password" placeholder="Password">
      <button type="submit">Login</button>
    </form>

    <div id="blog-page" class="hide">
      <h3 id="welcome-message"></h3>
      <h4>My Blog Posts:</h4>
      <ul id="blog-list"></ul>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

接下来，我们需要创建一个名为style.css的CSS文件来为我们的页面添加样式。在style.css中，我们可以添加以下代码：

.container {
  margin: 100px auto;
  width: 300px;
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input {
  margin: 10px 0;
  padding: 5px;
}

button {
  margin: 10px 0;
  padding: 5px 10px;
}

.hide {
  display: none;
}

接下来，我们需要创建一个名为script.js的JavaScript文件来处理页面上的逻辑。在script.js中，我们可以添加以下代码：

document.getElementById("login-form").addEventListener("submit", function(event) {
  event.preventDefault();

  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username === "admin" && password === "password") {
    showBlogPage(username);
  } else {
    alert("Invalid username or password");
  }
});

function showBlogPage(username) {
  document.getElementById("welcome-message").textContent = "Welcome, " + username + "!";
  document.getElementById("blog-page").classList.remove("hide");

  // Simulated blog posts
  var blogList = document.getElementById("blog-list");
  blogList.innerHTML = "";

  var post1 = document.createElement("li");
  post1.textContent = "First blog post";
  blogList.appendChild(post1);

  var post2 = document.createElement("li");
  post2.textContent = "Second blog post";
  blogList.appendChild(post2);
}

现在，我们已经完成了个人博客页面的基本开发。在浏览器中打开index.html文件，您将看到一个登录表单。如果您输入正确的用户名（admin）和密码（password），则会显示一个欢迎消息和模拟的博客帖子列表。

请注意，这只是一个简单的示例个人博客页面，用于说明HTML、CSS和JavaScript的基本用法。实际的个人博客可能需要更复杂的功能和设计。

##欢迎关注交流