It's all about
connecting the dots

完成一个页面布局(仅用HTML + CSS)

要求:分为左、中、右三部分,高度均为屏幕高度,左边部分宽度为200px,另外两部分等分剩下的页面宽度。

回答:可以。

<html>
<head></head>
<body>
  <div class="container">
  <aside class="left">Left</aside>
  <div class="wrapper">
    <article class="middle">Middle</article>
    <article class="right">Right</article>
  </div>
  </div>
</body>
</html>

 

.clearfix() {
  &:after {
  content: '';
  clear: both;
  display: block;
  height: 0;
  opacity: 0;
  visibility: hidden;
  }
}
html, body, div, aside, article {
  margin: 0;
  padding: 0;
}
html, body, container, .left, .wrapper, .middle, .right {
  height: 100%;
}
.container {
  padding-left: 200px;
  .clearfix();

  .left {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: skyblue;
  }

  .wrapper {
  float: left;
  width: 100%;

  .middle, .right {
    float: left;
    width: 50%;
  }
  .middle {
    background-color: gray;
  }
  .right {
    background-color: yellow;
  }
  }
}

 

赞(0) 打赏
版权声明:非商业用途转载请注明文章链接,商业用途转载请联系邮箱获取授权。
文章名称:《完成一个页面布局(仅用HTML + CSS)》
文章链接:https://www.orzzone.com/page-layout.html
商业联系:yakima.public@gmail.com
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