HTML5期末考核大作业、HTML个人主页界面设计源码
以下是一个简单的HTML5个人主页界面设计的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人主页</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f7f7f7;
}
.header {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
.content {
margin: 15px;
padding: 20px;
background-color: white;
min-height: 400px;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="header">
<h1>欢迎来到我的主页</h1>
</div>
<div class="content">
<h2>主要内容</h2>
<p>这里是主页的内容区域,可以根据需要添加更多的信息或者其他的HTML元素。</p>
</div>
<div class="footer">
<p>版权所有 © 2023 我的主页</p>
</div>
</body>
</html>
这个示例展示了一个简单的HTML5个人主页布局,包括头部(Header)、内容区(Content)和底部(Footer)。使用CSS进行了简单的样式设计,包括颜色、字体和布局。这个示例可以作为学生进行HTML5个人主页设计的起点。
评论已关闭