发表于: 2018-09-03 21:14:09

2 656


今天完成的事情:今天还是进行了任务8的页面1,主页的样式框架搭建和优化。

说实话,写的我蛮难受的。样式改动挺多,但是很难复原原图,总是各种差别,而且用了好多class。语义化命名还是没做好。

bootstrap栅格系统现在默认移动设备优先,针对移动设备的样式融合进了框架的每个角落,而不是增加一个额外的文件。首先需要在<head>之中添加viewport元数据标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

bootstrap需要为页面内容和栅格系统包裹一个.container容器。.row必须包含在.container中,以便为其赋予适合的列和内补。通过row在水平方向创建一组列col。

一列默认最大12,如果超过的话,多余的列会被作为一个整体另起一行。

回到任务上来,页面1里面有圆,我一开始没用div画圆而是用图片来完成,但是雪碧图有点细微的差别,导致在小屏幕上开的时候圆不对齐,然后画自己用div来做。失败中准备明天再试试。

还有就是两边留空的问题了 。感觉布局都把两边的额空间占满了。而参照图两边留空很多,看起来很清爽,明天在想法子看怎么解决。

明天计划的事情:明天继续完成任务8,也就页面1的内容比较多,页面2和页面3都是重复比较多的布局,争取一整天弄完。

遇到的问题:遇到问题有好多。用的row还有class太多了 命名是个问题。再就是修改样式位置。是直接插入还是另外写个class=“”

收获:bootstrap框架大致会用,还需进一步巩固。



返回列表 返回列表
评论

    分享到