HTML5
素描本里的男子
做一个温文尔雅的美男子
展开
-
消除不同的浏览器在默认样式上不同表现reset.css
@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}body,input,textarea,button,select,pre,xmp,tt,code,kbd原创 2020-06-08 16:41:46 · 176 阅读 · 0 评论 -
vue搜索关键字使文本高亮
思路:通过正则RegExp进行全局匹配,将符合条件的元素通过replace替换成为HTML代码片段封装成自定义指令在main.js里引入增加可复用性import Vue from 'vue'function hightLight (el, binding) { const match = binding.value const reg = new RegExp(match, 'g'...原创 2020-05-06 14:50:28 · 1154 阅读 · 0 评论 -
纯css绘制波浪动画效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-11-28 19:53:32 · 395 阅读 · 0 评论 -
隐藏滚动条
前面写滚动条需要被隐藏的元素::-webkit-scrollbar{ display:none;}原创 2019-06-14 09:21:16 · 539 阅读 · 0 评论 -
鼠标指针变成放大镜的形状
这个是放大cursor:zoom-in这个是缩小cursor:zoom-out原创 2019-06-14 08:41:33 · 3891 阅读 · 0 评论 -
css3选择器
一、基本选择器通配符(通用选择器) 匹配所有html元素*{margin:0; padding:0;}标签选择器a{text-decoration:none;}id选择器#box{color:red;}class选择器.section{float:left;}5.群组选择器h1,h2,h3,h4,h5,h6{font-weight:100;}二、层次选择...原创 2019-05-30 21:12:40 · 201 阅读 · 0 评论 -
css弹性布局
一、分栏布局1.设置栏数(最大栏数)语法:column-count:数值;2.每栏的宽度(最小宽度)语法:column-width:数值+单位;3.设置栏间距语法: column-gap:数值+单位;4.设置栏分隔线语法:column-rule:3px solid|dashed|dotted 颜色;5.设置是否跨栏显示语法:column-span:all(是)|none(否)...原创 2019-05-30 21:11:42 · 764 阅读 · 0 评论 -
常见可继承的CSS属性
1、字体系列属性 font-family:字体系列 font-weight:字体的粗细 font-size:字体的大小 font-style:字体的风格2、文本系列属性 text-indent:文本缩进 text-align:文本水平对齐 line-height:行高 word-spacing:单词之间的间距 letter-spacin...原创 2019-05-26 19:08:18 · 328 阅读 · 0 评论 -
阴影及背景切割,背景原点
一、文本阴影语法:text-shadow:水平偏移量 垂直偏移量 模糊度 颜色值;注:a) 水平偏移量 向右为正,向左为负b) 垂直偏移量 向下为正,向上为负c) 模糊度 默认值为0,值越大模糊度越大,不允许设置负值eg: text-shadow: 3px 3px 5px red,5px 5px 5px blue;注:设置多组值时用逗号分隔扩展:...原创 2019-05-25 14:30:46 · 356 阅读 · 0 评论 -
CSS3移动端布局
一、移动端相关概念1.屏幕尺寸屏幕尺寸是指屏幕对角线的长度,单位为英寸,1英寸=2.54厘米常见移动端设备屏幕尺寸:iphone6,7,8 4.7英寸iphone6,7,8plus 5.5英寸iphone4 3.5英寸iphone5 4英寸2.屏幕分辨率屏幕分辨率是指横纵方向上的像素点数,单位为px,1px=1个像素点。常见移动端设备屏幕分辨率...原创 2019-05-25 14:29:50 · 922 阅读 · 0 评论 -
CSS3动画
一、transition过渡动画语法: transition: 过渡属性 过渡时间 过渡延迟时间 过渡方式;1.transition-property(过渡属性)取值:none 默认值,没有属性发生过渡all 所有发生变化的css属性都添加过渡eg: transition:all 1s;ident 指定发生过渡的css属性列表eg: transition:tra...原创 2019-05-25 14:29:06 · 356 阅读 · 0 评论 -
CSS3背景详解
一、rgba模式语法:background:rgba(r,g,b,a); a代表透明度,取值范围0~1eg: background:rgba(255,255,255,0.5);★rgba与opacity的区别rgba是给背景添加一定的透明度,容器中的文本或图片不会跟随透明opacity是给整个容器添加一定的透明度,文本和图片会跟随透明扩展:hsla模式语法:background...原创 2019-05-25 14:28:04 · 203 阅读 · 0 评论