网站入口页双栏对称布局实现思路

先来一张预览图。

---

接下来讲一说这种页面布局的实现思路，由于本身是从零开始的，因此着实花了好几天功夫才实现了这么一个看起来很简单的布局，全部东西都要本身一点点摸索，不过这种经历对于本身的成长也是颇有帮助的。好了，下面进入正题。

---

总体布局

在写这个页面的过程当中，其实无论是 HTML 代码的结构，仍是 CSS 的实现方式，思路一直都是在变化的，目前的布局以下：

HTML 代码结构

• 顶部为导航栏 .header：包括左侧的logo，以及右侧的用户菜单；

• 中间为左右对称的导航区 .entrance：左右两块采用不一样的背景图（background-image），背景之上有连接，点击就会转向不一样的页面；

• 底部为包含版权信息的 .footer。

CSS 样式设置

顶部 .header

• 因为这一部分须要覆盖在导航区之上，因此经过 absolute 属性来令其脱离正常的文档流，放在页面顶部。

• 同时为了实现覆盖的效果，就须要设置 z-index 属性，该属性值大于等于 1 时，便可堆叠在普通元素之上。

有一点须要注意的就是，只有设置过 position 属性的元素（relative、absolute、fixed），z-index 属性才能生效。而以前将中间区域的 z-index 值设置为 -1，后来发现连接没法点击，找了一圈才发现是这里出了问题，打牢基础相当重要啊。

• 为了保证在不一样尺寸的浏览器窗口中均能正常显示，就须要设置 min-width 及 width 属性。width 属性被设置为 100%，以占满浏览器宽度，而真正用于展现顶部导航栏内容的子元素 .header-container 的 width 属性则被设置为 80%，这是由于顶部导航栏的内容并很少，左右两侧留白，视觉效果较好。

中间 .entrance

• 左右两部分区域对称显示是经过设置 position 属性实现的，因此父元素设置为 position: relative;，同时为了保证在不一样尺寸的浏览器窗口中均能正常显示，宽度设置与顶部 .header 相同。

• 左右两部分对称显示，width 属性均为 50%，position 属性均为 absolute，top 属性均为 0，left 属性则分别为 0 和 50%。

• 为了让背景正常显示，均设置 background-size: 100% 以及 background-repeat: no-repeat;，这样背景就能在水平方向上填满整个元素。

底部 .footer

• 此部分的样式设置与顶部导航栏的相似，只是须要将版权信息相关的文字在水平和垂直两个方向上均居中对齐便可。版权文字为 .footer 内的 .copyright 之中的 <p> 标签，因此对 .footer 设置 flex 属性，以便让其中的 .copyright 在两个方向上均居中对齐。

display: flex;
justify-content: center;
align-items: center;

样式调整

根据窗口大小重设背景

为了保证用户调整浏览器窗口以后，背景图片可以适应新的窗口尺寸，因此用 JS 来设置包含背景图的元素的高度属性，代码以下。

<script type="text/javascript">
  $(window).resize(function() {
    var viewPortHeight = window.innerHeight - 90;
    $('.entrance > div').css("height", viewPortHeight + 'px');
    $('.entrance > div').css("line-height", viewPortHeight + 'px');
    $('.entrance > div').css("min-height", viewPortHeight + 'px');
  });
</script>

上面的代码中，viewPortHeight 之因此还要减去 90，是由于底部 .footer 高度为 90，若是不减去这个高度值，在底部 .footer 下方还会多出来一小块空白区域，因此就加了这么一句。

---

后记

目前作出来的页面依然有小 bug，不过入口页只是做为展现，现有的 bug 对页面功能影响很小，因此这个 bug 先放一边。毕竟须要作的事情还有不少，总要分一个轻重缓急，这也是工做中须要时常注意的一件事。