自适应布局(附源码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 重置一下 */
* {
padding: 0;
border: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
}
/* 搬砖 */
.MLGB {
/* height: 500px; */
background-color: antiquewhite;
}
.header {
display: flex;
align-items: center;
height: 50px;
font-size: 18px;
padding: 0 10px;
color: #fff;
text-align: center;
background-color: #f97c7c;
}
.main {
display: flex;
}
/* 切换菜单的按钮 */
.toggle-menu {
height: 30px;
line-height: 30px;
text-align: center;
width: 30px;
font-size: 14px;
background-color: #607d8b;
margin-right: 10px;
}
/* 菜单 */
.menu {
flex: 0 0 140px;
background-color: #5ed5e4;
}
.menu .li {
height: 30px;
line-height: 30px;
padding: 0 10px;
border-bottom: 1px solid #91dfe8;
}
.nav {
/* height: 100px; */
display: flex;
flex-wrap: wrap;
flex: 1 1 100%;
}
.nav::after {
content: "";
display: block;
height: 0;
clear: both;
overflow: hidden;
}
.box {
display: flex;
justify-content: center;
flex: 1 1 auto;
min-width: 160px;
height: 100px;
line-height: 100px;
text-decoration: none;
font-size: 18px;
border: 1px solid #ddd;
}
/* 媒体查询 */
@media screen and (min-width: 500px) {
.header .toggle-menu {
display: none;
}
}
@media screen and (max-width: 500px) {
.header .toggle-menu {
display: block;
}
.menu {
display: none;
}
}
</style>
</head>
<body>
<div class="MLGB">
<!-- 头部 -->
<div class="header">
<div id="toggle" class="toggle-menu">菜</div>
<div id="facility">设备</div>
<div class="title">欢迎大家来到，双十一天猫主会场！</div>
</div>
<!-- 主要内容区域 -->
<div class="main">
<!-- 左侧菜单 -->
<div id="menu" class="menu">
<div class="li">购物车</div>
<div class="li">我的收藏</div>
<div class="li">浏览记录</div>
<div class="li">已经购买</div>
<div class="li">设置</div>
<div class="li">退出</div>
</div>
<!-- 分会场入口 -->
<div class="nav">
<a class="box" href="##">鞋子</a>
<a class="box" href="##">箱包</a>
<a class="box" href="##">数码</a>
<a class="box" href="##">服装</a>
<a class="box" href="##">乐器</a>
<a class="box" href="##">户外</a>
<a class="box" href="##">家具</a>
<a class="box" href="##">家具</a>
<a class="box" href="##">影视</a>
<a class="box" href="##">美食</a>
</div>
</div>
</div>
</body>
<script>
let toggle = document.querySelector('#toggle');
let menu = document.querySelector('#menu');
let facility =document.querySelector('#facility');
toggle.onclick = function () {
if (menu.style.display == 'block') {
menu.style.display = 'none';
}else{
menu.style.display = 'block';
}
}
facility.addEventListener('click',()=>{
console.log(1);
console.log(navigator.userAgent);
})
</script>
</html>
头部（Header）
包含一个切换菜单的按钮（toggle-menu），用于在小屏幕设备上显示或隐藏菜单。
一个标题（title），显示“欢迎大家来到，双十一天猫主会场！”。
主要内容区域（Main）
左侧菜单（menu），包含购物车、我的收藏、浏览记录、已经购买、设置和退出等选项。
分会场入口（nav），包含多个链接（box），指向不同的商品分类，如鞋子、箱包、数码等。
重置样式
所有元素的padding、border、margin、outline和box-sizing属性被重置。
头部样式（Header）
显示为一行，高度为50px，字体大小18px，背景颜色为#f97c7c。
文本居中显示，颜色为白色。
切换菜单按钮样式（Toggle Menu）
高度和行高均为30px，背景颜色为#607d8b，用于在小屏幕设备上切换菜单显示。
菜单样式（Menu）
宽度固定为140px，背景颜色为#5ed5e4。
每个菜单项（li）高度为30px，有1px的底部边框。
分会场入口样式（Nav）
显示为一行，可以包裹多行。
每个入口（box）居中显示，高度和行高均为100px，字体大小18px，边框1px。
媒体查询（Media Queries）
当屏幕宽度大于500px时，隐藏切换菜单按钮，显示菜单。
当屏幕宽度小于或等于500px时，显示切换菜单按钮，隐藏菜单。
切换菜单功能
toggle.onclick：当点击切换按钮时，检查菜单的显示状态，如果显示则隐藏，如果隐藏则显示。
页:
[1]