静态HTML明星主页 HTML+CSS 周杰伦明星页面(学生课程设计网页设计制作大作业)
以下是一个简单的示例,展示了如何创建一个静态的周杰伦明星主页。这个示例仅包含HTML和CSS代码,并不是完整的项目,但它可以作为开始构建类似页面的基础。
<!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;
}
.header {
background-color: #f44336;
color: white;
padding: 10px 0;
text-align: center;
}
.content {
margin: 15px;
display: flex;
justify-content: space-around;
}
.content-left {
width: 40%;
text-align: center;
}
.content-right {
width: 50%;
text-align: center;
}
img {
width: 200px;
height: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="header">
<h1>周杰伦明星主页</h1>
</div>
<div class="content">
<div class="content-left">
<img src="周杰伦.jpg" alt="周杰伦">
<p>这里可以添加关于周杰伦的个人信息和简介。</p>
</div>
<div class="content-right">
<h2>周杰伦的作品</h2>
<p>列出周杰伦的代表作品,如电影、电视剧等。</p>
</div>
</div>
</body>
</html>
在这个示例中,我们创建了一个简单的HTML结构,并通过内联CSS为页面设置了基本的样式。这个页面包括了一个头部(header),用于展示页面标题,以及一个内容区域(content),其中包括周杰伦的头像和简介。这个示例提供了一个基本框架,可以根据实际需求进行扩展和个性化设计。
评论已关闭