# 常用的 CSS 主流布局案例（73~80）
涵盖功能和技术点
- 常见的网页布局以及功能模块
- 涉及 HTML/HTML5、CSS/CSS3 主流布局相关知识点（常规布局和 Flex 布局等）
- 专项 CSS 主流布局案例（针对性训练）
# 73、面包屑导航
应用场景和技术要点
重点：面包屑导航的分隔线以 / 字符来实现就好
See the Pen 81、面包屑导航 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.nav {
display: flex;
align-items: center;
}
.nav-separator {
margin: 0 8px;
}
</style>
<body>
<div class="nav">
<a>首页</a>
<!-- 分隔器 -->
<div class="nav-separator">/</div>
<a>商品</a>
<div class="nav-separator">/</div>
<a>鞋子</a>
<div class="nav-separator">/</div>
</div>
</body>
# 74、圆形导航
应用场景和技术要点
圆形导航布局原理：所有子项都相对于中间的圆形定位，因为所有子项最后要形成一个圆形，所以子项是先旋转再进行位置的移动。
See the Pen 82、圆形导航 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.nav {
position: relative;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background-color: skyblue;
border-radius: 50%;
margin: 100px auto;
}
.nav-circle {
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
/*总共6个子项，每个子项的旋转角度为 360deg / 6=60deg*/
transform: rotate(calc(var(--i) * 60deg)) translateX(-100px);
/* opacity: 0; */
}
.nav-content {
width: 100%;
height: 100%;
background-color: pink;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
/*元素发生旋转后，造成文字的角度也发生了变化，把要逆时针旋转相同角度*/
transform: rotate(calc(var(--i) * -60deg));
}
</style>
<body>
<!-- 点击nav，将触发显示所有圆圈 -->
<div class="nav">
首页
<!--圆形菜单项-->
<div class="nav-circle" style="--i: 0">
<div class="nav-content">菜单1</div>
</div>
<div class="nav-circle" style="--i: 1">
<div class="nav-content">菜单2</div>
</div>
<div class="nav-circle" style="--i: 2">
<div class="nav-content">菜单3</div>
</div>
<!--下面再重复3项-->
</div>
</body>
# 75、普通菜单
应用场景和技术要点
重点：通过给最后一个子项设置 margin-left:auto;使元素在最右边对齐
See the Pen 83、普通菜单 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.menu {
display: flex;
flex-direction: column;
border: 1px solid #333;
border-radius: 4px;
padding: 0px 10px;
}
.menu-item {
display: flex;
align-items: center;
margin: 2px 0;
}
.menu-hotkey {
margin-left: auto;
padding: 3px 4px;
border-radius: 5px;
background-color: pink;
}
.img-up {
margin-right: 5px;
}
</style>
<body>
<div class="menu">
<div class="menu-item">
<!-- 第一种菜单 -->
<div>第二种菜单</div>
<span class="menu-hotkey">热</span>
</div>
<div class="menu-item">
<!-- 第二种菜单 -->
<img src="images/up.png" alt="" class="img-up" />
<div class="title">第二种菜单</div>
<span class="menu-hotkey">热</span>
</div>
</div>
</body>
# 76、抽屉式导航
应用场景和技术要点
重点：黑色的半透明全屏遮罩层设置。
See the Pen 84、抽屉式导航 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
/* 容器全屏 */
.container {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 9999;
background-image: linear-gradient(to right, yellow, pink);
}
/*背景幕布-黑色半透明遮罩*/
.overlay {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
}
/*左侧菜单*/
.sidebar {
height: 100%;
width: 200px;
position: fixed;
left: 0;
top: 0;
background-color: #fff;
}
</style>
<body>
<div class="container">
<!-- 黑色半透明幕布 -->
<div class="overlay"></div>
<!-- 左侧菜单 -->
<div class="sidebar">...菜单</div>
</div>
</body>
# 77、下拉菜单
应用场景和技术要点
- 下拉菜单布局原理：子项相对于父元素垂直定位，然后子项 默认设置为 display:none;
- 当鼠标滑动到父元素时，设置子项 display:block，让子项显示。
See the Pen 85、下拉菜单 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.menu {
position: relative;
}
.menu-title {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 30px;
border: 1px solid #333;
padding-right: 20px;
background: url(images/down.png) no-repeat 90px 6px;
background-size: 24px;
}
/* 默认隐藏下拉菜单内容*/
.menu-content {
height: 200px;
width: 200px;
background-color: pink;
padding-top: 4px;
position: absolute;
left: 0;
top: 100%;
z-index: 9999;
display: none;
}
/*鼠标滑上去，显示下拉菜单内容*/
.menu:hover .menu-content {
display: block;
}
</style>
<body>
<div class="menu">
<div class="menu-title">产品分类</div>
<!-- 下拉菜单内容 -->
<div class="menu-content">.......</div>
</div>
</body>
# 78、全屏菜单
应用场景和技术要点
重点：如何利用 flex 布局来控制菜单内容在水平和垂直方向居中
See the Pen 86、全屏菜单 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.container {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: skyblue;
}
/*关闭按扭*/
.container-close {
background-color: #ddd;
border: 1px solid #333;
position: absolute;
right: 16px;
top: 16px;
}
</style>
<body>
<div class="container">
<!-- The close button -->
<button class="container-close">X</button>
<!-- 菜单 -->
<ul>
<li>菜单1</li>
<li>菜单2</li>
...
</ul>
</div>
</body>
# 79、通栏菜单
应用场景和技术要点
通栏菜单的核心点是：二级菜单并不是相对于直接的父元素定位，而是相对于父元素的父元素定位。
See the Pen 87、通栏菜单 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.container {
height: 50px;
position: relative; /*通栏导航相对定位元素*/
display: flex;
background-color: skyblue;
}
.container .item {
padding: 0px 20px;
display: flex;
align-items: center;
justify-content: center;
}
.item-content {
width: 100%;
min-height: 100px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-top-width: 0;
background: pink;
margin-top: -1px;
position: absolute; /*绝对定位-相对于最外层的.container*/
left: 0px;
top: 100%;
box-sizing: border-box;
z-index: 9999;
display: none;
}
.item:hover {
background-color: pink;
}
/*鼠标滑动显示超大菜单内容*/
.item:hover .item-content {
display: block;
}
</style>
<body>
<div class="container">
<div class="item">菜单1</div>
<div class="item">菜单2</div>
<div class="item">
菜单3
<div class="item-content">通栏二级菜单</div>
</div>
<div class="item">菜单4</div>
</div>
</body>
# 80、多级下拉菜单
应用场景和技术要点
重点：通过绝对定位来控制下拉菜单的位置，通过 display 属性来设置菜单的显示与隐藏。通过：hover 来实现鼠标滑动上去显示，移开隐藏。
See the Pen 88、多级下拉菜单 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.dropdown {
display: flex;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.dropdown li {
padding: 8px;
position: relative;
}
/* 子下拉菜单 */
.dropdown ul {
width: 200px;
border: 1px solid rgba(0, 0, 0, 0.3);
position: absolute;
left: 0;
top: 100%;
display: none; /*默认隐藏*/
}
/* 第二级子下拉列表 */
.dropdown ul ul {
position: absolute;
left: 100%;
top: 0;
}
/*鼠标滑动显示背景色*/
.dropdown li:hover {
background-color: rgba(0, 0, 0, 0.1);
}
/* 悬停列表项时显示直接子下拉列表 */
.dropdown li:hover > ul {
display: block;
}
</style>
<body>
<ul class="dropdown">
<li>首页</li>
<li>
<div>视频教程</div>
<ul>
<!-- 一级下拉菜单-->
<li>前端</li>
<li>java</li>
<li>
<div>大数据</div>
<ul>
<!--二级下拉菜单 -->
<li>基础</li>
<li>高级</li>
</ul>
</li>
</ul>
</li>
<li>产品展示</li>
<li>关于我们</li>
</ul>
</body>
大厂最新技术学习分享群
微信扫一扫进群，获取资料
X