<cn> #### 固定头部 一般用于固定顶部导航,方便页面切换。 </cn> <us> #### Fixed Header Fixed Header is generally used to fix the top navigation to facilitate page switching. </us> ```html <template> <a-layout id="components-layout-demo-fixed"> <a-layout-header :style="{ position: 'fixed', width: '100%' }"> <div class="logo" /> <a-menu theme="dark" mode="horizontal" :defaultSelectedKeys="['2']" :style="{ lineHeight: '64px' }" > <a-menu-item key="1">nav 1</a-menu-item> <a-menu-item key="2">nav 2</a-menu-item> <a-menu-item key="3">nav 3</a-menu-item> </a-menu> </a-layout-header> <a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }"> <a-breadcrumb :style="{ margin: '16px 0' }"> <a-breadcrumb-item>Home</a-breadcrumb-item> <a-breadcrumb-item>List</a-breadcrumb-item> <a-breadcrumb-item>App</a-breadcrumb-item> </a-breadcrumb> <div :style="{ background: '#fff', padding: '24px', minHeight: '380px' }">Content</div> </a-layout-content> <a-layout-footer :style="{ textAlign: 'center' }"> Ant Design ©2016 Created by Ant UED </a-layout-footer> </a-layout> </template> <style> #components-layout-demo-fixed .logo { width: 120px; height: 31px; background: rgba(255,255,255,.2); margin: 16px 24px 16px 0; float: left; } </style> ```