2017-07-04 • 前端开发

Web 前端项目要从基本布局开始

我们接着之前的项目, 上篇主要是扯皮一下前端所需要掌握的技能, 并通过vue.js和element-ui, 快速搭建项目的方法, 但之前我也说过了, 本人不太喜欢使用第三方的东西, 所以我这里既不用bootstrap, 也不用jquery, 也不适用任何的三方组件, 只使用vue全家桶来进行实现, 当然真正做项目时, 一些大厂的三方组件也是值得信赖的.

参考链接:

Web 是时候用前端写个简历了!

以下内容在上述文章基础上进行, 请事先查阅.

我们开发iOS的时候, 使用的是Xcode作为我们的开发工具, 但开发H5的时候, 我们该用什么软件呢? 记事本? 你肯定是活在上个世纪, DW? WebStrom?, 只能说你老师教的不错, sublime, 嗯, 一般的开发都用这个, 而我用的是github自己开发的Atom. Atom下载地址当然你也可以使用目前呼声最高的微软出品的VSCode. 我不用的原因仅仅是因为图标太丑了而已.

下载下来后我们可以安装一下插件, 由于是github亲儿子, 集成的时候方便很多, 推荐以下插件供你使用: atom-beatify, atom-ternjs, language-vue, 其他的看你开心了~

直接进入正题, 我们先将之前的Home.vue的内容全部清空, 并将Element-UI的配置导入也删除, 这样之前的所有的东西就烟消云散了, 之前说过那些都不重要. 由于不用饿了吗的导航栏, 转而要自己实现, 我们需要新建一个子组件命名为navigation.vue. (代码中我将Home.vue更名为Index.vue)

在navigation.vue中添加以下代码:

<template>
<div>
  <div class="nav">
    <div class="content">
      <div class="title">
        XXXXX
      </div>
      <div class="items">
        <span>XXXXX</span>
        <span>XXXXX</span>
        <span>XXXXX</span>
        <span>XXXXX</span>
        <span>XXXXX</span>
        <span>XXXXX</span>
      </div>
    </div>
  </div>
  <div class="nav-offset">

  </div>
</div>
</template>

之前说过HTML都是语义, 我的习惯是使用div和span足矣.

<style scoped>
.nav {
  position: fixed;  //fixed 定位, 将导航栏进行固定
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 50px;
  z-index: 1; //始终保持在上一层
}

.nav-offset {
  height: 50px; //对定位的空间进行填补
}

.nav .content {
  margin: 0 auto; //水平居中
  width: 1000px; //写死宽度
  height: inherit;
}

.nav .content .title { //三级选择器
  line-height: 50px; //设置行高, 进行垂直居中
  font-size: 28px;
  display: inline-block; //行内块级标签
  text-indent: 40px; //字符缩进
  color: white; //字体颜色
}

.nav .content .items {
  line-height: 50px;
  width: 700px;
  display: inline-block;
  float: right; //进行右浮动 关键技术点
}

.nav .content .items span {
  width: 112px;
  text-align: center; //字体居中
  line-height: 50px;
  display: inline-block;
  color: white;
}
</style>

重点我们来看看CSS的部分, 说实话前端的代码在复用性方面绝对是渣.尤其是CSS的部分, 完全不知道为什么要这样设计, 可能是历史遗留问题吧. 目前我们写前端的话, 一种是按px写死定位, 一种是响应式布局, 我看国内的都喜欢做两套, 而国外的比较喜欢响应式布局, 其实各有利弊啦, 但是我不喜欢用bootstrap来做响应式布局, 宁愿自己使用@media进行实现. 我目前是使用px定位的方法制作, 不排除有时间进行响应式布局, 但这都不重要..

完成了组件的部分, 我们将navigation.vue导入至父组件Index.vue进行使用:

<template>
<div>
  <navigation></navigation>
</div>
</template>

<script>
import navigation from './navigation' //引入子组件
export default {
  data() {
    return {

    }
  },
  components: { //集成子组件
    navigation
  }
}
</script>

简单两步, 就将导航栏加入到我们的父组件上面了, 我们来看一下效果吧:

自定义导航栏显示效果

效果什么的不比饿了么的显示效果差吧, 还是自定义好, 是自定义好, 自定义好, 重要的话说三遍!

制作完导航栏后, 我们进行主题内容的制作, 所以我们将简历分成六块内容, 对应个人介绍, 项目, 博客, GitHub, 经历和联系方式, 但我做前端有个习惯, 是喜欢将布局做完后再扣细节, 所以就先用XXXXX进行代替了. 添加三组如下代码:

  <div class="odd">
    <div class="content">

    </div>
  </div>
  <div class="even">
    <div class="content">

    </div>
  </div>

