Html 指南:全屏固定布局网页(页眉、搜索栏、内容、事件列表和页脚)
其目的是使用flex制作具有页眉、搜索/导航栏、内容、事件列表和页脚的全屏大小的网页Html 指南:全屏固定布局网页(页眉、搜索栏、内容、事件列表和页脚),html,css,structure,flexbox,Html,Css,Structure,Flexbox,其目的是使用flex制作具有页眉、搜索/导航栏、内容、事件列表和页脚的全屏大小的网页 下面是解决方案和示例 1使用柱方向进行弯曲 基本结构HTML: <header> <div class="left"> <!-- Here comes button, later in document --> </div> <div class="title"> Page branch </div> &l
下面是解决方案和示例 1使用柱方向进行弯曲 基本结构HTML:
<header>
<div class="left">
<!-- Here comes button, later in document -->
</div>
<div class="title">
Page branch
</div>
<div class="right">
<!-- Here comes dropdown, which is later in document -->
</div>
</header>
<div class="container">
<nav>Searchbar etc.</nav>
<section class="content">Main content</section>
<aside>Event list</aside>
</div>
<footer>Copyright footer etc.</footer>
CSS:
左类中的按钮HTML追加:
<button class="button button-green">Button</button>
全部
HTML:
奖金
在事件列表中,您可能需要可滚动列表,而不会扰乱当前视图
HTML将此放在一边-元素:
<div class="scrollable-list"></div>
如果有什么需要改进的,请告诉我
<button class="button button-green">Button</button>
<div class="dropdown">
<div class="dropdown-title">Dropdown
<ul class="dropdown-content">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</div>
</div>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-title {
cursor: pointer;
}
.dropdown-content {
list-style: none;
display: none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
background-color: rgba(255,255,255,0.8);
z-index: 5;
}
.dropdown-title:hover .dropdown-content {
display: inline-block;
}
.dropdown-content li {
padding: 6px 10px;
white-space: nowrap;
}
.button {
display: inline-block;
border-radius: 6px;
transition: 0.2s ease-in-out;
outline-style:none;
cursor: pointer;
padding: 6px 12px;
}
.button-green {
border: 1px solid #aea;
background-color: #bfb;
}
.button-green:hover {
background-color: #dfd;
}
<header>
<div class="left">
<button class="button button-green">Button</button>
</div>
<div class="title">
Page branch
</div>
<div class="right">
<div class="dropdown">
<div class="dropdown-title">Dropdown
<ul class="dropdown-content">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>
</div>
</div>
</div>
</header>
<div class="container">
<nav>Searchbar etc.</nav>
<section class="content">Main content</section>
<aside>Event list</aside>
</div>
<footer>Copyright footer etc.</footer>
html, body {
height: 100%;
margin: 0px;
}
body {
display: flex;
flex-flow: column;
}
header {
flex: 0 1 auto;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
header .title {
flex: 0;
/* Keep branch in same line if has many words */
white-space: nowrap;
}
header .left, header .right {
flex: 1;
}
header .right {
text-align: right;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-title {
cursor: pointer;
}
.dropdown-content {
list-style: none;
display: none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
background-color: rgba(255,255,255,0.8);
}
.dropdown-title:hover .dropdown-content {
display: inline-block;
}
.dropdown-content li {
padding: 6px 10px;
white-space: nowrap;
}
.button {
display: inline-block;
border-radius: 6px;
transition: 0.2s ease-in-out;
outline-style:none;
cursor: pointer;
padding: 6px 12px;
}
.button-green {
border: 1px solid #aea;
background-color: #bfb;
}
.button-green:hover {
background-color: #dfd;
}
.container {
flex: 1 0 auto;
display: flex;
align-items: stretch;
}
nav, aside {
width: 200px;
flex: 0 0 auto;
padding: 10px;
box-sizing: border-box;
}
nav {
background-color: skyblue;
}
aside {
background-color: khaki;
}
.content {
flex: 1;
background-color: thistle;
}
footer {
flex: 0 1 auto;
padding: 10px;
text-align: center;
background-color: lemonchiffon;
}
<div class="scrollable-list"></div>
aside {
position: relative;
overflow-y: auto;
}
.scrollable-list {
position: absolute;
}