HTML5 和 CSS 响应式 Web 设计
<!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: #92a8d1;
padding: 10px;
color: white;
text-align: center;
}
.nav {
float: left;
width: 20%;
background: #87ceeb;
padding: 15px 0;
text-align: center;
}
.nav a {
color: inherit;
text-decoration: none;
display: block;
padding: 5px;
}
.nav a:hover {
background-color: #778899;
}
.content {
float: right;
width: 80%;
padding: 15px;
}
@media screen and (max-width: 799px) {
.nav, .content {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>响应式布局示例</h1>
</div>
<div class="nav">
<a href="#">主页</a>
<a href="#">关于我们</a>
<a href="#">产品</a>
<a href="#">联系方式</a>
</div>
<div class="content">
<h2>内容</h2>
<p>这里是内容区域，可以根据屏幕大小自适应调整。</p>
</div>
</body>
</html>这个示例展示了如何使用CSS媒体查询（Media Queries）来创建一个基本的响应式布局。当屏幕宽度小于799像素时，导航栏和内容区域不再浮动，并且每个区域占满整个屏幕宽度。这样就可以在不同大小的设备上提供更好的用户体验。
评论已关闭