HTML 博客模板：包含代码、目录和侧边栏
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
<meta charset="UTF-8">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #eee;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
color: #333;
text-decoration: none;
padding: 5px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
nav ul li a:hover {
background-color: #333;
color: #fff;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 10px;
}
article {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px #ccc;
margin-bottom: 20px;
padding: 10px;
width: 600px;
}
h1, h2, h3, h4, h5, h6 {
color: #333;
}
code {
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
font-family: Consolas, monospace;
padding: 5px;
}
pre {
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
font-family: Consolas, monospace;
overflow-x: auto;
padding: 10px;
white-space: pre-wrap;
word-wrap: break-word;
}
img {
max-width: 100%;
height: auto;
}
aside {
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px #ccc;
padding: 10px;
width: 200px;
}
aside ul {
list-style-type: none;
margin: 0;
padding: 0;
}
aside ul li {
margin-bottom: 5px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>My Blog</h1>
</header>
<nav>
<ul>
<li><a href="#post1">Post 1</a></li>
<li><a href="#post2">Post 2</a></li>
<li><a href="#post3">Post 3</a></li>
</ul>
</nav>
<main>
<article id="post1">
<h2>Post 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac libero at velit bibendum aliquet. Fusce ipsum ante, convallis eget ultricies quis, sagittis eu risus. Donec ut felis lorem. Aliquam erat volutpat. In hac habitasse platea dictumst. Nulla eros sapien, malesuada quis pharetra eu, hendrerit quis diam. Nam in feugiat metus.</p>
<pre><code>
// Example code
function helloWorld() {
console.log('Hello, world!');
}
helloWorld();
</code></pre>
<img src="https://via.placeholder.com/600x400" alt="Placeholder image">
</article>
<article id="post2">
<h2>Post 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac libero at velit bibendum aliquet. Fusce ipsum ante, convallis eget ultricies quis, sagittis eu risus. Donec ut felis lorem. Aliquam erat volutpat. In hac habitasse platea dictumst. Nulla eros sapien, malesuada quis pharetra eu, hendrerit quis diam. Nam in feugiat metus.</p>
<pre><code>
// Example code
function helloWorld() {
console.log('Hello, world!');
}
helloWorld();
</code></pre>
<img src="https://via.placeholder.com/600x400" alt="Placeholder image">
</article>
<article id="post3">
<h2>Post 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac libero at velit bibendum aliquet. Fusce ipsum ante, convallis eget ultricies quis, sagittis eu risus. Donec ut felis lorem. Aliquam erat volutpat. In hac habitasse platea dictumst. Nulla eros sapien, malesuada quis pharetra eu, hendrerit quis diam. Nam in feugiat metus.</p>
<pre><code>
// Example code
function helloWorld() {
console.log('Hello, world!');
}
helloWorld();
</code></pre>
<img src="https://via.placeholder.com/600x400" alt="Placeholder image">
</article>
<aside>
<h3>Categories</h3>
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
</ul>
<h3>Recent Posts</h3>
<ul>
<li><a href="#post1">Post 1</a></li>
<li><a href="#post2">Post 2</a></li>
<li><a href="#post3">Post 3</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2021 My Blog</p>
</footer>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/mtYC 著作权归作者所有。请勿转载和采集!