发表于: 2017-04-12 20:48:33

2 666


今天完成的事情:

任务14 navbar/grid组件

任务15

任务14 carousel组件

【navbar】

navbar-fixed-top 固定顶部

navbar-right 导航条左侧

navbar-header 移动端默认显示内容

navbarbtn 移动端导航展开

navbar-brand 导航栏logo

navbar-list 导航选项主体内容

PC端

默认导航选项主体内容右浮动

移动端默认显示内容部分隐藏

移动端

默认显示内容flex布局

改变navbartab display

【carousel】

carouselbox轮播窗口

carousel-inner 轮播内容组

list-item 轮播单页

carousel-caption 轮播单页标题

carousel-indicators 底部控制原点

carousel-control 左右控制箭头

carouselbox w=100%, list w=100*(N+2)% item w=100/(N+2)%

控制原点/箭头、单页标题均为相对定位

【grid】

row 行

col-xs/sm/md 栏

row的负margin与container padding值相等,消除左右边际重复padding

col-xs/sm/md 从小往大写,保证某一元素只写了col-xs无sm/md情况下,屏幕宽到sm/md范围时仍能保证xs情况下比例。

components.less

@import "navbar/grid/carousel".less

@import "components/mixins.less";

写入reset&其他常用样式

页面

link components.css

link 本站common.css

link thispage.css

明天计划的事情:

开始js

遇到的问题:

收获:

熟悉grid/navbar/carousel写法

熟悉less



返回列表 返回列表
评论

    分享到