nth-child | 易学教程

用Python爬取大众点评数据，推荐火锅店里最受欢迎的食品

阅读更多关于用Python爬取大众点评数据，推荐火锅店里最受欢迎的食品

前言文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。作者：有趣的Python PS：如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http://t.cn/A6Zvjdun 首先笔者定位为成都，美食类型选的“火锅”，火锅具体类型选的不限，区域选的不限，排序选的智能，如图：你也可以选择别的选项，只是注意URL的变化。本文都是按照上述选项爬取的数据。接下来翻页观察一下URL的变化：第二页：第三页：很容易观察出翻页变化的知识p后面的数字，倒推回第一页，发现一样的显示内容，因此，写一个循环，便可以爬取全部页面。但是大众点评只提供了前50页的数据，所以，我们也只能爬取前50页。这一次，笔者用的pyquery来分析网页的，所以我们需要定位到我们所爬取的数据的位置，如图：在具体分析的网页的时候，我震惊了，大众点评的反爬做的太过分了，它的数字，一些文字居然都不是明文显示，而是代码，你还不知道怎么分析它。如图：很烦的，一些文字又可以显示，一些又用代码表示。一些数字也是，不过好一点的是数字只有9个，只要稍微观察一下，就能发现数字的代码是什么了。这里笔者列出来了。 {'hs-OEEp': 0, 'hs-4Enz': 2, 'hs-GOYR': 3, 'hs-61V1': 4, 'hs-SzzZ': 5,

HTML连载78-3D播放器下、背景尺寸属性

阅读更多关于 HTML连载78-3D播放器下、背景尺寸属性

一、继续完善之前的页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D188_3DPlayerXia</title> <style> *{ margin:0px; padding:0px; } body{ background:url("image/taobaoFocusPicture.jpg") no-repeat; background-size:cover;/*这个属性表示我们的图片肯定会填满整个网页，无论图片的大小*/ overflow:hidden;/*代表的就是超出屏幕不会出现滚动条*/ } ul{ height: 200px; width: 200px; /*background-color: red;*/ top:150px; position:absolute; left:50%; margin-left:-100px; transform-style: preserve-3d;/*注意这个3D效果设置在了父元素上*/ /*transform:rotateX(-10deg);!*这一行的目的就是为了让我们的3D效果显示更加明显*!*/ animation:sport 10s linear 0s infinite normal;/*动画效果*/ } ul li {

（整理）CCS中常用的选择器

阅读更多关于（整理）CCS中常用的选择器

**类选择器** 1、点号开始 2、包含字母、数字、连字符、下划线 3、点后面必须是字母开始 4、区分大小写 5、一个类选择器可以应用到多个标签 **** **ID选择器**（尽量不要用，留给JS） **** **组合选择器/并集选择器** **** #伪类选择器元素名称：伪类名称 a：link（未访问） a：vistied（已访问） a：hover（鼠标悬停） a：active（点击时）顺序必须是L、v、h、a 选择子代选择器（精确）：nth-child（x）例子 ul li:nth-child(2) {color:red;} 表示ul下的第二个li，字体为红色：nth-child（xn）其中n的取值是从0开始例子 ul li:nth-child(2n) {color:red;} 选择偶数项 ul li：nth-child（even） {color：red；} 选择奇数项 ul li：nth-child（odd） {color：red；} 选择div里类型为p的第三个p元素例子 div p：nth-of-type(3){color:red} ：last-child ：nth-last-child ：onl-child ：onl-of-type **** #后代选择器父级元素名称+空格+子级元素名称{声明块} 例如 div p {color：red；} *****

HTML连载76-正方体和长方体

阅读更多关于 HTML连载76-正方体和长方体

一、如何编辑出一个正方体上后下前的顺序编写，最后在写左右 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D184_3DTransformCube</title> <style> *{ margin:0; padding:0; } ul{ width: 200px; height: 200px; border: 1px solid black; box-sizing:border-box; margin:100px auto; position:relative; transform: rotateY(0deg) rotateX(0deg); transform-style: preserve-3d;/*转换成一个3D的面*/ } li{ list-style: none; width: 200px; height: 200px; text-align:center; line-height:200px; font-size:60px; position:absolute; } ul li:nth-child(1){ background-color: red; transform:rotateX(90deg) translateZ(100px) ; } ul li:nth

Web前端基础——jQuery（二）

阅读更多关于 Web前端基础——jQuery（二）

一、jQuery 中的常用函数 1) $.map(Array,fn); 对数组中的每个元素,都用fn进行处理,fn将处理后的结果返回,最后得到一个数组 //因为这些操作,没有与dom元素相关的,所以可以不用写在 $(function(){...}); 中 var arr=[1,3,5,7,9]; arr=$.map(arr,function(item){ return item*10; }); alert(arr); [10,30,50,70,90]; //上例是将数组中的每个元素乘10,然后返回新的数组 2) $.each(Array,fn); 对数组中的每个元素,调用fn这个函数进行处理,但是,没有返回值,比上例更常用 //例一 var nameList=["哈利波特","伏地魔","小恶魔","本田","尼桑"]; $.each(nameList,function(key,value){ //对于上面的数组来说,key就是索引,value就是元素值 alert(key+":"+value); }); //例二 var nameList={"aa":"哈利波特","bb":"伏地魔","cc":"小恶魔","dd":"本田","ee":"尼桑"}; $.each(nameList,function(key,value){ alert(key+":"+value); }); /

