nth-child | 易学教程

css笔记

阅读更多关于 css笔记

有些css属性虽然经常再用，但是基本概念久而久之却忘了。。。这篇博客就是一个笔记，时常回来看看，争取做到概念与运用都很熟练。 1、固定定位(fixed | absolute) 这两种定位方式都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位。不同的是 fixed 是根据浏览器窗口的左上角为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。而 absolute 参照的位置是离当前元素最近的定位方式为 fixed、absolute、relative 的祖先元素的左上角。 2、浮动：(float:left | right) CSS中的定位机制有：普通流，浮动，绝对定位(暂时不讨论) (1)普通流：很多人和文章称之为文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ，但标准里只有另一个词，叫做普通流(normal flow)。现实中大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。 (2)浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（"高度塌陷

扫什么，评什么

阅读更多关于扫什么，评什么

今天打开朋友圈，许多朋友都在发“扫什么评什么”，虽然这个只是一个朋友圈游戏，但是作为一个程序员，总是想去研究一下他到底是怎么实现的，打开源代码一看便知道怎么来实现这么一个“游戏”。接下来，简单的分析一下，有过网站基础的朋友一看就知道怎么来实现的，并没有什么技术含量。界面代码我们先不管复制怎么显示，只要“变化”的文字实现原理引用文字 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>你也来试试！</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 user-scalable=no"> <script src="http://css.0826.cc/w/clipboard.min.js"></script> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2

HTML5CSS3

阅读更多关于 HTML5CSS3

HTML5 第一天一、什么是 HTML5 HTML5 的概念与定义定义： HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 两个概念：是一个新版本的 HTML 语言，定义了新的标签、特性和属性拥有一个强大的技术集，这些技术集是指： HTML5 、 CSS3 、 javascript , 这也是广义上的 HTML5 HTML5 拓展了哪些内容语义化标签本地存储兼容特性 2D 、 3D 动画、过渡 CSS3 特性性能与集成 HTML5 的现状绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，总的来说： HTML5 已经是大势所趋二、 HTML5 新增标签什么是语义化新增了那些语义化标签 header — 头部标签 nav — 导航标签 article — 内容标签 section — 块级标签 aside — 侧边栏标签 footer — 尾部标签使用语义化标签的注意 - 语义化标签主要针对搜索引擎 - 新标签可以使用一次或者多次 - 在 `IE9` 浏览器中，需要把语义化标签都转换为块级元素 - 语义化标签，在移动端支持比较友好， - 另外，`HTML5` 新增的了很多的语义化标签，随着课程深入，还会学习到其他的三、多媒体音频标签多媒体标签有两个，分别是音频

CSS选择器（四）结构性伪类选择器

阅读更多关于 CSS选择器（四）结构性伪类选择器

写法描述 e:nth-child(n) 父级元素中的第n个子元素（必须叫e） e:nth-child(2n) 父级元素中的标识几倍倍数的子元素（必须叫e），2可以换成人和数字 e:nth-child(odd) 父级元素中奇数子元素（必须叫e） e:nth-child(even) 父级元素中偶数子元素（必须叫e） e:nth-child(n+x) 选取子元素大于等于x位标签的元素，“n”表示从整 e:nth-child(-n+x) 选取子元素小于等于x位标签的元素，“n”表示从整 e:nth-child(3n+1) 隔二取一 e:first-child 父级元素的第一个子元素（必须叫e） e:last-child 父级元素中的最后一个子元素（必须叫e） e:nth-last-child(n) 父级元素中的倒数第n个子元素（必须叫e） e:not(class) 排除父级元素中class为某的元素，并选中没有被排除的元素（必须叫e） e:nth-of-type(n) 父级元素中叫e的第n个子元素 e:first-of-type 父级元素中第一个叫e的子元素 e:last-of-type 父级元素中最后一个个叫e的子元素 e:target 选取当前活动的目标元素来源： CSDN 作者：丶夢里啥都有链接： https://blog.csdn.net/first_person

利用CSS实现带相同间隔地无缝滚动动画

阅读更多关于利用CSS实现带相同间隔地无缝滚动动画

说明：因为在移动上主要利用CSS来做动画，所以没有考虑其他浏览器的兼容性，只有-webkit这个前缀，如果需要其他浏览器，请自行补齐。首先解释一下什么是无缝滚动动画，例如下面的例子 See the Pen css实现上下循环滚动效果 by lilyH ( @lilyH ) on CodePen . ------------------------------------------------------------------------------- 实现原理：首先需要滚动的是每一条数据，而不是数据外面包裹的父元素保证每一条数据循环滚动的时间相同，只是他们之间滚动到可视区域的时间段不同平分滚动的整个时间段，保证每条数据滚动的时间间隔相同以上三条，看起来就头疼，也太绕了，下面直接说明例子中的实现方法。 1、html 通过class是wrap的div把可视区域固定在30PX高度内，在此区域中的为可见区域，在此之外的为不可见区域 2、CSS （1）.content p:nth-child(n) // 这里是为了获得每一个p数据，例子中具体写明了1，2。可以用n代替，比如2n表示偶数位置上的子元素 .content p:nth-child(2n)就是表示p元素位于0,2,4位置上的元素（2）-webkit-animation: anim1 3s linear

