内容列表
去除css默认样式
/* 清除内外边距 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ fieldset, lengend, button, input, textarea, /* form elements 表单元素 */ th, td { /* table elements 表格元素 */ margin: 0; padding: 0; } /* 设置默认字体 */ body, button, input, select, textarea { /* for ie */ /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/ font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */ } h1 { font-size: 18px; /* 18px / 12px = 1.5 */ } h2 { font-size: 16px; } h3 { font-size: 14px; } h4, h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */ small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ /* 重置列表元素 */ ul, ol { list-style: none; } /* 重置文本格式元素 */ a { text-decoration: none; } a:hover { text-decoration: underline; } abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */ border-bottom: 1px dotted; cursor: help; } q:before, q:after { content: ''; } /* 重置表单元素 */ legend { color: #000; } /* for ie6 */ fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */ /* 注:optgroup 无法扶正 */ button, input, select, textarea { font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */ } /* 重置表格元素 */ table { border-collapse: collapse; border-spacing: 0; } /* 重置 hr */ hr { border: none; height: 1px; } input { outline: none; background: transparent; border: none; outline: medium; width: 100%; } // 当输入框获取焦点时 input:focus { outline: none; background-color: transparent; } // 选择输入文本时,默认蓝色,改为透明 ::selection { background: transparent; } ::-moz-selection { background: rgb(241, 241, 241); }
2022-11-09
动画 Animate.css
fadeIn: '淡入', fadeInDown: '向下淡入', fadeInDownBig: '向下快速淡入', fadeInLeft: '向右淡入', fadeInLeftBig: '向右快速淡入', fadeInRight: '向左淡入', fadeInRightBig: '向左快速淡入', fadeInUp: '向上淡入', fadeInUpBig: '向上快速淡入', fadeOut: '淡出', fadeOutDown: '向下淡出', fadeOutDownBig: '向下快速淡出', fadeOutLeft: '向左淡出', fadeOutLeftBig: '向左快速淡出', adeOutRight: '向右淡出', fadeOutRightBig: '向右快速淡出', fadeOutUp: '向上淡出', fadeOutUpBig: '向上快速淡出' }, bounce: { title: '弹跳类', bounceIn: '弹跳进入', bounceInDown: '向下弹跳进入', bounceInLeft: '向右弹跳进入', bounceInRight: '向左弹跳进入', bounceInUp: '向上弹跳进入', bounceOut: '弹跳退出', bounceOutDown: '向下弹跳退出', bounceOutLeft: '向左弹跳退出', bounceOutRight: '向右弹跳退出', bounceOutUp: '向上弹跳退出' }, zoom: { title: '缩放类', zoomIn: '放大进入', zoomInDown: '向下放大进入', zoomInLeft: '向右放大进入', zoomInRight: '向左放大进入', zoomInUp: '向上放大进入', zoomOut: '缩小退出', zoomOutDown: '向下缩小退出', zoomOutLeft: '向左缩小退出', zoomOutRight: '向右缩小退出', zoomOutUp: '向上缩小退出' }, rotate: { title: '旋转类', rotateIn: '顺时针旋转进入', rotateInDownLeft: '从左往下旋入', rotateInDownRight: '从右往下旋入', rotateInUpLeft: '从左往上旋入', rotateInUpRight: '从右往上旋入', rotateOut: '顺时针旋转退出', rotateOutDownLeft: '向左下旋出', rotateOutDownRight: '向右下旋出', rotateOutUpLeft: '向左上旋出', rotateOutUpRight: '向右上旋出' }, flip: { title: '翻转类', flipInX: '水平翻转进入', flipInY: '垂直翻转进入', flipOutX: '水平翻转退出', flipOutY: '垂直翻转退出' }, strong: { title: '强调类', bounce: '弹跳', flash: '闪烁', pulse: '脉冲', rubberBand: '橡皮筋', shake: '左右弱晃动', swing: '上下摆动', tada: '缩放摆动', wobble: '左右强晃动', jello: '拉伸抖动' }
2022-11-08
css常用样式 换行
强制不换行: p { white-space:nowrap; } 自动换行: p { word-wrap:break-word; } 强制英文单词断行: p { word-break:break-all; } 保留换行符,合并空白符序列: p { white-space: pre-line; } //超出的文本隐藏 overflow:hidden; //溢出用省略号显示 text-overflow:ellipsis; //溢出不换行 (只显示一行) 影响换行 white-space:nowrap; 两行显示 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; 强制不换行: p { white-space:nowrap; } 自动换行: p { word-wrap:break-word; } 强制英文单词断行: p { word-break:break-all; } 注意:设置强制将英文单词断行,需要将行内元素设置为块级元素。 超出显示省略号: p{text-overflow:ellipsis;overflow:hidden;} white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit; •white-space: 属性设置如何处理元素内的空白 •normal: 默认。空白会被浏览器忽略。 •pre: 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。 •nowrap: 文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。 •pre-wrap: 保留空白符序列,但是正常地进行换行。 •pre-line: 合并空白符序列,但是保留换行符。 •inherit: 规定应该从父元素继承 white-space 属性的值。 word-wrap: normal|break-word; •word-wrap: 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。 •normal: 只在允许的断字点换行(浏览器保持默认处理) •break-word: 在长单词或URL地址内部进行换行 word-break: normal|break-all|keep-all; •word-break 属性用来标明怎么样进行单词内的断句。 •normal:使用浏览器默认的换行规则。 •break-all:允许再单词内换行 •keep-all:只能在半角空格或连字符处换行 文本下划线位置 text-decoration-line 值 描述 none 默认。定义标准的文本。 underline 定义文本下的一条线。 overline 定义文本上的一条线。 line-through 定义穿过文本下的一条线。 blink 定义闪烁的文本。 inherit 规定应该从父元素继承 text-decoration 属性的值。 文本下划线样式 text-decoration-style 值 描述 solid 默认值。线条显示为单行。 double 线条显示为双线。 dotted 线条显示为点线。 dashed 线条显示为虚线。 wavy 线条显示为波浪线。 initial 将此属性设置为其默认值。 inherit 从其父元素继承此属性。
2022-08-08