css弹出框挑战-3
css弹出框挑战-3
提问于 2022-03-26 08:01:41
**请帮助制作我在下面张贴的这个CSS页面**把它当作一个挑战，我试过但失败了。祝你愉快，在这里输入图像描述
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-03-26 11:02:22
至少通过展示您的代码尝试，您可以使您的问题变得更好，这样就可以有人帮助您完成您所坚持的任务。
我确实认为这个挑战可能很有趣，所以我的尝试如下(也在我的CodePen上)：
body {
margin: 0;
border: 0;
padding: 0;
width: 1360px;
height: 760px;
display: flex;
flex-direction: row;
font-size: 25px;
font-family: monospace;
}
nav {
padding: 8px;
border: 0;
margin: 0;
width: 20%;
height: 104.5%;
box-sizing: content-box;
display: flex;
flex-direction: column;
background-color: grey;
}
div {
padding: 0;
border: 0;
margin: 0;
width: 100%;
height: 100%;
flex-direction: column;
}
header {
padding: 8px;
border: 0;
margin: 0;
width: inherit;
height: 25%;
flex-direction: column;
background-color: indianred;
}
article {
padding: 8px;
border: 0;
margin: 0;
width: inherit;
height: 50%;
flex-direction: column;
background-color: sandybrown;
}
footer {
padding: 8px;
border: 0;
margin: 0;
width: inherit;
height: 25%;
flex-direction: column;
background-color: salmon;
}<body>
<nav>
Nav!
</nav>
<div>
<header>
Header!
</header>
<article>
Article!
</article>
<footer>
Footer!
</footer>
</div>
</body>
</html>
Stack Overflow用户
发布于 2022-03-26 10:32:33
<div style="display:'flex'">
<nav> </nav>
<div style="display: 'flex'; flex-direction:'column' ">
<header> </header>
<div> </div>
<footer> </footer>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71626288
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号