css
wxy1345886334
这个作者很懒,什么都没留下…
展开
-
2021-05-27 Day17-雪碧图、浏览器内核
雪碧图、精灵图、css sprites - 将多个图片整理在一张图片上,通过背景定位的方式引入不同图片 - 背景图一般是小图标或者装饰作用的图片 - img一般是页面的内容 - 图片整合的优势: 1)通过图片整合来减少对服务器的请求次数,从而提高页面的加载速度 2)通过整合图片来减小图片的体积 - 图片整合的原则 1.根据实际需求,小图标尽量上下排列(防止后面不必要的背景图) 2.小图标之间尽量留出足够的空间 3.整合大图片的背景一定是透明的 4.列表符号的图标尽量放在图片最右侧 5.一般情况下,小图标原创 2021-05-27 17:16:13 · 161 阅读 · 0 评论 -
Day16-媒体查询、VW+rem布局
回顾 @media screen and (min-width:1000px){ .box{ float:left; } .para{ float:left; } .father:after{ } } @media screen and (max-width:600px){ .box{ } .para{ } } @media screen and (min-width:400px) and (max-width:600px){ .box{ } .pa原创 2021-05-27 17:14:46 · 78 阅读 · 0 评论 -
Day15-多列、移动端布局
回顾 1.怪异盒模型与标准盒模型的区别 标准盒模型width仅是内容区域的宽度,怪异盒模型width是包含边框和内边距的 标准盒模型box-sizing:content-box; 怪异盒模型box-sizing:border-box; 2.弹性盒 父元素: display:flex; flex-direction:column; justify-content:; align-items:; flex-wrap:wrap; align-content:; 子元素: al原创 2021-05-27 17:13:53 · 93 阅读 · 0 评论 -
Day14-弹性盒、怪异盒模型
回顾 1.css3新增的选择器 div~p [class^="a"] [class&="a"] [class*="a"] :last-child :nth-child() :nth-last-child() :only-child :first-of-type :last-of-type :nth-of-type() :nth-last-of-type() :only-of-type :root :empty :not() :target UI元素状态伪类:原创 2021-05-27 17:13:11 · 55 阅读 · 0 评论 -
Day12- H5新增
回顾 3d转换 位移 transform:translateZ(); transform:translate3d(x,y,z); 旋转 transform:rotateX(); transform:rotate3d(x,y,z,30deg); 缩放 transform:scaleZ(); transform:scale3d(x,y,z); 景深perspective ***子元素保留3d转换位置transform-style:preserve-3d; 元素背面不可见bac原创 2021-05-27 17:09:43 · 53 阅读 · 0 评论