html个人主页响应式
时间: 2023-12-25 17:29:39 浏览: 22
响应式网页设计是一种能够根据不同设备和屏幕尺寸自动调整布局和样式的设计方法。下面是一个使用HTML和CSS实现响应式个人主页的例子:
```html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
padding: 20px;
background-color: #f2f2f2;
}
.nav {
display: flex;
justify-content: center;
background-color: #333;
padding: 10px;
}
.nav a {
color: #fff;
text-decoration: none; padding: 10px;
margin: 0 5px;
}
.content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.content .item {
flex-basis: 30%;
margin-bottom: 20px;
padding: 10px;
background-color: #f2f2f2;
}
@media screen and (max-width: 768px) {
.content .item {
flex-basis: 45%;
}
}
@media screen and (max-width: 480px) {
.content .item {
flex-basis: 100%;
}
}
.footer {
text-align: center;
padding: 20px;
background-color: #f2f2f2;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1>个人主页</h1>
</header>
<nav class="nav">
<a href="#">首页</a>
<a href="#">关于我</a>
<a href="#">作品</a>
<a href="#">联系我</a>
</nav>
<div class="content">
<div class="item">
<h2>个人简介</h2>
<p>这里是个人简介的内容。</p>
</div>
<div class="item">
<h2>最新作品</h2>
<p>这里是最新作品的内容。</p>
</div>
<div class="item">
<h2>联系方式</h2>
<p>这里是联系方式的内容。</p>
</div>
</div>
<footer class="footer">
<p>版权所有 © 2021</p>
</footer>
</div>
</body>
</html>
```
这个例子中,我们使用了CSS的`@media`查询来根据不同的屏幕尺寸设置不同的样式。在小屏幕上,每个项目的宽度会变为100%,在中等屏幕上,每个项目的宽度会变为45%,在大屏幕上,每个项目的宽度会变为30%。这样就能够实现在不同设备上都能够良好显示的响应式个人主页。