<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Blog</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f0f2f5;
}
.container {
max-width: 900px;
margin: 50px auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1 {
color: #333;
}
.post {
margin-bottom: 20px;
}
.post h2 {
margin: 0;
}
.post p {
margin: 5px 0;
}
.post a {
color: #007bff;
text-decoration: none;
}
.post a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Blog</h1>
<div class="post">
<h2><a href="#">Understanding JavaScript Closures</a></h2>
<p>Published on September 10, 2024</p>
<p>In this post, we will explore the concept of closures in JavaScript and how they can be used to create private variables and functions.</p>
</div>
<div class="post">
<h2><a href="#">A Guide to CSS Grid Layout</a></h2>
<p>Published on August 5, 2024</p>
<p>This post covers the basics of CSS Grid Layout and how you can use it to create complex and responsive layouts.</p>
</div>
<div class="post">
<h2><a href="#">Introduction to React Hooks</a></h2>
<p>Published on July 20, 2024</p>
<p>Learn about React Hooks, a new feature that allows you to use state and other React features without writing a class.</p>
</div>
</div>
</body>
</html>
示例 31: 个人博客首页
原创
©著作权归作者所有:来自51CTO博客作者避风塘主的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:示例 32: 简单的天气应用
下一篇:示例 30: 图像画廊
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
【SpringBoot搭建个人博客】- 博客首页显示(十)
博客:ONESTARの客栈源码方式一:扫一扫文末二维码,关注公众号【编程日刊】,后台回复【博客】,即可源码源码方式二
spring boot 博客系统开发 Mybatis ide 实体类 -
个人博客-首页后台开发(一)
声明:本渣渣部分代码参考自TendCode其实有很多代码是不需要自己一行行码出来,生产力是第一
python django 数据库 通用视图 -
如何愉快开始在github玩耍——项目首页or个人博客
内容较多,版面也不是很美。请您耐心看。适合人群:刚接触,比较好奇的。
用户名 continue create setting github public -
个人博客构建——github个人博客
摘要博文参考使用Github搭建属于自己的博客 - 简书
github 配置文件 node.js -
个人博客个人博客