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

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

需求

接着京东移动端页面布局（一） ，继续来编写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/

---

2019年全套Java、Android、HTML5前端、Python、大数据视频，价值数万资源大放送

寻找资源的地址如下：

扫描微信公众号

寻找价值数万的视频资源