今天完成的事情

这两天在忙别的事情，作业，聚会，班里的工作…，昨天想写日报的时候已经过了0点了，而且遇到一些难以解决的麻烦，虽然今天也过了0点了，但还是要把日报写一下。

刚看了一下，日报格式好像又乱掉了，好像图片显示不出来，我明天有空的话修一下

1. css sprite 雪碧图

1. 所谓雪碧图
   sprite图就是把网页中所有需要用到的小图标拼接成一张大图，所有需要显示小图标的地方，都使用这张大图作为背景，通过控制背景的位移实现显示不同的图标

2. 雪碧图的优缺点
   优点：1、减少http访问次数，因为每次查看一张图片就会向服务器发起一次http请求，而雪碧图把一些图片整合为一张图片。
   缺点：1、内存缺陷    2、页面缩放有暴露风险     3、对爬虫不友好

3. 制作雪碧图
   先将需要的小图标都抠出来，将这些小图标拼成一张大图，然后测量每个图标的开始位置，最后为每个图标定义一个class，在class中写明背景图位移位置
   在CSD上找到了一个可以自动生成雪碧图的工具，只要打开需要制作的图片，就可以自动生成大图，并自动计算位置
   
   测试一下显示效果
   

2. 布局header

布局header出现了一些问题，第一次接触bootstrap，看到有栅格布局，尝试使用栅格布局来完成header上两个按钮，设置按钮的class值为col-xs-3，按钮的宽度就会占到12分之3，
但是，问题是这两个按钮无法居中，网上的教程是加一个bootstarp的center-block属性容器来居中，但是实际测试并没有什么用。
尝试用flex布局会出现怪异的效果，按钮的宽度也会变小，都挤在一起


最后，使用了col的offset手动设置了3个栅格的位移来实现水平居中，垂直居中用了相对定位
右侧的按钮用了class=" pull-right" 设置右浮动

3. 布局footer

底部用了flex布局，比较顺利，中级的圆形用了一个圆角50%的div实现

4. 布局下拉菜单

bootstrap自带了下拉的js插件，使用需要引入bootstrap的js脚本，还需要引入jquery

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><script src="bootstrap/js/bootstrap.min.js"></script>

生成一个下拉按钮：

<button type="button" class="btn dropdown-toggle" id="location" data-toggle="dropdown">所在地<span class="caret"></span> </button>

其中，<span class="caret"></span>用来绘制一个三角形

添加下拉菜单：

<ul class="dropdown-menu" role="menu" aria-labelledby="location">
                <li role="presentation">
                    <a role="menuitem" tabindex="-1" href="#">北京</a>
                </li>
                <li role="presentation">
                    <a role="menuitem" tabindex="-1" href="#">上海</a>
                </li>
                <li role="presentation">
                    <a role="menuitem" tabindex="-1" href="#">广州</a>
                </li>
                <li role="presentation">
                    <a role="menuitem" tabindex="-1" href="#">深圳</a>
                </li>
            </ul>

tabindex="-1"用来优化tab聚焦。
最后在最外围加上一个class 为 dropdown的容器即可实现下拉菜单。

5. 布局正文列表

仍然使用bootstrap的栅格化布局，设置每行一个row，右侧的元素使用pull-right

左侧的自动截断隐藏，使用以下代码实现

white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden;

为容器指定宽度之后，超出的部分即可自动隐藏并添加...

布局列表的时候调试了非常非常久....

添加样式，调试代码，上传服务器，提交任务6

遇到的问题

1. 栅格化布局是不是不能与flex布局混用？为什么混用布局会导致栅格化元素宽度压缩？
2. 常用的布局方式是什么？flex？浮动？bootstrap的栅格?我需要都掌握吗？
3. 这些布局方式可以混用吗？
4. css雪碧图如何实现自适应？感觉调整雪碧图大小很困难

明天计划的事情

明天可能要去处理一些别的事情（可能），有空的话再详细地看看bootstrap，看一下下一个task

收获

1. css雪碧图
2. bootstrap 按钮，下拉菜单，栅格初步尝试
3. 文本自动截断的方法
4. 调试页面的强大耐心