一、简单页面
<!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的基本用法。实际的个人博客可能需要更复杂的功能和设计。
##欢迎关注交流