HTML,给出一个能够自适应大小,且带有导航栏的网页框架代码
时间: 2024-09-12 20:17:39 浏览: 75
带导航全屏页面切换代码.rar_swimsgz_带导航全屏页面切换代码
HTML(HyperText Markup Language)是用于创建网页的标准标记语言。它通过各种标签定义网页的结构和内容。以下是一个简单的HTML页面框架代码,其中包含了一个自适应大小的导航栏:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应网页框架</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-around;
background-color: #333;
}
.navbar a {
text-decoration: none;
color: white;
padding: 14px 20px;
display: block;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.container {
padding: 20px;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">首页</a>
<a href="#news">新闻</a>
<a href="#contact">联系</a>
<a href="#about">关于我们</a>
</div>
<div class="container">
<h1>欢迎来到我的网站</h1>
<p>这是一个自适应大小的网页框架示例。</p>
</div>
</body>
</html>
```
在这个例子中,我们创建了一个简单的网页布局,包含了一个导航栏(navbar)和一个内容容器(container)。导航栏使用了弹性盒子(flexbox)布局,以实现导航项之间的均匀分布,并且能够响应不同屏幕尺寸的变化。
阅读全文