弹性盒flex的使用
16lz
2021-11-12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伸缩盒</title>
<style>
header{
min-width: 1200px;
height: 100px;
display: flex;
align-items: center;
justify-content: space-around;
}
.logo{
height: 100%;
width: 200px;
background: url("https://www.php.cn/static/images/PHPlogo.png") no-repeat;
background-size: cover;
}
.nav{
width: 800px;
display: flex;
justify-content: space-between;
}
.info{
width: 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
.head_img{
width: 50px;
height: 50px;
background: cornflowerblue;
border-radius: 50%;
line-height: 50px;
text-align: center;
color: #FF0000;
}
</style>
</head>
<body>
<header>
<div class="logo"></div>
<div class="nav">
<div class="nav_item">首页</div>
<div class="nav_item">视频教程</div>
<div class="nav_item">学习路径</div>
<div class="nav_item">大前端</div>
<div class="nav_item">资源下载</div>
<div class="nav_item">技术文章</div>
<div class="nav_item">社区</div>
</div>
<div class="info">
<div class="msg">消息</div>
<div class="head_img">头像</div>
</div>
</header>
</body>
</html>
更多相关文章
- 云原生中定时弹性伸缩之CronHPA实战
- 通过kuboard实现弹性伸缩
- 自动调节AWS的步骤
- 闲聊Kubernetes Pod垂直自动伸缩(VPA)
- Kubernetes Pod水平自动伸缩(HPA)
- 《高可用可伸缩微服务架构:基于 Dubbo、Spring Cloud 和 Service
- Android(安卓)----可伸缩的控件
- RotateAnimation类:旋转变化动画类
- android 自定义ScrollView实现背景图片伸缩的实现代码及思路