京东移动端页面布局（二）

仅供学习，转载请注明出处

需求

接着​​京东移动端页面布局（一）​​ ，继续来编写header部分的内容。

这部分会随着下面的slide幻灯片切换，目前先不考虑切换。先定下编写一个样式即可。

创建代码分支​​index-header​​

首先在码云创建分支，如下：

然后在本机下载并切换分支，如下：

Administrator@USC2VG2F9NPB650 MINGW64 /e/webProject/web-jd-mobile (master)
$ git pull
From gitee.com:kubernete/web-jd-mobile
 * [new branch]      index-header -> origin/index-header
Already up to date.

Administrator@USC2VG2F9NPB650 MINGW64 /e/webProject/web-jd-mobile (master)
$ git branch
  init-css-js
  init-layout
* master

Administrator@USC2VG2F9NPB650 MINGW64 /e/webProject/web-jd-mobile (master)
$ git checkout index-header
Switched to a new branch 'index-header'
Branch 'index-header' set up to track remote branch 'index-header' from 'origin'.

Administrator@USC2VG2F9NPB650 MINGW64 /e/webProject/web-jd-mobile (index-header)
$ git status
On branch index-header
Your branch is up to date with 'origin/index-header'.

nothing to commit, working tree clean

Administrator@USC2VG2F9NPB650 MINGW64 /e/webProject/web-jd-mobile (index-header)
$

首先搜集header部分所需要的图标

使用阿里巴巴矢量字体图标，具体使用方式可以参见：​​iconfont阿里巴巴矢量图标库从注册到使用​​

编写header的html部分

好了，使用span的方式引入字体图标，然后在对元素调整一下样式。

编写右边部分的登录

编写中间部分

HTML部分，如下：

CSS部分，如下：

将代码提交码云

首先提交​​index-header​​代码分支，如下：

$ git add .
$ git commit -m "index-header"
$ git push

将​​index-header​​​分支合并到​​master​​分支，然后提交码云仓库，如下：

$ git checkout master
$ git merge index-header
$ git push

该项目的码云仓库地址

​​https://gitee.com/kubernete/web-jd-mobile/​​

微信公众号