[武汉|结业弟子]JS-万晶|2019年10月19日的日报-技能树.IT修真院

发表于： 2019-10-19 22:20:08

1 1082

今天完成的事情：完成任务五，开始任务六，了解的雪碧图的基本原理，大概看了bootstrap的相关知识

明天计划的事情：继续进行任务六尝试进行布局
遇到的问题：今天在做雪碧图时在定位的值有负数一时无法理解，资料给的解释是假如设置background-position: 0 0 那么意味着，背景图相对于容器（span标签）x轴=0；y轴=0的位置作为背景图的起始位置来显示图片。所以如果需要在容器中显示第二个图标，意味着雪碧图x轴方向要左移动，左移动雪碧图即它的值会设置为负数，同理y轴方向也一样。一时看不太懂，实际操作之后明白了是沿着轴移动，比如

这张示例图来进行定位是如果要显示窗帘的话整个图就要向左移动即沿着X轴的负方向移动故会产生负值，Y轴同理

今天看了关于bootstrap的相关介绍，看完并不太懂，虽然了解了可以用来布局，但是还是没明白怎么自定义样式，练习发现里面的样式都是已经写好了如果

要改的话目前只试过直接在导入的css文件里覆写，但是每个都这样也太麻烦了，明天继续做一下实例练习寻找更好的办法

收获：今天学会了制作雪碧图，把任务六的图都切好了，今天也尝试了一些bootstrap的操作，例如

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    Dropdown button
                  </button>

这个可以写出一个无样式的按钮，添加

<div class="dropdown-menu">

可以进行下拉菜单

<div class="col-xs-4">col-xs-4</div>
        <div class="col-xs-4">col-xs-4</div>
        <div class="col-xs-4">col-xs-4</div>

可以将页面分成3列，最多12列可以改变相应的数字来进行分割。

 <div class="container">
              <h2>背景颜色</h2>
              <p class="bg-primary text-white">重要的背景颜色。</p>
              <p class="bg-success text-white">执行成功背景颜色。</p>
              <p class="bg-info text-white">信息提示背景颜色。</p>
              <p class="bg-warning text-white">警告背景颜色</p>
              <p class="bg-danger text-white">危险背景颜色。</p>
              <p class="bg-secondary text-white">副标题背景颜色。</p>
              <p class="bg-dark text-white">深灰背景颜色。</p>
              <p class="bg-light text-dark">浅灰背景颜色。</p>
            </div>