html主页界面设计代码
时间: 2023-06-30 12:06:48 浏览: 55
以下是一个简单的 HTML 主页界面设计代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Home Page</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #444;
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
font-size: 18px;
margin-right: 20px;
text-decoration: none;
}
section {
margin: 20px;
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Home Page</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<section>
<h2>About Me</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus neque auctor, eleifend leo in, ultrices turpis. Duis tristique arcu eu quam maximus feugiat.</p>
<p>Etiam vel efficitur sapien. Sed ac mauris nec erat aliquam dictum. Nullam tincidunt enim in ex ullamcorper, non euismod mi interdum.</p>
</section>
<footer>
<p>© 2021 My Home Page. All rights reserved.</p>
</footer>
</body>
</html>
```
这个代码包括了一个简单的页面布局,包括了一个 header,一个 nav,一个 section 和一个 footer。其中,header 中包含了一个欢迎语,nav 中包含了三个链接,section 中包含了一些关于我的介绍,footer 中包含了版权信息。你可以根据自己的需要进行修改和定制。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)