因为我们在使用雪碧图之后，本来需要多次请求的图片，我们可以一次请求过来，然后使用background-position
减少了该页面向服务器请求的次数，间接地优化了该页面的性能
雪碧图的优点就是在减少请求次数，如果一个网站有一1000个小图标，你用img,你要请求1000次，这个对网络会有堵塞，还有对用户体验也不够好，如果你有了雪碧图，只要加载一次就可以了，雪碧图的不足就是在于后期的维护
在来说一下为什么用雪碧图，有什么优点？
发表于： 2018-11-16 22:53:45
1 927
今天完成的事：
一.学习bootstrap下拉菜单（Dropdown）插件
使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。
1.到bootstrap官方网站下载，对于我们开发者来说，直接下载编译和压缩后的CSS、JavaScript文件，另外还包含字体文件，但是不包含文档和源码文件。打开解压包之后可以发现包含三个文件夹 css、fonts、js。这是最基本的Bootstrap组织形式：未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons
2.所有Bootstrap插件都依赖jQuery。而且在正式的项目当中我们推荐使用压缩之后的版本，因为它的体积很小，到官网下载jQuery支持
3.将下载后的就jQuery放到bootstrap中的js目录下
4.在bootstrap的根目录下新建一个demo.html文件，（注意，必须在根目录下面新建，因为后面的步骤中要将bootstrap框架中的css和js文件链接到创建的demo中）
5.在html文件，添加对bootstrap框架中css和js的引用
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>botton</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/botton.css">
<script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
二.为什么使用雪碧图？
减少加载网页图片时对服务器的请求次数
提高页面的加载速度
减少鼠标滑过的一些bug
三.去除inline-block间距有哪几种方法
真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距
inline-block元素之间之所以有空白间距是因为空格有字体大小原因，有两两种解决方法，如下。
第一种：
把代码之间的换行空白都去掉。
例如：
<div>第一个inline-block元素</div><div>第二个inline-block元素</div>
第二种：
把inline-block元素用一个大的div包起来，然后设置其字体大小为0即可，inline-block元素字体大小再单独设置。
例如：
<div style=”font-size:0">
<div>第一个inline-block元素</div>
<div>第二个inline-block元素</div>
</div>
四，进行task的页面布局
明天计划的事：完成task6的页面布局，适配移动设备。
遇到的问题：查看学习了bootstrap下拉菜单（Dropdown）的基本知识，但是在实际页面布局中无法灵活运用.
收获：学了了bootstrap 及设置滚动条。任务六页面布局
返回列表
评论