2020-07-07
77
@media
全套@media响应式布局代码方案分享
本文分享一套完整 CSS @media 媒体查询响应式布局方案，适配电脑、平板、手机等不同尺寸设备，包含通用样式重置、多断点屏幕适配、导航栏、左右布局、卡片模块、字体 / 间距自适应等常用模块。代码分层清晰、可直接复用，兼容主流浏览器，适用于官网、后台...
@keyframes实现动画帧效果
本教程教大家如何使用@keyframes，制作一个类似幻灯片的CSS动画效果。首先我们准备一张连贯的动作图片，这里以这张熊跑路为例。新建一个DIV容器，放这里一帧图片DIV的盒子属性@keyframes动作利用animation给DIV加上这个动作。...
分享自用的自适应写法
在写CSS前，需要在页面上<head>内加上如下代码，禁止页面缩放，如果自动缩放了就不能触发CSS自适应代码了。然后是自用的CSS自适应代码，大家根据注释自行修改。基本常用分辨率都覆盖了，大家只需要按照这个框架慢慢调整就行。...
常用的Hack浏览器兼容写法
都是我的站长站自用CSSHack写法，随着浏览器的不断更新。目前来说，CSSHack也基本用不到了，大部分浏览器兼容性都很高了。
的引入加载方法
本文将主要介绍引入CSS样式的方式，包括外部样式表、内部样式表和行间样式三种方式[注意]CSS语法非常简单，但容易忽略的一点是不能省略分号(最后一个样式除外)在link标记中rel和href属性是必须的，type属性和media属性可省略完整dome。...
@media自适应不同分辨率
@media是CSS中媒介语法，可以根据不同分辨率，执行不同的CSS样式，可以达到自适应不同分辨率终端的方法。下面我的站长站分享一套自用的@media方法，已经应用了很多套模板，100%好用。在使用@media之前，需要...