10.1 双列布局
在网页上创建复杂布局需要对各种定位方法及其组合有深入了解。在这节课中，我们将通过一些使用CSS技术（例如Flexbox、Grid和传统定位）的实际例子来探讨创建复杂布局的方法。
带固定导航的博客布局
这个布局包括一个标题栏，一个固定的导航栏，主要内容和一个侧边栏。
示例：
CSS
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #444;
color: white;
padding: 10px;
box-sizing: border-box;
z-index: 1000;
}
.container {
display: flex;
margin-top: 60px; /* 固定导航的高度 */
}
.main-content {
flex: 3;
padding: 20px;
}
.sidebar {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: relative;
margin-top: auto;
}
HTML
<div class="header">My Blog</div>
<div class="navbar">Navigation</div>
<div class="container">
<div class="main-content">
<h1>Main Content</h1>
<p>Here is the main content of the blog.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>Links and other content.</p>
</div>
</div>
<div class="footer">Footer</div>
在这个例子中，固定的导航栏在页面滚动时保持不变，使用的是position: fixed。主要内容和侧边栏通过Flexbox布局在两列中显示。
10.2 单页网站
带固定标题和底部栏的单页网站
这个布局包括一个标题，主要内容和一个底部栏。标题和底部栏在页面滚动时仍然可见。
示例：
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
}
.main {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
.footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
position: sticky;
bottom: 0;
z-index: 1000;
}
HTML
<div class="header">Sticky Header</div>
<div class="main">
<h1>Main Content</h1>
<p>Here is the main content of the page. Scroll to see the sticky header and footer in action.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus lectus eu tortor vehicula, et convallis lacus varius. Integer at orci in nisl faucibus placerat.</p>
</div>
<div class="footer">Sticky Footer</div>
在这个例子中，标题和底部栏在页面滚动时仍然可见，使用的是position: sticky。
10.3 多级导航栏
这个布局包含一个多级导航栏，使用嵌套列表和伪类创建下拉菜单。
示例：
CSS
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}
.navbar li ul {
display: none;
position: absolute;
background-color: #333;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
float: none;
}
.navbar li ul li a {
padding: 14px 16px;
}
HTML
<div class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Marketing</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
GO TO FULL VERSION