通过odd和even的class来分辨是奇数行还是偶数行, 这里要说的是, 不要觉得div套了div会消耗多少内存什么的, 前端和移动端不一样, HTML标签是虚拟dom的形式, 具体细节我也不是很懂, 反正就算嵌套100层, 只会消耗加载出屏幕的那个资源而已, 所以尽情的躁吧!

.even {
  width: 100%;
  height: 600px;
  background-color: rgba(248, 248, 248, 1);
}

.odd {
  width: 100%;
  height: 600px;
  background-color: white;
}

.content {
  margin: 0 auto;
  width: 1000px;
  height: inherit;
  border: 1px solid gray; //添加框线, 能有更好的概念
}

这里也通过类选择器的方式给div做渲染, 渲染完成后我们来看下效果吧.

设置完基本的布局, 我们就要来完成内部的结构啦, 其实因为没有设计图的原因, 怎么布局都凭感觉来, 什么颜色多少像素, 跟着感觉走…

我们来进行第一部分的布局吧, 第一部分是由四个区域组成的, 左边, 右上, 右左下, 右右下. 我们来进行实现吧. 在content中添加如下代码:

<div class="user"> //左边
</div>
<div class="introduction">
        <div class="main"> //右上
        </div>
        <div class="left"> //右左下
        </div>
        <div class="right"> //右右下
        </div>
</div>

.user {
  background-color: rgba(240, 240, 240, 1);
  width: 300px;
  height: inherit;
  display: inline-block;
  position: relative;//相对布局, 子view进行绝对定位使用
}

.introduction {
  width: 700px;
  height: inherit;
  display: inline-block;
  float: right;
}

.introduction .main {
  background-color: rgba(230, 230, 230, 1);
  width: inherit;
  height: 350px;
  position: relative;
}

.introduction .left {
  background-color: rgba(220, 220, 220, 1);
  width: 350px;
  height: 250px;
  display: inline-block;
  position: relative;
}

.introduction .right {
  background-color: rgba(210, 210, 210, 1);
  width: 350px;
  height: 250px;
  float: right;
  display: inline-block;
  position: relative;
}

布局效果图

完成了大布局, 我们也来进行小的布局, 在user中添加:

<div class="user-block">
      <div class="icon">

      </div>
      <div class="row1">

      </div>
      <div class="row2">

      </div>
      <div class="row3">

      </div>
      <div class="row4">

      </div>
</div>

.user .user-block {
  position: absolute; //绝对定位, 子绝父相
  width: 300px;
  height: 500px;
  top: calc(50% - 250px); //使用定位进行块级标签垂直居中 关键技术点
  background-color: rgba(210, 210, 210, 1);
}

.user .user-block .icon {
  margin: 0 auto;
  width: 280px;
  height: 280px;
  background-color: red;
  border-radius: 8px; //圆角
}

.user .user-block .row1,
.user .user-block .row2,
.user .user-block .row3,
.user .user-block .row4 {
  margin: 0 auto;
  margin-top: 8px;
  width: 280px;
  height: 40px;
  background-color: red;
}

user部分效果图

既然最难的一块都完成了, 我们就将其他的几个部分一同完成吧~

  <div class="main">
      <div class="main-block">

      </div>
 </div>
 <div class="left">
      <div class="left-block">

      </div>
 </div>
 <div class="right">
      <div class="right-block">

      </div>
 </div>

.introduction .main .main-block {
  background-color: orange;
  position: absolute;
  width: 680px;
  height: 330px;
  top: calc(50% - 165px);
  left: calc(50% - 340px);
}

.introduction .left .left-block {
  background-color: blue;
  width: 330px;
  height: 250px;
  left: calc(50% - 165px);
  position: absolute;
}

.introduction .right .right-block {
  background-color: green;
  width: 330px;
  height: 250px;
  left: calc(50% - 165px);
  position: absolute;
}

最终效果图

这样我们就一步一步的将一个网页布局给制作出来了, 其实没什么技术含量, 呵呵. 当然只能说前端入门简单了, 听说精通很难, 但也没人告诉我什么事精通的定义, 再说我也不在乎, 因为这都不重要, 做为一个丧X, 做自己开心的事情就好啦, 你说呢?

About:

点击下方链接跳转!!

🌟 源码请点这里🌟 »> 喜欢的朋友请点喜欢 »> 下载源码的同学请送下小星星 »> 有闲钱的壕们可以进行打赏 »> 小弟会尽快推出更好的文章和大家分享 »> 你的激励就是我的动力!!

Castie!

Web 前端项目要从基本布局开始

参考链接:

About:

Web 简历一定要设计的美美的

Web 是时候用前端写个简历了!