← Zakee's Planet

自己写的个人Landing Page

2017年10月22日

苦学Web前端,终于弄了个像样的网页出来。不废话,链接:i.xxxlbox.com

Landing页

先说说特点吧: #

  1. 使用Bootstrap框架,响应式布局;
  2. 黑白相间的熊猫配色,极简主义;
  3. 向下滚动时会有呼出动画(Reveal Animations)。

使用的框架/库/API: #

为了充实文章内容,我决定贴出一些代码,分享一下心得。

首先我想分享一下CSS里"vh"和"vw"这两个单位,他们分别表示相对浏览器视窗的高度和宽度。浏览器整个可视区的高度和宽度分别被定义为100vh和100vw,所以如果你想把一个元素的高度设定到占满整个浏览器,那么可以简单地设定height: 100vh。而且,不管你怎么改变窗口大小,元素的高度总是会保持刚好占满浏览器视区。看到很多人用js实时改变高度来实现铺满效果,反正我的原则就是,CSS能实现的,坚决不碰JavaScript,这个单位简直不要太好用。

然后我想分享一下Flexbox轻松实现元素垂直、水平居中对齐的方法。

拿我的这个页面的header部分来说吧,我的header中有两个container,一个是装着标题以及社交按钮的大容器,一个是装着“点我向下滚动”按钮的靠下的容器。html就像这样:

<header>
    
  <div class="container" id="hdr-center">
   <h1 id="hdr-big-text">大标题</h1>
    <h2 id="hdr-smaller-text">小标题</h2>
    <p id="hdr-social">
      <a class="fa fa-flag" href="#"></a>
      <a class="fa fa-envelope" href="#"></a>
    </p>
  </div>
    
  <div class="container">
    <p>
      <a class="fa fa-chevron-down" id="showmore" href="#me"></a>
    </p>
  </div>
    
</header>

首先,我指定整个header部分:

header {
  display: flex;
  flex-direction: column;   /* 设定主轴的方向(即项目的排列方向)为垂直方向 */
  justify-content: center;  /* 定义项目在主轴上居中对齐 */
  align-items: center;      /* 定义项目在交叉轴上居中对齐 */
}

这样,header中的两个容器在水平和垂直方向上都是居中的。“点我向下滚动”按钮跑中间去了,那怎么样把它拉到header底部呢?这个时候,我对它上面的容器也就是#hdr-center设定:

#hdr-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

flex: 1算是flex-grow: 1的简写。flex-grow默认为0,表示如果轴上存在剩余空间,元素不放大。当只指定#hdr-centerflex-grow: 1时,该容器会扩大到占满整个轴,这样“点我向下滚动”按钮自然就被挤到下面了。然后再把#hdr-center设为flex,里面的大小标题和社交按钮就可以完美居中了!

Flexbox真的是快速定位布局的神器,难怪新版Bootstrap都改用Flexbox定位了。如果不用Flexbox的话,垂直居中就不好实现,估计就是要把position设为absolute,然后left: 50%; top: 50%;之类的,这就把元素从正常的文档流中剥离了,总感觉这样的居中让人不舒服……

心得体会大概就说这么多吧,总之,写这个页面真的学到了不少东西。栏目设计参考了一些大佬的个人主页,毕竟萌新,各位大佬莫见笑。另外,既然是前端,所有代码都是公开的,需要的可以直接拿走。也欢迎大家给我一些建议,遇到什么兼容性问题欢迎给我反馈,当然了,请务必使用现代浏览器.

等等,是不是少了点什么?好像缺一个反馈表单。以我目前的能力,还做不出表单提交的后端。还是慢慢来吧,不管怎么说,这次整个页面都是自己一手设计、一行一行代码码出来的,虽说简陋了点,但我还是蛮开心的。毕竟萌新,以后会越来越好的。