网站进口页双栏对称规划完成思绪

2019年8月30日 86次阅读 来源: samsara0511

先来一张预览图。

《网站进口页双栏对称规划完成思绪》

接下来说一说这类页面规划的完成思绪，因为本身是从零开始的，所以实在花了好几天工夫才完成了这么一个看起来很简单的规划，一切东西都要本身一点点探索，不过这类阅历关于本身的生长也是很有协助的。好了，下面进入正题。

团体规划

在写这个页面的过程当中，实在不管是 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 先放一边。毕竟须要做的事变另有许多，总要分一个轻重缓急，这也是工作中须要经常注重的一件事。

    原文作者：samsara0511
    原文地址: https://segmentfault.com/a/1190000005358530
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