nth-child | 易学教程

CSS伸缩布局

阅读更多关于 CSS伸缩布局

1. 伸缩布局应用: 伸缩布局应用主轴： Flex容器的主轴用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称为侧轴，默认还是垂直方向方向：默认是主轴从左向右，侧轴默认是从上到下主轴和侧轴并不是固定不变的通过flex-direction可以互换 min-width 设置px 到达设置的这个值就不在缩放了 max-width 跟上面这个相反 flex 可以放在每个盒子里面自由调整需要给盒子添加display: flex; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> section { width: 80%; height: 200px; border: 1px solid pink; margin: 100px auto; /*给父级盒子添加flex*/ display: flex; /*伸缩布局模式*/ } section div { height: 100%; flex: 1; /*每个子盒子占的份数*/ } section div:nth-child(1) { background-color: pink; } section div:nth-child(2) { background-color:

CSS的选择器

阅读更多关于 CSS的选择器

1.基础的选择器选择器含义示例 * 通用元素选择器，匹配任何元素 * { margin:0; padding:0; } E 标签选择器，匹配所有使用E标签的元素 p { font-size:2em; } .info和E.info class选择器，匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:#ff0; } #info和E#info id选择器，匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; } 2.组合选择器选择器含义示例 E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 Div,p { color:#f00; } E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 #nav li { display:inline; } li a { font-weight:bold; } E > F 子元素选择器，匹配所有E元素的子元素F div > strong { color:#f00; } E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F p + p { color:#f00; } 3.CSS 2.1 属性选择器选择器含义

长页面滚屏动画

阅读更多关于长页面滚屏动画

H5长页面 , 向上滑动 , 页面滚动到元素位置 , 元素显示并做动画显示 , 向下滑动 , 元素不在屏幕显示 , 元素取消动画now类并隐藏 , 方便再次滑动添加动画 Demo使用了使用 animate.css https://www.cnblogs.com/xiaohuochai/p/7372665.html 核心js代码: $(window).scroll(function () { var wTop = $(window).scrollTop() $('.class,.w>div,.instant').each(function () { if ($(this).offset().top < wTop + $(window).height() * 0.8) { $(this).addClass('now') } else if ($(this).offset().top - $(window).height() >= wTop) { $(this).removeClass('now') } }) }) 完整Demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

CSS3 filter

阅读更多关于 CSS3 filter

filter：定义了元素的可视效果具体函数： hue-rotate() 色相旋转 blur() 高斯模糊效果 brightness() 图片变亮 contrast() 图像的对比度 grayscale() 灰度 invert(）反转 opacity() 透明度 saturate() 饱和度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 filter</title> </head> <style type="text/css"> body,html{ display: flex; align-items:center; justify-content:center; width: 100%; height: 100%; background: linear-gradient(#E0FFFF 0, #696969 100%); margin:0; } .wrap{ display: flex; flex-wrap: wrap; } .wrap div{ width: 15vw; height:15vw; margin:10px; border-radius: 50%; background: linear-gradient(#FFFFF0 0, #F0E68C 25%,

css实现调色板

阅读更多关于 css实现调色板

《css secrets》中案例的实现原图我实现的效果图：纯静态页面 <!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-UA-Compatible" content="ie=edge"> <title>调色板的实现，根据兄弟元素个数来设置样式</title> <style> ul { list-style: none; display: flex; flex-direction: row; justify-content: space-around; } li { list-style: none; height: 200px; display: inline-flex; width: 100%; position: relative; /* padding: 0 10px; */ } div { position: absolute; top:0; left: 0; /* background-color: (83,172,150,0.4); */ /* opacity: 0.5; */ /* background

表格与表单

阅读更多关于表格与表单

1、表单 button按钮（不进行提交） <input type="button" value="按钮内容" /> <button type="reset"> </button> 单选框(单选按钮) <input type="radio" name="ral" /> 复选框 <input type="checkbox" name="like" /> checked="checked"; 默认选中 disabled="disabled" ；禁用 enabled=“enabled” ；可用多行文本框（文本域） <textarea cols="字符宽度" rows="行数" ></textarea> 阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）设置文本框与提示字对齐方式，对textarea设置vertical-align 列表和下拉菜单下拉菜单 <select > <option>选项1</option> <option>选项2</option> ...... </select> 注： <select size="数值"></select> (有size 属性的是列表) 上传文件框文件域： <input type="file" /> 隐藏表单，一般用作数据存储文件域： <input type="hidden" value="订单编号" />

【vue】-----js组件的封装--------

阅读更多关于【vue】-----js组件的封装--------

在js组件网站上，查看那个组件好看就用，把他们结构和样式分别写在组件文件内.loading.vue组件做一下组件的测试/引用运行的效果封装完好的，js组件 loading HTML和css样式 1 <template> 2 <div class="loader" v-if="flag"> 3 <div class="loader-inner"> 4 <div class="loader-line-wrap"> 5 <div class="loader-line"></div> 6 </div> 7 <div class="loader-line-wrap"> 8 <div class="loader-line"></div> 9 </div> 10 <div class="loader-line-wrap"> 11 <div class="loader-line"></div> 12 </div> 13 <div class="loader-line-wrap"> 14 <div class="loader-line"></div> 15 </div> 16 <div class="loader-line-wrap"> 17 <div class="loader-line"></div> 18 </div> 19 </div> 20 </div> 21 </template

封装js插件（loading）

阅读更多关于封装js插件（loading）

在loading文件夹中写两个文件loading.js与loading.vue loading.js 1 import Loading from './index.vue'; 2 import Vue from 'vue'; 3 export default()=>{ 4 let LoadingComponent=Vue.extend(Loading); 5 let child=new LoadingComponent({//动态创建挂载点 6 el:document.createElement("div"), 7 data:{ 8 flag:false, 9 }, 10 methods:{ 11 handlemount(){ 12 this.flag=true; 13 }, 14 handleDestory(){ 15 this.flag=false; 16 } 17 } 18 }) 19 document.body.appendChild(child.$mount().$el) 20 return child; 21 } loading.vue文件为一个loading的模版，从HTML+CSS+loading插件库中取出来的 1 <template> 2 <div class="loader" v-if="flag">//利用v-if操控插件的显示与消失。 3 <div

3D渐变分层

阅读更多关于 3D渐变分层

效果： /*--> */ /*--> */ 主要是css效果 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 transition是过渡时间。 align-items: center;居中对齐弹性盒的各项 <div> 元素 justify-content:center; justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，加上center是项目在容器中心代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="index.css"> <title>3D渐变分层悬浮</title> </head> <body> <div class="container"> <img src="img1.jpg"> <img src="img1.jpg"> <img src="img1.jpg"> <img src="img1.jpg"> </div> </body> </html> css: body{ margin:0; padding:0; width: 100%; height: 100vh; display: flex;

进度条方案

阅读更多关于进度条方案

说起用户体验，不得不提到进度条，加载页面时给用户提供一个实时的进度显示将大大降低页面加载过慢导致的用户流失，这次总结下几个常见的进度条实现方案。定时器加载loading.gif，大概估算页面加载时间，隐藏loading；一开始显示loading.gif，页面加载完成时隐藏loading.gif /* 文档状态document.readyState: loading：加载html阶段，尚未完成解析时 interactive：html文档解析完成，加载外部资源阶段时 complete：加载完成时 */ var loading = document.getElementById('loading' ); document.onreadystatechange = function (){ if (document.readyState === 'complete' ){ loading.style.display = 'none' ; } } 几种事件的执行顺序 // 测试显示执行顺序为onreadystatechange -> onready -> DOMContentLoaded -> onload window.onload = function (){ console.log(document.readyState +'(onload)' ); } document

订阅 nth-child