网页代码进行排版
时间: 2023-07-10 17:15:46 浏览: 58
好的,以下是排版后的网页代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
nav {
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
nav ul li a {
color: #333;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
main {
margin: 20px;
}
article {
margin-bottom: 20px;
}
article h3 {
margin-top: 0;
}
footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Welcome to my website!</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<h2>Recent Posts</h2>
<article>
<h3>Post Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae enim quis metus malesuada sagittis eu vel justo.</p>
</article>
<article>
<h3>Another Post Title</h3>
<p>Sed eget ante eu nulla tincidunt tempus. Donec quis malesuada massa.</p>
</article>
</main>
<footer>
<p>© 2021 My Website</p>
</footer>
</body>
</html>
```
在这个排版后的代码中,我们使用了 CSS 样式来控制网页的样式和布局。我们将所有样式都放在了 `<style>` 标签中,在样式中设置了页面的字体、页边距、背景色等。同时,我们对 `<header>`、`<nav>`、`<main>`、`<article>`、`<footer>` 等元素进行了样式设置,使它们在页面中有明显的区分和排版效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)