收藏
天蓬老师批改状态：合格
老师批语：不错
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>爱给网-三列布局</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}a {text-decoration: none;color: lightslategray;}a:hover:not(:first-of-type) {color: black;}body {display: flex;flex-flow: column nowrap;}header,footer {margin-top: 10px;height: 50px;/* border: 1px solid #000; */}header {display: flex;align-items: center;background-color: lightgray;}header > a {flex: 0 1 50px;text-align: center;}header > a:first-of-type {margin-right: 30px;}header > a:last-of-type {margin-left: 550px;}.container {display: flex;/* min-height: 450px; */}.container > aside,main {flex: 0 0 364px;background-color: linen;/* border: 1px solid lightgray; */}.container > aside {display: flex;flex-direction: column;}.container > main {display: flex;flex-direction: column;}aside > .lie {display: flex;flex-flow: row wrap;/* width: 360px; */}main > .lie {display: flex;flex-flow: row wrap;/* width: 360px; */}.top {display: flex;flex-direction: row;flex:0 1 50px;margin-bottom: 20px;}}.item {display:flex;flex-direction: row;flex:0 1 50px;width: 180px;border: 1px solid lightgray;}footer > p {text-align: center;}</style></head><body><!-- 页眉 --><header><a href=""><img src="/logo.jpg" alt="" /></a><a href="">音效</a><a href="">配乐</a><a href="">视频</a><a href="">3D</a><a href="">游戏</a><a href="">平面</a><a href="">教程</a><a href="">登录</a></header><!-- 主体 --><div class="container"><!-- 左边栏 --><aside><div><div class="top"><h3>常用</h3><p>共12万篇</p></div></div><div class="lie"><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div></div></aside><!-- 主体内容区 --><main><div><div class="top"><h3>常用</h3><p>共12万篇</p></div></div><div class="lie"><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div></div></main><!-- 右边栏 --><aside><div><div class="top"><h3>常用</h3><p>共12万篇</p></div></div><div class="lie"><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div><div class="item"><h4>自然环境</h4><p>天气 灾害 环境</p><a href=""><img src="/1.jpg" alt="" /></a></div></div></aside></div><!-- 页脚 --><footer><p>版权所有©2013-2018 爱给网络 鄂ICP备17000000号</p></footer></body></html>
对flex的6个属性设置在容器上面的使用有了一定的了解.
设置在项目上的6个属性
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
