摘要:@charset "UTF-8";body,html,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td { margin: 0; padding: 0;}table { border-collapse: collapse;
阅读全文
摘要:定义css // 字体 - 渐变加描边 @mixin fontColor($backgroundImage, $textStroke, $filterDropShadow) { -webkit-text-stroke: $textStroke; // 描边 font-weight: 700; pos
阅读全文
摘要:<!-- 这是一个HTML加载动画,主要由多个旋转的圆点和"Loading..."文字组成 --><div class="index-html-loader"> <!-- 加载中的文本 --> <div class="text">Loading...</div> <!-- 水平排列的圆点集合 -->
阅读全文
摘要:#### CSS3 nth-child(n)选择器 /** * CSS3中的nth-child(n)选择器允许你选择父元素的特定子元素,基于它们的位置或它们与其他兄弟元素的关系。 * 可以用于选择列表、表格行、盒子等元素的特定顺序或模式。 */ /* 选择第3个LI元素 */ li:nth-chil
阅读全文
摘要:.tab-lists-box{ scrollbar-width: none; /* firefox */ -ms-overflow-style: none; /* IE 10+ */ overflow-y: auto;}.tab-lists-box::-webkit-scrollbar { disp
阅读全文
摘要:参考网站 https://lhammer.cn/You-need-to-know-css/#/zh-cn/ <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 通用样
阅读全文
摘要:#### 跑马灯动画效果 /* 使用@keyframes定义一个命名为marqueeAnimation的动画,使文本从右至左滚动 */ @keyframes marqueeAnimation { 0% { transform: translateX(100%); /* 起始状态,文本从容器的右边开始
阅读全文
摘要:#### 使用 `vw` 实现响应式布局 方法一:使用CSS计算功能 这种方法是通过CSS中的`calc()`函数来计算`font-size`的值。 /* 根据750宽度的设计稿计算font-size,即1rem = 100px; */ html { font-size: calc(100vw /
阅读全文
摘要:完整的代码, 可以复制引用<!DOCTYPE html><html><head> <!-- 设置字符编码为UTF-8 --> <meta charset="utf-8"> <!-- 为IE浏览器设置兼容模式,优先使用最新的引擎渲染网页 --> <meta http-equiv="X-UA-Compa
阅读全文
摘要:完整的代码, 可以复制引用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="ht
阅读全文
摘要:HTML 结构 <div id="wrap"> <ul id="list"> // 使用JavaScript动态生成时钟的刻度 <!-- 这里将使用JavaScript动态生成时钟的刻度 --> </ul> <div id="hour"></div> <div id="min"></div> <di
阅读全文
摘要:<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>3D立方体动画</title> <style> /* 设置外部容器样式 */ .wrap{ w
阅读全文
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 使用 @font-face 规则自定义字体 */ @font-face{ /
阅读全文
摘要:#### CSS3 动画实现旋转加载图标 旋转加载动画样式 /* 定义一个类名为.uni-load-more__img的元素样式 */ .uni-load-more__img { /* 设置该元素的动画名称为loading-ios-H5,持续时间为1秒,延迟时间为0秒,动画计时函数为step-end
阅读全文
摘要:#### 瀑布流布局 CSS样式 /* 定义瀑布流的外层容器 */ .waterfall{ /* 设置外边距,单位为rpx */ margin: 0 20rpx; /* 定义两列布局 */ column-count: 2; /* 定义每一个瀑布流的子项样式 */ .waterfall-item {
阅读全文
摘要:CSS 变量教程 微软宣布 Edge 浏览器将支持 CSS 变量。 这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。 一、变量的声明 声明变量的时候,变量名前面要加两根连词线(--)。 body { --foo: #7F583F
阅读全文
摘要:#### 渐变背景样式 CSS样式解释 /* 该样式定义了一个从上到下的线性渐变,从完全透明的黑色渐变到完全不透明的黑色 */ background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); /* 这是上述样式的
阅读全文
摘要:@charset "UTF-8";body,html,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td { margin: 0; padding: 0;}table { border-collapse: collapse;
阅读全文
摘要:#### 针对不同浏览器设置样式 (CSS HACK) CSS样式 .box { /* 对Firefox设置的样式 */ color: black; /* 对IE9设置的样式 */ color: #fff\9\0; /* 对IE8设置的样式 */ color: #ff0000\0; /* 对Safa
阅读全文
摘要:{ '.323': 'text/h323', // H.323 网络电话 '.3gp': 'video/3gpp', // 3GPP 视频文件 '.aab': 'application/x-authoware-bin', // Authoware 二进制文件 '.aam': 'application
阅读全文