首頁 > web前端 > html教學 > 学习笔记1 - 树懒的追求

学习笔记1 - 树懒的追求

WBOY
發布: 2016-05-21 08:42:31
原創
1309 人瀏覽過

一,background-clip:border-box 默认/ padding-box / content-box;背景被裁剪到边框 / 内边距 / 内容区,css3属性。兼容写法如下:

<span style="font-size: small;">     -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
     background-clip: padding-box;<br><br></span><span style="font-size: small;">二,雪碧图。</span>
登入後複製
<span style="font-size: small;">CSS Split,中文名<a class="baidu-highlight" href="https://www.baidu.com/s?wd=CSS%E9%9B%AA%E7%A2%A7&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dWrAczP1-WPAn1mh7-uHfv0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHfYn1D3nWc3" target="_blank">CSS雪碧</a>图。
简单的就是说,通过背景定位,将许多小的图片放在同一张大图上面,减少<a class="baidu-highlight" href="https://www.baidu.com/s?wd=HTTP%E8%AF%B7%E6%B1%82&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dWrAczP1-WPAn1mh7-uHfv0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHfYn1D3nWc3" target="_blank">HTTP请求</a>次数,加速网站。要做到这一点需要两个技术:
      1.CSS技术</span>
登入後複製
<span style="font-size: small;">   background:#color url(#image_src) #left #top #repeat;
参数说明:
#color:图片没有显示之前的颜色,透明的话,不填写
#image_src:<a class="baidu-highlight" href="https://www.baidu.com/s?wd=%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dWrAczP1-WPAn1mh7-uHfv0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHfYn1D3nWc3" target="_blank">背景图片</a>地址
#left:图片水平方向的偏移量
#top:图片垂直方向的偏移量
#repeat:当容器大于图片大小时,背景扩展方式
      2.PS合成图片的定位
===============
示例:
PS制作大图片时,定位一个图片的位置为(10,20)
那么CSS应该这样写 background: url("../background.png") 10px 20px no-repeat;</span>
登入後複製
<span style="font-size: small;">三,</span>
登入後複製
min-width: 160px;
_width:160px; 最小宽高度这样写。
登入後複製
登入後複製
四,
登入後複製
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);阴影写法。
登入後複製
五,JavaScript 放置在文档最后面可以使页面加载速度更快。
登入後複製
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板