首先，我们下载 swiper 的 js 和 css，将其放置 assets 中，在 src 下的 index.html 中引入（当然也可以直接引入 CDN ） <!--Swiper--> <link rel="stylesheet" href="./assets/css/swiper-4.4.1.min.css"> <script src="./assets/js/swiper-4. 继续阅读

HTML元素分为三大类：块元素、内联元素、可变元素1.块元素 常见块元素：div、p、ul、ol、li、dt、dl、dd、form、table、tr、td、h1、h2、h3、h4、h5、h6、hr、fieldset 注：默认状态有 margin、padding 的html元素有 body、ul、ol、dl、dd、li、p、h1-h6、td、input 块状元素的特点： ① 块状元素以块的形式显示为矩形区域 ② 块状元素不会并排显示 继续阅读

元素类型转换 语法：display: block | inline-block | inline | none | list-item; block：将元素转换为块状元素，是大部分块元素的默认display属性值； inline-block：将元素转换为内联块状元素，是内联块状元素的默认display属性值（如 img，input等）； inline：将元素转换为内联元素，是内联元素的默认display属性值（如 a，span等）； 继续阅读

置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如： img标签的src属性决定了在浏览器中显示不同的图片； input标签的type属性决定了在浏览器中显示什么类型的input控件；非置换元素：除了置换元素html大部分元素都是不可替换的非置换元素，标签之间的内容直接显示在浏览器中。 继续阅读

宽度自适应 语法：width: 100%; 注： 块状元素默认宽度为100%；通常应用在通栏效果中；高度自适应 语法：height: auto; 注：等价于不设置高度；PS：以下四组属性IE6及以下版本浏览器不支持最小高度 语法：min-height: 数值+单位; 注：IE6不识别min-height属性，解决方法如下 方案一：min-height: 150px; -height: 150px; 方案二：min-height 继续阅读

1. E[attr] 匹配含有 attr 属性的 E 元素 eg:a[class]{ color: red; } 匹配含有 class 属性的 a 标签2. E[attr=value] 匹配含有 atter 属性并且属性值为value 的E元素 eg:a[class=value]{ color: red; } 匹配含有 class 属性，并且值为 login 的 a 标签3. E[attr~=value] 匹配含有 继续阅读

否定伪类选择器 语法: E:not(F) 匹配不满足条件 F 的 E 元素 eg:li:not([class=lis]){ background: pink; } 匹配不满足条件 class=lis 的 li 元素语言伪类选择器 语法: E:lang(value) 匹配指定了 lang 属性，并且值为 value 的E元素 eg:html:lang(en){ color: red; } 继续阅读

1. 设置栏数 语法:column-count: 数值;2. 设置每栏的宽度 语法:column-width: 数值+单位; 注: column-count 和 column-width 设置其中一个即可3. 设置栏间距 语法:column-gap: 数值+单位;4. 设置栏间隔线 语法:column-rule: 宽度 线型(solid/dashed/dotted) 颜色; eg:column-rule: 2px solid r 继续阅读

弹性布局语法:display: flex; 设置弹性布局需要注意的四点: 1. 当给一个元素设置了 display: flex; 后，该容器就成为了弹性盒; 2. 当容器设置了 flex 后，子元素的 float、clear、vertical-align 将会失效; 3. 我们把设置 display: flex; 的元素称之为 flex 容器，把里面的子元素称为 flex 项目; 4. 当给元素设置了 flex 布 继续阅读

1. 概念: 写一套css样式可以同时适配多个终端，是为解决移动互联网诞生的。2. 作用: 面对不同的分辨率设备灵活性强，能够快捷解决多设备显示适应问题3. 原理 媒体查询 ① 外联式媒体查询语法<link rel="stylesheet" type="text/css" media="screen and (min-width: 960px)" href="red.css"/ 继续阅读

1. 改变变形元素中心位置 语法:transform-origin: left | right | center top | center | bottom;2. 变形综合 将多种变形综合在一起时，顺序不一样，效果有可能不一样 eg:transform: rotate(360deg) scale(1.5); transform: scale(1.5) rotate(360deg); 顺序改变，效果不变 eg:transform: transl 继续阅读

语法:transition: 过渡属性 过渡时间 过渡方式 过渡延迟时间;1. 过渡属性( transition-property ) 取值: all: 所有发生改变的css属性都添加过渡 ident: 指定css属性过渡列表 none: 没有css属性过渡 eg:transition: all 1s; transition: transform 1s,background 2s;2. 过渡时间( transition- 继续阅读

语法:animation: 动画名称 动画执行一次所需时间 动画延迟执行时间 动画播放次数 动画执行状态 动画播放后的状态;eg:animation: box_ani 10s 2s infinite paused forwards;1. 动画名称( animation-name ) eg:animation: person 1s; 注: 此处的动画名称要与动画关键帧定义的动画名称一致2. 动画执行一次所需时间( animation-duration ) 取值 继续阅读

语法:border-radius: 数值+单位;1. 设置一个值border-radius: 20px; 四个方向的圆角均为20px2. 设置两个值border-radius: 10px 50px; 左上角和右下角为10px; 右上角和左下角为50px3. 设置三个值border-radius: 10px 100px 50px; 左上角为10px; 右上和左下为100px; 右下为50px4. 设置四个值border-radius: 0px 10px 50p 继续阅读

文本阴影 语法:text-shadow: 水平偏移量 垂直偏移量 模糊度 颜色值; 水平偏移量: 向左为负，向右为正 垂直偏移量: 向上为负，向下为正 模糊度: 不允许设置负值，为0没有模糊度 eg:text-shadow: 5px 5px 8px #333, 8px 8px 8px #999; 注: 多组值之间用逗号隔开鹏仔小扩展: 给文本添加边框(描边字体)-webkit-text-stroke: 3px red;盒阴影 语 继续阅读