[武汉|结业弟子]JS-刘平|2019年07月27日的日报-技能树.IT修真院

发表于： 2019-07-27 21:01:06

1 886

今天完成的事情

完成任务六

任务六完成过程中遇到的问题

1.bootstrap下拉框的使用

目前无法理解bootstrap的使用原理，暂时也无需理解，直接按照格式使用，使用过程中有两点记住：

》在盒子模型class取名中可以class多个css样式

》!important具有优先级的作用

以下是bootstrap下拉框的使用模板

<div class="dropdown percent">
<button class="btn btn-default dropdown-toggle border" type="button" id="dropdownMenu1"
data-toggle="dropdown">
所在地
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">深圳</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">武汉</a></li>
</ul>
</div>

2.雪碧图的使用

使用雪碧图的优点有以下几点：

将多张图片合并到一张图片中，可以减小图片的总大小

将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗，在移动端尤为明显

雪碧图的制作与使用方法：

使用图像编辑软件如Photoshop将多张图放到同一个图层并导出或使用自动化构建工具自动拼接合并后的图片

引用图片时，图片地址为合并后的图片地址，通过background-position调整背景图的位置，并通过容器的宽高共同作用，来选出所需的图片

以下是图片设置为背景，通过padding挤压来使文字和子盒子居于同一个父盒子的示例

html代码

<div class="footer">
   <div class="my">我的</div>
</div>

css样式

.my {
height: 36.5px;
width: 23px;
font-size: 8.4px;
color: rgb(95, 192, 205);
background-image: url(7.png);
background-size: 23px 20px;
background-repeat: no-repeat;
padding-top: 28px;
}