一文吃透jQuery选择器!

阅读更多关于一文吃透jQuery选择器!

1 jQuery选择器 jQuery选择器用于选择DOM元素进行相应操作,允许通过多种方式选择,包括标签名,属性名,类名,id等对元素进行选择,基于CSS选择器.jQuery中所有的选择器都以$符号开头,后面加一对括号. jQuery选择器可以分为基本选择器,层次选择器,过滤选择器与表单选择器. 2 基本选择器基本选择器可以分成四个: id选择器元素选择器类选择器通配符选择器组合选择器 2.1 id选择器 id选择器根据给定的id匹配一个元素,以 # 开头,如有: <div id="div1"></div> 则选择器 $("#div1") 会选择如果id中含有特殊字符,比如点: <div id="div1.1.1"></div> 则需要使用双反斜杠转义: $("#div1\\.1\\.1") 2.2 元素选择器根据元素的标签名查找所有符合的元素.假设有: <div>1</div> <div>2</div> <div>3</div> 选择器 $("div") 会选择所有div元素. 2.3 类选择器根据给定的css类名匹配元素,以 . 开头.如有: <div class="class1"></div> <p class="class1"></p> <div class="class2"></div> 选择器 $(".class1") 会选择: 选择器 $("

CSS实现自适应下保持宽高比

阅读更多关于 CSS实现自适应下保持宽高比

在项目中，我们可能经常使得自己设计的网页能自适应。特别是网站中的图片，经常要求在网页放大（或缩小）时，宽高同时放大（或缩小），而且不变形（即保持正常的长宽比）。为了不变形，常用的方法就是设置width值，然后高度height设置auto。如果是div，我们该如何处理呢。背景图片宽高比固定下面，我仿照了移动端的聚划算网站中（https://ju.m.taobao.com/）中间一部分的布局。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高度自适应</title> <style> *{ margin: 0; padding: 0; } div{ width: 100%; background-color: pink; position: relative; } div:after{display:block;content: "";visibility: hidden;clear: both;} div p{ float: left; width: 30%; padding-top: 35%; margin-left: 3%; border:1px black solid; border-radius: 10px; box-sizing: border-box; } div p:nth

loading.js

阅读更多关于 loading.js

/** * 将此js文件放在所以页面引入的其他js文件上方 */ // 加载HTML图 var _LoadingHtml = '<div id="loadingDiv" style="position:fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999;"><div style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);"><div class="loadEffect"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></div></div><style type="text/css">.loadEffect{width:100px;height:100px;position:relative;margin:0 auto;margin-top:100px;}.loadEffect span{display:inline-block;width:16px;height:16px;border-radius:50%;background:lightgreen

05-伪类选择器

阅读更多关于 05-伪类选择器

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte 1 /*没有被访问的a标签的样式*/ 2 .box ul li.item1 a:link{ 3 4 color: #666; 5 } 6 /*访问过后的a标签的样式*/ 7 .box ul li.item2 a:visited{ 8 9 color: yellow; 10 } 11 /*鼠标悬停时a标签的样式*/ 12 .box ul li.item3 a:hover{ 13 14 color: green; 15 } 16 /*鼠标摁住的时候a标签的样式*/ 17 .box ul li.item4 a:active{ 18 19 color: yellowgreen; 20 } View Code 再给大家介绍一种css3的选择器nth-child() /*选中第一个元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*选中最后一个元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*选中当前指定的元素数值从1开始*/ div ul li:nth-child(3){ font-size: 30px; color: purple; }

HTML连载71-翻转菜单练习

阅读更多关于 HTML连载71-翻转菜单练习

一、翻转菜单练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D174_OverturnMenu</title> <style> *{ margin:0; padding:0; } ul{ width: 400px; height: 40px; margin:0 auto; margin-top: 100px; background-color: yellow; } .nav>li { list-style: none; float:left; width: 120px; height: 40px; margin-left:10px; background-color: green; line-height: 40px; text-align: center; } .sub{ /*display: none;!*代表不显示元素*!*/ } .sub>li{ list-style: none; background-color: red; transform:rotateY(180deg); transition:all; /*opacity: 0;!*透明度，取值0-1*!*/ } .nav>li:hover .sub li{ transform:none; } .nav>li

订阅 nth-child