用Javascript编写一个博客主页,然后用css进行美化
时间: 2023-04-12 10:00:51 浏览: 89
非常感谢您的提问。这是一个编程类的问题,我可以回答。以下是一个简单的示例代码,用于创建一个基本的博客主页,并使用CSS进行美化:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>My First Blog Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit euismod bibendum blandit, velit sapien bibendum sapien, a bibendum sapien sapien eget mi. Sed euismod, velit euismod bibendum blandit, velit sapien bibendum sapien, a bibendum sapien sapien eget mi.</p>
<a href="#">Read More</a>
</article>
<article>
<h2>My Second Blog Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit euismod bibendum blandit, velit sapien bibendum sapien, a bibendum sapien sapien eget mi. Sed euismod, velit euismod bibendum blandit, velit sapien bibendum sapien, a bibendum sapien sapien eget mi.</p>
<a href="#">Read More</a>
</article>
</main>
<footer>
<p>© 2021 My Blog</p>
</footer>
</body>
</html>
```
CSS代码:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
margin: 20px;
}
article {
margin-bottom: 40px;
}
article h2 {
font-size: 24px;
margin-bottom: 10px;
}
article p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
article a {
background-color: #333;
color: #fff;
display: inline-block;
padding: 10px 20px;
text-decoration: none;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
这是一个简单的博客主页,其中包含一个标题、导航菜单、两篇博客文章和页脚。CSS用于美化页面,包括字体、颜色、间距和背景颜色等。