发表于: 2016-07-23 00:40:58

2 1311


今天完成的事情:任务6-1,雪碧图的使用  自适应的学会;

明天的计划:任务6-2,6-3.

遇到的问题:经常看到师兄日报里所谓的雪碧图。一直以为是是一张图片、以为是什么高端东西,其实很简单,未战先怯可不是好想法。

 

雪碧图XY轴定位一直尝试没什么好想法,找到一个比较浅白的解释:

如图:想往当前的容器内放一个背景图片上的某个小图片,当前容器暂用div表示

<div class="dw"></div>

//样式

<style>

//首先设定容器的宽高,即要放置的小图片的大小,否则背景图片就会超出显示了 如图片背景图片大小为80*20,图片名称bg.png ,小图片的坐标位置为(67,97)所以小图的定位相对原点来说是(-67,-97),如此即可。

.dw{ width:80px; height:20px; background:url(bg.png) no-repeat  -67px -97px;}

</style>

当然一定要记得no-repeat 哦‘’


看到日报有人问为什么不直接用PS而使用雪碧图:

1,图少方便管理,引用同一张图片。


2,简单说就是,你每下一张图,就要访问服务器一次,直接用雪碧图可以减少访问数量,加速内容显示。



瞬间就知道定位哪里了。

对于自适应一直云里雾里,今天通过恒泰师兄的细细讲解,终于理解了。,6-1属于自适应了。

图片自适应度量页面宽度然后除以,图片宽度换算设置百分比。

内外边距边距自适应用px

字号用rem

通常设置字号默认为16px=1rem ,可以设置HTML字号为62.5%   那样字号默认10px是1rem,比较方便换算、

设置媒体查询加载不同的字号百分比.来适应不同页面。宽度用百分比,


读文档读一半是个不好的结果,

display:inline; 内联元素,简单来说就是在同一行显示。
display:block; 块级元素,简单来说就是就是有换行,会换到第二行。
display:inline-block; 就是在同一行内的块级元素。

ps:今天才知道第三个,以前一直以为只有前两个。



收获:不知道师兄能不能理解,终于写出自适应的感觉!!!被爽。

    多码,发现问题,不懂就学,不懂就问。



返回列表 返回列表
评论

    分享到