content | 易学教程

如何理解盒模型

阅读更多关于如何理解盒模型

盒模型有两种，W3C 和 IE 盒子模型 1、W3C定义的盒模型包括 margin、border、padding、content ，元素的宽度 width = content 的宽度； 2、IE盒模型与W3C盒模型的唯一区别就是元素的宽度，元素的 width = border+padding+content；对盒模型的理解 IE定义的盒模型较为合理，所以在css3中新增了 box-sizing ，包含两个属性 content-box 和 border-box ； 1）content-box 元素的 width = content； 2）border-box 元素的 width = border + padding + content；更多理解对于行内元素 margin-top/margin-bottom 对于上下元素无效，margin-left/margin-righ有效；对于相邻的块级元素 margin-top 和 margin-bottom 两者叠加按照一定的规则； 1）都是整数 margin 值取两者的最大值； 2）都是负数 margin 值取最小值； 3）两者正负相反，margin 值取两者之和；　　　　来源： https://www.cnblogs.com/wangqian888/p/11973458.html

Mixed Content: The page at was loaded over HTTPS, but requested an insecure image.

阅读更多关于 Mixed Content: The page at was loaded over HTTPS, but requested an insecure image.

让浏览器不再显示 https 页面中的 http 请求警报 HTTPS 是 HTTP over Secure Socket Layer，以安全为目标的 HTTP 通道，所以在 HTTPS 承载的页面上不允许出现 http 请求，一旦出现就是提示或报错： Mixed Content: The page at ‘ https://www.taobao.com/ ‘ was loaded over HTTPS, but requested an insecure image ‘ http://g.alicdn.com/s.gif ’. This content should also be served over HTTPS. HTTPS 改造之后，我们可以在很多页面中看到如下警报：很多运营对 https 没有技术概念，在填入的数据中不免出现 http 的资源，体系庞大，出现疏忽和漏洞也是不可避免的。 CSP 设置upgrade-insecure-requests 好在 W3C 工作组考虑到了我们升级 HTTPS 的艰难，在 2015 年 4 月份就出了一个 Upgrade Insecure Requests 的草案，他的作用就是让浏览器自动升级请求。在我们服务器的响应头中加入： header ("Content-Security-Policy: upgrade-insecure

Vue 实现tab切换

阅读更多关于 Vue 实现tab切换

https://www.jb51.net/article/166102.htm https://segmentfault.com/q/1010000012863019/ v-bind 三元：<h2 :class="off ? 'red':'green'">三元表达式</h2>  <div id="app"> <ul> <li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)">{{item}}</li> </ul> <div class="tabCon"> <div v-for='(itemCon,index) in tabContents' v-show=" index == num">{{itemCon}}</div> </div> </div>  <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { tabs: ["标题一", "标题二","标题三"], tabContents: ["内容一", "内容二","内容三"], num: 1 }, methods: { tab(index) { this.num = index;

伪元素 before 和 after 初探

阅读更多关于伪元素 before 和 after 初探