css3动画-加载中...

阅读更多关于 css3动画-加载中...

写几个简单的加载中动画吧。像前面三种都是相当于几个不同的点轮流来播放同一动画：变大变小。css3里面有一个用于尺度变换的方法： scale( x , y ) ：定义 2D 缩放转换，改变元素的宽度和高度。第四种就是一个小球从上往下跌落，再弹回去，在上面的时候速度最小，下面的时候速度最大。由于该小球只进行了上下的移动，所以我们可以运用： translateY( n )：定义 2D 转换，沿着 Y 轴移动元素，从而实现小球沿Y方向来回移动。废话不多说了，上代码。首先，第一个加载中的动画： 1 <div id="loading1"> 2 <div class="demo1"></div> 3 <div class="demo1"></div> 4 <div class="demo1"></div> 5 <div class="demo1"></div> 6 <div class="demo1"></div> 7 </div> html Code 1 .demo1 { 2 width: 4px; 3 height: 4px; 4 border-radius: 2px; 5 background: #68b2ce; 6 float: left; 7 margin: 0 3px; 8 animation: demo1 linear 1s infinite; 9 -webkit

CSS3扑克旋转

阅读更多关于 CSS3扑克旋转

用css3写的一个小demo——鼠标移动带扑克牌，扑克牌旋转铺开！图片和代码在下边铺开的话有点小问题，感兴趣的可以自己改动一下附上源码及图片 <!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> *{ margin: 0; padding: 0; } div.box{ width: 120px; height: 165px; position: relative; margin: 100px auto; /* overflow: hidden; */ } div.box div{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 bottom; transition: all .4s ease-in-out; background: url('img/timg.jpg')no-repeat;

CSS3 :nth-child() 选择器

阅读更多关于 CSS3 :nth-child() 选择器

复习巩固一下css3的nth-child()的用法。2015-10-20 1 W3C上的定义： :nth-child( n ) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 2 用法实例　　a 用在对元素的特定的子元素进行处理，　　　　比如p:nth-child(3){color:red;} 意思是设置p元素的第3个子元素的字体为红色。　　b 用于隔行变色　　　　odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。　　　　　　c 使用公式 ( an + b )。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值　　　　　　表示设置1,3,5...基数项颜色为红色 3 jQuery选择器中的:nth-child(even)和:even的区别　　a 使用nth-child(even) 页面效果：从1开始的偶数行背景为红色　　b 使用:even 页面效果：从0开始的偶数行背景为红色来源： https://www.cnblogs.com/hopexi/p/4894111.html

Python爬虫框架Scrapy获得定向打击批量招聘信息

阅读更多关于 Python爬虫框架Scrapy获得定向打击批量招聘信息

爬虫，就是一个在网上到处或定向抓取数据的程序，当然，这样的说法不够专业，更专业的描写叙述就是。抓取特定站点网页的HTML数据。只是因为一个站点的网页非常多，而我们又不可能事先知道全部网页的URL地址，所以，怎样保证我们抓取到了站点的全部HTML页面就是一个有待考究的问题了。一般的方法是，定义一个入口页面。然后一般一个页面会有其它页面的URL，于是从当前页面获取到这些URL增加到爬虫的抓取队列中。然后进入到新页面后再递归的进行上述的操作。事实上说来就跟深度遍历或广度遍历一样。 Scrapy是一个基于Twisted，纯Python实现的爬虫框架，用户仅仅须要定制开发几个模块就能够轻松的实现一个爬虫，用来抓取网页内容以及各种图片，很之方便～ Scrapy 使用 Twisted这个异步网络库来处理网络通讯，架构清晰，而且包括了各种中间件接口，能够灵活的完毕各种需求。总体架构例如以下图所看到的：绿线是数据流向，首先从初始URL 開始。Scheduler 会将其交给 Downloader 进行下载。下载之后会交给 Spider 进行分析。Spider分析出来的结果有两种：一种是须要进一步抓取的链接，比如之前分析的“下一页”的链接，这些东西会被传回 Scheduler ；还有一种是须要保存的数据，它们则被送到Item Pipeline 那里。那是对数据进行后期处理（具体分析、过滤、存储等

css3动画-加载中...

阅读更多关于 css3动画-加载中...

像前面三种都是相当于几个不同的点轮流来播放同一动画：变大变小。css3里面有一个用于尺度变换的方法： scale( x , y ) ：定义 2D 缩放转换，改变元素的宽度和高度。第四种就是一个小球从上往下跌落，再弹回去，在上面的时候速度最小，下面的时候速度最大。由于该小球只进行了上下的移动，所以我们可以运用： translateY( n )：定义 2D 转换，沿着 Y 轴移动元素，从而实现小球沿Y方向来回移动。首先，第一个加载中的动画： <div id="loading1"> <div class="demo1"></div> <div class="demo1"></div> <div class="demo1"></div> <div class="demo1"></div> <div class="demo1"></div> </div> html Code .demo1 { width: 4px; height: 4px; border-radius: 2px; background: #68b2ce; float: left; margin: 0 3px; animation: demo1 linear 1s infinite; -webkit-animation: demo1 linear 1s infinite; } .demo1:nth-child(1){

订阅 nth-child