<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>flex布局</title>
<style type="text/css">
#app {
margin: 0 auto;
border: 1px solid #ccc;
width: 80%;
}
.box {
display: flex;
align-items: center;
align-content: center;
height: 200px;
}
.item {
flex: 1;
height: 100px;
background-color: bisque;
border: 1px solid #ccc;
font-size: 12px;
color: #666;
align-items: center;
display: flex;
justify-content: center;
}
.right {
padding-left: 10px;
}
.title {
font-size: 14px;
font-weight: bold;
}
.des {
margin-top: 10px;
font-size: 12px;
}
.left img {
width: 80px;
}
.lists li {
display: flex;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="app">
<div class="list">
<div class="box">
<div class="item">高清全景，建议在WIFI下浏览</div>
<div class="item">高清全景，建议在WIFI下浏览</div>
<div class="item">高清全景，建议在WIFI下浏览</div>
</div>
</div>
<div class="lists">
<ul>
<li>
<div class="left">
<img src="https://hbimg.huabanimg.com/1ee0618410b7f4c208aefabcf582b7ff4d1d0373802d6-vw5XyA_fw658/format/webp"
alt="">
</div>
<div class="right">
<div class="title">环境变量配置部分</div>
<div class="des">理解环境变量配置这部分可以帮助我们减少去踩一些不必要的坑。简单说明上面涉及的环境变量。</div>
</div>
</li>
<li>
<div class="left">
<img src="https://hbimg.huabanimg.com/1ee0618410b7f4c208aefabcf582b7ff4d1d0373802d6-vw5XyA_fw658/format/webp"
alt="">
</div>
<div class="right">
<div class="title">环境变量配置部分</div>
<div class="des">理解环境变量配置这部分可以帮助我们减少去踩一些不必要的坑。简单说明上面涉及的环境变量。</div>
</div>
</li>
</ul>
</div>
</bod>
</html>
1314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
