[HTML]Web前端开发技术11（HTMLCSSJavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页
以下是一个简单的HTML页面布局示例，使用了HTML5和CSS3，采用了“三行模式”布局：头部（header）、侧边栏（sidebar）和内容区（content）。
<!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, nav, section, aside, footer {
margin: 5px;
padding: 10px;
border: 1px solid #ddd;
}
header {
background-color: #f8f8f8;
text-align: center;
padding: 20px 0;
}
nav {
text-align: center;
background-color: #f2f2f2;
}
section {
text-align: center;
background-color: #e6e6e6;
}
aside {
text-align: center;
background-color: #d0d0d0;
}
footer {
background-color: #f8f8f8;
text-align: center;
padding: 20px 0;
}
</style>
</head>
<body>
<header>
<h1>页头</h1>
</header>
<nav>
<ul>
<li><a href="#">导航链接1</a></li>
<li><a href="#">导航链接2</a></li>
</ul>
</nav>
<section>
<h2>主要内容</h2>
<p>这里是主要内容区域...</p>
</section>
<aside>
<h3>侧边信息</h3>
<p>这里是侧边信息...</p>
</aside>
<footer>
<p>页脚信息</p>
</footer>
</body>
</html>这个示例展示了如何使用HTML5和CSS3创建一个基本的三行模式布局，具有头部、侧边栏和内容区。通过CSS样式，我们设定了不同区域的背景色和边框，以便更好地展示页面布局。
评论已关闭