用户登录

先实现页底的布局,这块内容分成了五栏 .. 每栏里面有个文字列表 ... 上面是一些常用的链接 ..

用编辑器打开我们的项目 ... 在 app .. 下面,找到 index.html .. 这个文档里面的 html 代码是我们之前创建的 ..

然后再打开命令行工具 .. 在项目的下面执行一下 gulp serve ... 这样会给我们创建一个本地的服务器,然后会在浏览器上打开项目里的这个 index.html 文档 ..

在这个 vertical story 元素的下面,可以添加页底的代码 ... 一个 div .. 加上一个 ui 还有 bottom ..

这部分内容我想让它居中在页面上显示,所以可以再用一下 semantic ui 里的 container .. 一个 div ,加上一个 ui 还有 container ...

布局用的样式是 semantic ui 里的 grid 组件提供的 ... 添加一个包装 .. 页底要分成五栏 .. 所以这个包装上面可以加上 ui five grid

在小尺寸的设备上让这些栏堆叠到一块儿,可以再添加一个 stackable ..

每栏内容都可以放在一个带 column 类的容器里面 .. 先在容器里添加一个数字 .. 需要五个这样的元素 ..

使用 emmet 这个编辑器插件,你可以像这样使用缩写的形式去写 html 代码 ..

div.column{$}*5

你会看到页底这块被分成了五栏 ..

页底:布局《 网页设计案例:页底 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点