前端工程师、前端爱好者
学习交流平台

完成一个页面布局(仅用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;
  }
  }
}

 

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

说明:部分文章或者图片中有https://www.orzzone.com的链接地址,那个也是本人的博客,部分文章是从那搬过来的(那里有很多和前端无关的东西,特意拆出来的)。