伪元素 before 和 after 初探使用了 CodePen 做演示，欢迎点击预览定义首先来看 MDN 的定义： ::before 创建一个伪元素，作为已选中元素的第一个子元素，常通过 content 属性来为一个元素添加修饰性的内容。 ::after 创建一个伪元素，作为已选中元素的最后一个子元素，常通过 content 属性来为一个元素添加修饰性的内容。语法 /* CSS3 语法 */ element::before { 样式 } /* （单冒号）CSS2 */ element:before { 样式 } CSS3 引入 :: 用来区分伪类和伪元素。使用添加引号首先看一下基本使用，在 q 标签的前后加上 « 和 »。 HTML <q>Some quotes,</q> he said, <q>are better than none.</q> CSS q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; } Result Adding quotation marks 缸绘制一个缸的正面图形。 HTML <div class='vat'></div> CSS .vat { width: 160px; height: 160px; border-radius:

Html5-底部菜单实现

阅读更多关于 Html5-底部菜单实现

今天准备实现一个像qq底部菜单的效果，点击颜色变化加载相应的html文件。具体效果如下图：实现很简单：主要分为三个部分的div（top,content,menu）。虽然很简单但也遇到了不少坑，这里简单总结下：刚开始我将menu的position属性设置为absolute,然后将content内容填满并超过自身高度滚动后发现menu也跟着滚动了。（我既然这么说那肯定就是这个属性设置的有问题了）请教别人后才知道将position属性设置为fixed就能将menu的位置固定了。于是就百度看了下两者的区别： absolute:绝对的。相对应 static 定位以外的的第一个元素。 fixed :固定的。相对于浏览器定位。具体实现（带注释就不做过多解释）： <!DOCTYPE html> < meta name = "viewport" content = "width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > 底部菜单实现点击切换页面 </ title > < style > * { box-sizing :

JS 来回切换图片

阅读更多关于 JS 来回切换图片

< html > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" /> < title > JavaScript tab切换 </ title > < style > #card { font-size : 14 px ; color : #fff ; } #tit { width : 300 px ; height : 30 px ; } #tit h3 { width : 96 px ; text-align : center ; float : left ; border : 2 px solid #fff ; background-color : #ccc ; line-height : 30 px ; padding : 0 px ; margin : 0 px ; } #tit .h3_now { background-color : #888 ; } #content { background-color : #888 ; width : 300 px ; } #content div { display : none ; } #content .now { display : block ; } </ style > </ head > < body >

08-02 红薯小说网爬取(6层反扒,涉及js加密,js动态渲染,css反扒等等)

阅读更多关于 08-02 红薯小说网爬取(6层反扒,涉及js加密,js动态渲染,css反扒等等)

08-02 红薯小说网爬取(6层反扒,涉及js加密,js动态渲染,css反扒等等) 红薯小说网加密破解 1.1 目标站点网址 https://www.hongshu.com/content/3052/3317-98805.html 以某篇具体文章为例,咱来破解这个网站的加密,爬取到所有的小说内容 1.2 站点分析 1.2.1 目标资源分析我们的目的是要小说内容,那么先来看一看直接请求https://www.hongshu.com/content/3052/3317-98805.html得到的响应会不会有我要的数据你会失望的发现,响应体里面没有文章内容那就得去思考了,小说内容来自哪里?最大的可能是ajax发起二次请求,拿到json格式的数据再渲染到页面上. 带着这个思路,就去找找json数据憋诶呀,我**,找到了两个很可疑的响应: 第一个响应里的可疑字段: 'key':动动脑子都能猜到,这东西绝对有用第二个响应里的可疑字段: content:内容加密,瞅这个英语单词就知道加密内容小说内容有关 other:内容也是加密的,虽然还猜不到它到底有什么用,但八九不离十和小说内容有一腿我们再来看看,这两个请求如何模拟都是post请求,form-data也很简单,bid,jid,cid就在url上 https://www.hongshu.com/content/3052/3317

API更新#图书信息查询ISBN2.0

阅读更多关于 API更新#图书信息查询ISBN2.0

ISBN图书查询自2019年5月8日公布isbn查询接口1.0至今，该图书数据查询服务已被调用八万余次，查得图书11653本，感谢一直使用和关心这个接口的朋友们！目前网站域名将于2019年12月11日到期， qiaohaoforever.cn 域名将停止服务，请目前还是使用此域名接口的朋友注意调整新的接口，如有不便之处请多包涵。关于更新图书信息查询 isbn2.0 接口新增了部分开发者感兴趣的字段，图书简介、作者简介、目录、原文摘要、评论赞同数等，具体请见下方字段说明。针对外国书刊译者信息不统一的情况，这里采用图书摘要的字段显示作者、译者、出版社、出版时间、价格等。后期更新，字段以目前版本为主，尽量不改变现有字段含义，增加新的字段名。架构调整在服务架构上也做了一些调整，1.0版本为单机服务，2.0版本采用两台服务器负载均衡的方式分担压力，缓存机制优化等。关于爬虫根据日志可以看到，八万多次调用中也有明显的爬虫调用迹象，作为一名开发爱好者，我深刻的清楚大家没有办法忍住看到接口不爬的感情，为了服务于大家的热情，我并没有在反爬虫的方向做太苛刻的防守，但太过高频的爬虫容易触发豆瓣的反爬虫机制，导致接口无法获取最新的图书信息，所以，对于爬虫单位时间爬取频率做了部分限制🚫，望各位爬虫老哥记得设置一下爬取间隙，稍微sleep一下，温柔一点，哈哈哈😂

Django——models中导入数据重复的解决办法

阅读更多关于 Django——models中导入数据重复的解决办法

如果你导入数据过多，导入时出错了，或者你手动停止了，导入了一部分，还有一部分没有导入。或者你再次运行上面的命令，你会发现数据重复了，怎么办呢？ django.db.models 中还有一个函数叫 get_or_create() 有就获取过来，没有就创建，用它可以避免重复，但是速度可以会慢些，因为要先尝试获取，看看有没有只要把上面的 Blog.objects.create(title=title,content=content) 换成下面的就不会重复导入数据了 Blog.objects.get_or_create(title=title,content=content) 返回值是（BlogObject, True/False) 新建时返回 True, 已经存在时返回 False 。来源： CSDN 作者： weixin_34404393 链接： https://blog.csdn.net/weixin_34404393/article/details/85833383

HTML_head标签中META,IF IE等

阅读更多关于 HTML_head标签中META,IF IE等

常用蓝色标注 ‍<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <meta http-equiv="refresh" content="5;URL=http://www.baidu.com" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta name="keywords" content="keywords01,keywords02"> <meta name="description

订阅 content