网页设计页面布局代码
时间: 2023-11-02 15:06:18 浏览: 32
网页设计的页面布局代码通常使用 HTML 和 CSS 语言编写。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
/* CSS 样式 */
body {
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #ccc;
padding: 10px;
text-align: center;
}
section {
float: left;
width: 70%;
padding: 10px;
}
aside {
float: right;
width: 30%;
padding: 10px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<!-- HTML 标记 -->
<header>
<h1>网页标题</h1>
</header>
<nav>
<ul>
<li><a href="#">导航链接1</a></li>
<li><a href="#">导航链接2</a></li>
<li><a href="#">导航链接3</a></li>
</ul>
</nav>
<section>
<p>内容区域</p>
</section>
<aside>
<p>侧边栏</p>
</aside>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>
```
这段代码定义了一个包含标题、导航、内容区域、侧边栏和页脚的页面布局。其中,`<header>`、`<nav>`、`<section>`、`<aside>` 和 `<footer>` 是 HTML5 新增的语义化标签,用于更好地描述页面的结构和内容。CSS 样式定义了这些标签的外观和布局。