何星星所有网站群现已支持深色模式（iOS, iPadOS, macOS, Windows），如果您的设备开启该模式，将自动将页面随系统切换为暗黑色。 主要实现代码如下： @media (prefers-color-scheme: dark){ html{filter: invert(100%);} img{filter: invert(100%);} } 其中核心代码是 @media(prefers-color-scheme: dark)，根据这个 CSS 媒体查询标签，当检测到系统为深色模式后，自动触发标签内的代码。 其后代码 html{filter: invert(100%);} ，将整个
CSS(Cascading Style Sheets/层叠样式表)
移动端 @media screen 布局自适应
@media only screen and (min-width: 310px) and (max-width: 360px) { .Notice {display:none; } } @media only screen and (min-width: 360px) and (max-width: 374px) { .Notice {display:none; } } @media only screen and (min-width: 375px) and (max-width: 400px) { .Notice {display:none; } } @media only screen
CSS visibility display
visibility，显示空白占位空间，显示内容后页面布局不发生变化 a div.img{ visibility:hidden; //隐藏对象 } a:hover div.img{ visibility:visible; //显示对象 } display，不显示占位空间，显示内容后使页面重新适应布局 a div.img{ display:none; //隐藏对象 } a:hover div.img{ display:block; //显示对象 }
CSS 设置 HTML 背景图片自适应居中全屏
background-image: url(https://images6.alphacoders.com/404/404677.jpg); position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-width: 1000px; z-index: -10; zoom: 1; background-color: #fff; background-repeat: no-repeat; background-position: center 0; background-size: cover; -webkit-backgroun
CSS 模型和布局方案
1.CSS 标准盒子模型 CSS 盒子模型 又称为框模型（Box Model），包含元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。 模型中内层是 content 依次是 padding border margin。通常我们设置背景时就是内容、内边距、边框这三部分，如果 border 设置颜色的时候会显示 boder 颜色当 boder 颜色是透明时会显示 background-color 的颜色。而该元素的子元素的是从 content 开始的。而外边距是透明的，不会遮挡其他元素。 元素框的总宽度 = wi
通过 CSS 解决 HTML 页面的复选框或单选框与文字对齐问题
当文字 12px 时，单（复）选框 CSS 设置 height:13px; vertical-align:bottom; margin-bottom:.5px; margin-top:5px; 兼容当前 Chrome Firefox IE EDGE 浏览器显示对齐。 CSS .checkbox_align{height:13px; vertical-align:bottom; margin-bottom:.5px; margin-top:5px;} HTML <div style=”font-size:12px;”> <input class=”checkbox_align”
CSS 字体文件引用
<!DOCTYPE html> <html> <head> <title> 字体文件引用</title> <style type=”text/css”> @font-face { font-family: ‘fontsTest’; src: url(‘PingFangSCRegular.ttf’); /*fonts file dirpath*/ } html,body { font-family: fontsTest, sans-serif; font-weight: 700; /*100 400 700*/ font-s
css 适配分辨率显示/隐藏内容
CSS <style type=”text/css”> @media(max-width:768px) { .overflow-maxview { display: none!important } } @media(min-width:769px) { .overflow-minview { display: none!important } } </style> HTML <html> <head></head> <body> <span class=”overflow-maxview”>content&l
CSS 定制 Google Chrome 浏览器滚动条样式
/*— 滚动条默认显示样式—*/ ::-webkit-scrollbar-thumb{ background-color:#999; height:65px; outline-offset:-2px; outline:2px solid #fff; -webkit-border-radius:1px; /*border: 2px solid #999;*/ } /*— 鼠标贴合滚动条样式—*/ ::-webkit-scrollbar-thumb:hover{ background-color:#777; height:65px; -webkit-border-radius:1px;
CSS 衔接区块 HTML 样式
指定 id html： <footer id=”footer”>…</footer> css： #footer {font-family: ‘Helvetica Neue’,Helvetica,’Lucida Grande’,Arial,’Hiragino Sans GB’,’\5FAE\8F6F\96C5\9ED1′,’WenQuanYi Micro Hei’,STHeiti,SimSun,sans-serif;} 指定 class html： <div class=”copyright”>…</div> css： .co
CSS 转换文本大小写
<html> <head> <style type=”text/css”> h1 {text-transform: uppercase} /*全部大写*/ p.uppercase {text-transform: uppercase} /*全部大写*/ p.lowercase {text-transform: lowercase} /*全部小写*/ div.capitalize {text-transform: capitalize} /*首字母大写*/ </style> </head> <body> <h1>
CSS 中 IE、Firefox、Chrome、Opera 各浏览器私有属性
-moz 代表 Firefox 浏览器私有属性 -ms 代表 IE 浏览器私有属性 -webkit 代表 Chrome、Safari 私有属性 -o 代表 Opera 浏览器私有属性 举例： <style type=”text/css”> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red); /*IE 6 7 8*/ background: -ms-line