nth-child | 易学教程

[特效] 动态时间轴 css

阅读更多关于 [特效] 动态时间轴 css

参考： https://www.cnblogs.com/jr1993/p/4626815.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background: #333; } h1{ text-align: center; color:#fff; } .timezone{ width:6px; height: 350px; background: lightblue; margin: 0 auto; margin-top:50px; border-radius: 3px; position: relative; -webkit-animation: heightSlide 2s linear; } @-webkit-keyframes heightSlide{ 0%{ height: 0; } 100%{ height: 350px; } } .timezone:after{ content: '未完待续...'; width: 100px; color:#fff; position: absolute; margin-left: -35px; bottom: -30px; -webkit-animation: showIn

珍惜时光，我们还年轻

阅读更多关于珍惜时光，我们还年轻

我其实早已看透每次的茶余饭后这世界多么的脏每个人变成了半人半兽如果只有贪得无厌凡事方能如愿当我逐渐融入其中虚伪也会装看不见 Vue使用百度地图根据关键字搜索显示详细地址 < div class= "block"> < span class= "demonstration">默认 click 触发子菜单 </ span> < el-cascader v-model= "value" :options= "options" @ change= "handleChange"> </ el-cascader> </ div> < div class= "block"> < span class= "demonstration">hover 触发子菜单 </ span> < el-cascader v-model= "value" :options= "options" :props= "{ expandTrigger: 'hover' }" @ change= "handleChange"> </ el-cascader> </ div> < script> export default { data() { return { value: [], options: [{ value: 'zhinan', label: '指南', children: [{ value:

媒体查询

阅读更多关于媒体查询

例如： @media (min-width:750px) and (max-width:1920px){ ._td_box>tr>th:nth-child(1){ width: 60vw; } ._td_box>tr>th:nth-child(2){ width: 40vw; } } 来源： https://www.cnblogs.com/dongyuezhuang/p/11641548.html

媒体查询

阅读更多关于媒体查询

移动端使用媒体查询兼容ipad等大屏幕设备 @media(min-width:700px){ .everyReport{ margin-right: 10px!important; &:nth-child(3n){ margin-right: 0!important; } img{ width:160px!important; } .reportTitle{ width:160px!important; } } } @media(min-width:980px){ .everyReport{ margin-right: 10px!important; &:nth-child(3n){ margin-right: 10px!important; } } } 来源： https://www.cnblogs.com/huihuihero/p/11639673.html

基于jQuery实现切割轮播图，超级详细

阅读更多关于基于jQuery实现切割轮播图，超级详细

切割轮播图，详解今天写一个切割轮播图,我这里是基于vue.js的。首先，新建一个vue.js的项目，我这里就不多说了。因为我们用的是jQuery，这里我们第一步需要实现的是在vue项目中使用jQuery。（完整代码在最后）效果图如下： 1> 在控制台输入 cnpm i jquery --save 或者 npm i jquery --save ，添加相应的依赖。 2>这时我们就要修改配置文件了 webpack.base.conf.js 文件在文件头部添加 const webpack = require('webpack') resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), // 添加 1 'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery') } }, // 添加 2 plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery' }) ]

【新手向】一个超简单的基于jQuery ajax的天气预报

阅读更多关于【新手向】一个超简单的基于jQuery ajax的天气预报

1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>天气</title> 6 </head> 7 <body> 8 <div id="app"> 9 <h2>最新天气实况</h2> 10 <p>城市：<span></span></p> 11 <p>日期：<span></span></p> 12 <p>天气：<span></span></p> 13 <p>当前气温：<span></span></p> 14 <p>风向：<span></span></p> 15 <p>最高气温：<span></span></p> 16 <p>最低气温：<span></span></p> 17 <p>温馨提醒：<span></span></p> 18 <h2>未来7天天气预报</h2> 19 <table border="1" id="detail"> 20 <thead> 21 <tr> 22 <th>日期</th> 23 <th>天气</th> 24 <th>当前温度</th> 25 <th>最高气温</th> 26 <th>最低气温</th> 27 <th>风向</th> 28 <th>风力</th> 29 </tr> 30 </thead> 31 <tbody> 32 </tbody> 33

CSS总结（一）

阅读更多关于 CSS总结（一）

css的三种书写方式行内样式 <div style="color: pink;">熊二</div> 内嵌样式 <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: blue; } </style> </head> 外联样式（外链样式） <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="样式.css"> </head> <body> <div>熊大与熊二</div> </body> 颜色属性颜色的值的三种表示方式使用表示颜色的单词十六进制表示法 0-9 a-f color: #nn nn nn; n的取值：0-9, a-f （推荐使用）注意：当每两位相同的时候可以简写成三位 rgb表示法 rgb(n,n,n) n的取值： 0-255 color: red; color: #00ab22;*/ color: rgb(255,0,0);*/ 字体属性 font-size：设置字体大小 font-style：设置字体样式 font-weight：设置字体粗细 font-size: 100px; font-style: italic; /*设置字体倾斜*/ font

炫酷CSS3垂直时间轴特效

阅读更多关于炫酷CSS3垂直时间轴特效

<!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"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <title>Document</title> <style> .main-timeline { overflow: hidden; position: relative; } .main-timeline .timeline { position: relative; margin-top: -79px; } .main-timeline .timeline:first-child { margin-top: 0; } .main-timeline .timeline:before, .main-timeline .timeline:after { content: ""; display: block; width: 100%

CSS:nth-child用法

阅读更多关于 CSS:nth-child用法

1.我对 :nth-child的理解　　利用该选择器我们可以轻松的修改特定标签的样式 2. :nth-child的用法　　（1）选取第几个标签，这里的数字可以是我们想要的，如下面选取对应的第二个P标签 p:nth-child(2){color:red;} 　　（2）选取大于等于2的标签，n表示整数，整数代表大于等于，负数代表小于等于，如下面所示 p:nth-child(n+2){color:red;} //选取大于等于2的p标签 p:nth-child(-n+4){color:red;} //选取小于等于4的p标签　　（3）也可以使用公式 an+b 选取符合规则的标签，从偶数、奇数、也可以间隔选取。 p:nth-child(2n){color:red;} //选取偶数的P标签 p:nth-child(2n-1){color:red;}//选取奇数的P标签 p:nth-child(3n+1){color:red;}//自定义选取 “隔两个选一个” 来源： https://www.cnblogs.com/kbinblog/p/11536436.html

Vue中如何使用less

阅读更多关于 Vue中如何使用less

最近发现好多小伙伴在面试的过程中会问到vue如何使用less和scss，所以我绝对更新、复习一下less；废话不多说直接进主题；依赖下载 1、首先使用npm下载依赖； npm install --save less less-loader 2、安装完成后检查是否安装成功； lessc -v 　　 3、如果安装成功后，会显示安装成功后的版本；引用方法 1、在main.js import less from 'less' Vue.use(less) 2、然后创建一个.vue文件我们开始玩耍了；注意：独立的vue文件需要引入less <style lang="less"></style> 开始使用 1、less中变量的使用；在less，允许我们使用以变量的形式来定义，定义方式：@k:v; 使用方式：@k; <div class="box"></div> <style lang="less"> @color:red; @k:100px; .box{ width:@k; height:@k; background: @color; } </style> 此时就会有一个宽100px,高100px，背景红色的正方形显示在页面上了; 2、字符串拼接变量使用方式； <div class="box1"></div> <style lang="less" scoped> @img:'./img/

订阅 nth-child