云崖先生-CSDN博客

原创 CSS3系列 16 响应式布局

媒体查询媒体查询是响应式布局中非常常用的一种手段，在学习媒体查询之前要先了解什么是响应式。所谓响应式即在不同尺寸屏幕设备上响应的内容不同相信在之前你写的页面在PC端看非常华丽工整，但是一拿到移动端全部乱了套，这就是因为没有对页面做响应式处理。Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。媒体类型选项说明all所有媒体类型screen用于电脑屏幕，平板电脑，智能手机等print打印设备speec

2021-07-21 17:28:53 520 1

原创 CSS3系列 15 帧动画

基础知识通过定义一段动画中的关键点、关键状态来创建动画。@Keyframes相比transition对动画过程和细节有更强的控制。过渡动画是两个状态间的变化，帧动画可以处理动画过程中不同时间的细节变化，对过渡动画理解后再学习习帧动画会非常容易，也可以把帧动画理解为多个帧之间的过渡动画。关键帧使用@keyframes 规则配置动画中的各个帧from 表示起始点to表示终点可以使用百分数如 20% 代表动画运行到20%处基本使用下面使用 @keyframes 定义了动画叫 radius

2021-07-21 17:28:23 368

原创 CSS3系列 14 过渡时间

过渡时间基础知识在了解CSS过渡时间之前，你应该先了解一下CSS的变形动画，可以参考之前的一篇博客。我们的元素在属性发生变化时，如果没有特地的为它设置过渡时间，整个变化过程其实是以毫秒级别进行的，过程非常快，肉眼不易察觉。故我们要学习CSS过渡时间，来让它的变化过程更加平滑。动画属性不是所有css属性都有过渡效果，查看支持动画的CSS属性，一般来讲有中间值的属性都可以设置动画如宽度、透明度等。可以看一下下面这个例子，比如边框的样式就不支持过渡效果，而其他的诸如背景颜色，高度宽度等等都是支持过

2021-07-21 17:27:52 1216 5

原创 CSS3系列 13 变形动画

前言在开始介绍CSS变形动画之前，可以先了解一下学习了它之后能做什么，有什么用，这样你看这篇文章可能会有一些动力。学习了CSS变形动画后，你可以为你的页面做出很多炫酷的效果，如一个3D的魔方，一个很酷的旋转菜单等等。在本章节中将会采用大量的实例进行演示，相信你如果看完这篇文章后写出的页面会更加的吸引眼球。基础知识坐标系统首先我们要学习的变形动画，想达到在上图中出现的3D效果单纯的X与Y两个轴是实现不了的，还需要加入一条纵深轴，即Y轴的参与才有一个3D的视觉感受。那么如何来理解X,Y,Z这三条

2021-07-21 17:27:25 349 1

原创 CSS3系列 12 栅格布局

栅格布局基本介绍CSS的栅格布局也被称为网格布局(Grid Layout)，它是一种新兴的布局方式。栅格布局是一个二维系统，这意味着它可以同时处理列和行，与弹性布局相似，栅格系统也是由栅格容器包裹栅格元素进行使用。对于栅格布局来说，它的思想实际上非常简单，将一块区域绘制成格子，然后将元素填进去即可。作为学习者应该从下面两个角度来学习栅格布局：怎么样画出栅格容器怎么样将元素放进栅格容器中的某一区域值得一提的是，现在的一些旧版浏览器对于栅格布局并没有较好的支持性，所以这项技术的应用场景其实相

2021-07-21 17:26:47 5781

原创 CSS3系列 11 弹性布局

弹性布局基本介绍弹性布局flex是CSS3新增的一种布局方式，相较于浮动布局，弹性布局在开发效率与维护性上都远胜前者。flex全称为flexible box，因此也被称之为弹性盒子。学习弹性布局最主要从2个方面入手：弹性容器：被设置为display: flex或display: inline-flex的容器元素弹性元素：弹性容器中包裹的元素一个大的弹性容器中可以包含多个小的弹性容器，我们可以控制弹性容器中元素的排列方式，也可以为弹性元素进行单独的区域划分以及改变其排列方式，总之而言使用弹性

2021-07-21 17:26:14 1222

原创 CSS3系列 10 定位布局

定位布局基本介绍CSS中，定位布局是非常常见的技术手段，它可以将任意元素放在页面中任意的位置上。早期的页面基本都是由浮动+定位布局来完成的。我们以京东为例，这就是一个非常好的定位布局小例子：定位布局虽然常用但是不能滥用，他可能会出现一些意料之外的情况，我们应该只对一些特定元素进行定位，而对不需要定位的元素则可对其使用默认文档流和浮动的手段进行布局排列。定位类型 position使用position对一个元素进行定位。它可设置的值如下表所示：值描述static默认定位

2021-07-20 08:36:10 241

原创 CSS3系列 09 浮动布局

浮动布局基本介绍浮动布局是CSS早期最常使用的一种布局方式。说白了就是使元素进行漂浮，从而脱离默认文档流排列的一种技术手段。使用浮动布局应该注意以下几点：浮动应当发生在一个大盒子内部（body标签也可以看做一个大盒子）浮动后的元素会影响后面未浮动元素的排列方式浮动元素会自动转换为inline-block状态浮动元素只会在父盒子的content区域，不会溢出到父盒子的padding区域当一个父盒子中所有的元素都进行浮动后，可能会造成父盒子高度塌陷的问题使用浮动对一个元素使用float

2021-07-20 08:35:40 305

原创 CSS3系列 08 盒子模型

盒子元素基本介绍每一个标签都可以看做一个盒子，在网页的布局中也是大盒子不断的嵌套小盒子。每个盒子模型都包含以下名词：content：内容区域，可以由width与height来进行宽高设置，是盒子模型体积组成部分之一padding：内边距，指的是content与border之间的距离，是盒子模型体积组成部分之一border：边框，边框也算整个盒子模型的体积组成之一margin：外边距，指的是该盒子与另一个盒子之间的距离如下图所示：一个盒子的可视面积由3部分所构成（content、pad

2021-07-20 08:35:09 182 1

原创 CSS3系列 07 背景处理

背景样式纯色背景 background-color使用background-color可定义纯色背景。代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid

2021-07-20 08:34:33 162 1

原创 CSS3系列 06 数据样式

表格绘制表格 display我们除了可以使用table标签进行表格绘制外，在CSS3中display也同样支持表格的绘制。如下表所示：样式规则说明table对应 tabletable-caption对应 captiontable-row对应 trtable-cell对应 th 或 tdtable-row-group对应 tbodytable-header-group对应 theadtable-footer-group对应 tfoo

2021-07-20 08:34:01 164 1

原创 CSS3系列 05 文本控制

基础设置字体家族 font-family使用font-family可定义多个字体，浏览器会按照从左至右的顺序进行查找这些字体。为什么需要定义多个字体？原因是如果你只使用了一种字体而恰好用户的计算机中并没有该字体就会降低显示效果。代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible

2021-07-20 08:33:28 139

原创 CSS3系列 04 常见单位

像素大小pxpx是固定的像素单位，如果你的网页要在多端进行使用那么尽可能的少使用它，它不具有响应式的特性。如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="

2021-07-20 08:32:58 171 1

原创 CSS3系列 03 属性继承

选择器优先级不同的选择器具有优先级，如果一个元素同时被多个选择器所选择且设置了同名样式时，它会按照优先级来判定应用哪一个选择器的样式。如果优先级相同，则下面的选择器生效，常见优先级示例：行内式渲染：1000id选择器：100class选择器：10name选择器：1当使用组合选择器时，优先级会进行累加，如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt

2021-07-20 08:32:27 162

原创 CSS3系列 02 元素选择器

基本选择器* 通用选择器*会选择所有元素，无视层级。常用于做样式清除，如内边距、外边距清除等。示例如下，将所有的标签元素文本设置为红色：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"

2021-07-20 08:31:56 377 2

原创 CSS3系列 01 基础知识

CSS介绍基本介绍CSS全称为Cascading Style Sheet，译为层叠样式表。它能够为HTML进行样式美化以及页面布局。如果将单纯的HTML所构成的页面当做一副素描画，那么CSS的作用就是为这幅素描画进行上色处理。当然CSS也能对HTML文档进行布局，让其不再使用默认的文档流排列方式，而是利用CSS让元素进行自由的组合、排列。值得一提的是在早期没有出现CSS时，对HTML布局我们大多会使用table标签来进行，但是CSS诞生后就不会那么做了，使用CSS布局更加的方便。关于CSS的学

2021-07-20 08:31:21 124

转载 HTML5系列 09 媒体系标签

video 视频video标签可用于播放视频，但是他的效果并不是很好，所以推荐使用一些第三方插件，如：阿里云播放器video.js以下是viedo标签的常用属性，它是一个块级标签：属性描述autoplay视频自动播放，即视频加载完后会立即播放而不是等待用户进行手动点击preload视频预加载，设置为auto即可，它会根据网络情况自动加载视频controls视频播放按键，该属性是必须的height视频窗口高度width视频窗口宽度loo

2021-07-13 15:40:36 103

原创 HTML5系列 08 表单系标签

form 表单基本介绍form表单可用于向服务端提交数据，它是一个块级标签。我们常见的登录框、留言板等很多功能都是通过form表单完成的，使用form表单进行数据提交会导致页面的刷新。下面将采用flask框架作为后端，使用form表单进行一次数据提交。后端代码：from flask import Flaskfrom flask import requestapp = Flask(__name__)@app.route("/get", methods=['GET'])def get_

2021-07-13 15:39:02 244

原创 HTML5系列 07 表格系标签

table 表格标签table标签用于定义一个表格。它是一个块级标签，内部可用于嵌套的元素较多：caption - 表格标题thead - 表头结构（仅语义化标签，无实际作用）tbody - 表体结构（仅语义化标签，无实际作用）tfoot - 表尾结构（仅语义化标签，无实际作用）th - 表头单元格td - 表体单元格tr - 表行如下所示，定义一个4行3列的表格：<!DOCTYPE html><html lang="en"><head>

2021-07-13 15:38:31 338

原创 HTML5系列 06 列表系标签

ul - li 无序列表基本使用ul和li标签用于定义一个无序列表。它们都是块级标签，使用ul来嵌套li标签，并在li标签中书写列表排列的元素.你可以在li中书写任意元素，如a标签、纯文本、图片等：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g

2021-07-13 15:38:00 432

原创 HTML5系列 05 链接系标签

a 超链接基本使用a标签可定义一个超链接，用于从当前页面跳转到另一个页面。a标签最重要的属性为href属性，它指向链接的目标。它是一个内联标签：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp

2021-07-13 15:37:35 188

原创 HTML5系列 04 文本系标签

基础文本系标签h~ 标题标签h系列的标题标签拥有6个，即h1 - h6。h系列标签会根据等级的大小，字体的粗细会发生相应的变化，h1最大、h6最小。它是一个块级的自闭和标签，其内部只能嵌套内联标签，不能嵌套块级标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE

2021-07-13 15:36:32 387

原创 HTML5系列 03 结构系标签

header 页眉标签header标签代表一块内容区域的头部，一个页面中可以有一个或多个header标签。它是一个块级标签：nav 导航标签nav标签代表一块内容区域的导航，一个页面中可以有一个或多个nav标签。它是一个块级标签：main 主内容标签mian标签代表主要内容区域，一个页面中可以有一个或多个main标签，但通常只会定义一个。它是一个块级标签：footer 页脚标签footer标签代表一块内容区域的页脚，一个页面中可以有一个或多个footer标签，通常与header标签

2021-07-13 15:36:01 2398

原创 HTML5系列 02 声明系标签

!DOCTYPE html指定文档格式为HTML格式，浏览器会根据W3C的HTML标准格式渲染该文档中的内容。该标签为必加标签。<!DOCTYPE html>html 根标签HTML内容书写区域，也被称为根标签，所有的内容都应该写到他的内部。属性：lang = “en” 表示页面是英文格式，翻译页面时会读取此值来获取当前页面是什么语言编写。head 头部信息该标签的作用是专门提供一下网页的配置信息，如网页的标题，检索内容，解码格式等等。该部分内容虽然不会在页面展示，但也起到非

2021-07-13 15:35:12 281 1

原创 HTML5系列 01 基础介绍

基础介绍HTML全称为htyper text markup language，即超文本标记语言。超文本：即超出了纯文字文本的范畴，它可以包含图片、链接、音乐等非文字元素标记语言：由标签构成的语言，特点是学习简单上手容易它最早诞生于1990年，由物理学家蒂姆·伯纳斯-李所创建，在1989年的时候蒂姆·伯纳斯-李就曾在一份备忘录中提出一个基于互联网的超文本系统这样的概念，并且在1990年规定出了HTML并在同年写出了浏览器与软件：版本年份HTML1991HTML+19

2021-07-13 15:34:41 103

原创 Python网络与并发编程 18 asyncio 协程

协程协程（coroutine）并不是一个系统层面上真实存在的东西，而是由程序员进行创造。你可以理解为协程是用户态的“线程”，因此协程也被称为“微线程”或者“纤程（Fiber）”。协程能够做到在单线程下实现多线程的并发操作，这是非常厉害的一点。既然协程和线程很像，那么它对比线程有什么优势呢？协程和线程一样能够做切换，但是其切换代价远远小于线程，极大的提升了运行效率协程中修改共享数据时不需要为数据加锁，因为协程本身就是一个单线程协程有2大重要的概念，如下所示：作为用户态线程，它必然存在于内

2021-07-12 14:19:55 286

原创 Python网络与并发编程 17 常见I/O示例演示

阻塞I/O的socket服务端使用socket模块与concurrent.futures实现阻塞式I/O的socket服务端。开启多个子线程，每个子线程单独负责一个链接，这意味着该服务器最大的并发量取决于你CPU能够打开的最大有效线程数：import socketimport threadingimport concurrent.futuresclass TcpServer: def __init__(self, bind_addr=("localhost", 8001), allo

2021-07-12 14:19:14 118

原创 Python网络与并发编程 16 Linux五大I/O模型

基础知识I/O分类常见的I/O主要分为以下几类，如下所示：阻塞I/O（blocking I/O）非阻塞I/O（non-blocking I/O）同步I/O（sync I/O）异步I/O（async I/O）同步：调用端会一直等待服务端响应，直到返回结果异步：调用端发起调用之后不会等待服务端响应。服务端通过某种通知机制或者回调函数来通知客户端阻塞：服务端返回结果之前，客户端线程会被挂起，此时线程不可被CPU调度，线程暂停运行非阻塞：在服务端返回前，函数不会阻塞调用端线程，而会立刻返回

2021-07-12 14:18:20 130

原创 Python网络与并发编程 15 使用执行器提交任务

concurrent.futures我们在以往创建线程或进程的时候都会使用threading与multiprocessing模块进行创建。那么在本章节学习完成后就不要使用这两种方式创建线程或者进程了，而是应当使用concurrent.futures所提供的执行器来构建线程或进程并执行任务。concurrent.futures提供了2种执行器，如下所示，它们的接口使用也都一模一样：from concurrent.futures import ThreadPoolExecutor # 线程池执行器f

2021-07-12 14:17:40 1560

原创 Python网络与并发编程 14 生产者消费者模型

生产者消费者模型生产者消费者模型是一种设计思想，生产者生产出产品，消费者对产品进行消费。但是他们之间不直接进行接触，而是通过中间件进行产品交易，这样做的好处是降低生产者与消费者之间的耦合度，使他们没有强制的关联。如下图所示，当生产者生产出产品后会将产品放入中间件中，消费者监听中间件当中间件状态一旦发生变化后就立即获取出产品并消费：多线程实现下面将采用多线程实现生产者与消费者模型，需要借助queue.Queue()作为中间件：import threadingimport queueimpor

2021-07-12 14:16:34 113

原创 Python网络与并发编程 13 线程或进程通信

线程或进程通信在同一个进程中，该进程下的所有数据资源都会被该进程下的线程共享。为了保证数据安全性，我们在多个线程进行数据交互时必须使用一种线程安全的容器来承载交互信息。如，常见的Redis数据库、MQ等消息中间件是非常好的选择。当然，多进程也是如此。但是在实际的测试环境中，我们需要更加方便的一些工具来测试代码是否准确，这时候就会用到下面介绍的工具了。多线程通信queuequeue模块对于多线程通信来讲是十分明智的选择，它使用简单开箱即用，最关键的一点是它是Python的内置模块，故不用经历任

2021-07-12 14:15:58 86

原创 Python网络与并发编程 12 multiprocessing模块使用

multiprocessing模块Python中提供了multiprocessing模块来实现进程并发编程，官方文档如下：官方文档由于GIL锁的存在，所以CPython中多线程是不能够并行运行的，但是多进程可以并行运行，该模块用到的地方基本很少，但是仍然需要进行掌握。此外，它和threading模块99%的接口都一模一样，只有少量的差别。添加子进程针对不同平台选择添加子进程的方式multiprocessing模块针对不同的平台，添加子进程的方式也有所区别：spawn：该方式是Windows

2021-07-12 14:15:12 176

原创 Python网络与并发编程 11 threading.local()功能介绍

threading.local()threading.local()方法可以让每个线程都拥有一些自己独立的数据，这些数据是其他线程访问不到的。如图所示：或者用另外一种更形象的比喻更加的贴切，将一个进程比喻成一个公司，该进程下的线程比喻成公司的员工，而将threading.local()比喻为公司的储物柜，每个员工都有一个单独的柜格，且每个员工也只能访问自己的柜格。如图所示：那么这个东西到底有什么作用？举个例子，当你使用迅雷进行多线程下载时，每个线程的下载进度是不一样的，那么这个下载进度如何进行

2021-07-12 14:14:24 294

原创 Python网络与并发编程 10 threading模块线程锁

前言本章节将继续围绕threading模块讲解，基本上是纯理论偏多。对于日常开发者来讲很少会使用到本章节的内容，但是对框架作者等是必备知识，同时也是高频的面试常见问题。官方文档线程安全线程安全是多线程或多进程编程中的一个概念，在拥有共享数据的多条线程并行执行的程序中，线程安全的代码会通过同步机制保证各个线程都可以正常且正确的执行，不会出现数据污染等意外情况。线程安全的问题最主要还是由线程切换导致的，比如一个房间（进程）中有10颗糖（资源），除此之外还有3个小人（1个主线程、2个子线程），当小人A

2021-07-11 15:22:07 220

原创 Python网络与并发编程 09 threading模块使用

threading模块Python中提供了threading模块来实现线程并发编程，官方文档如下：官方文档添加子线程实例化Thread类使用该方式新增子线程任务是比较常见的，也是推荐使用的。简单的代码示例如下，创建3个子线程并向其添加任务，然后运行并打印它们的线程ID和线程名字：import threadingimport timedef task(params): print("sub thread run") currentThread = threading.cu

2021-07-11 15:21:28 405

原创 Python网络与并发编程 08 GIL锁

GIL锁是什么GIL锁是CPython所独有的，全称为Global Interpreter Lock，译为全局解释器锁。它是CPython经常被人诟病的一个槽点，直接让CPython的多线程变成了残废。GIL锁产生的原因CPython中的一个线程对应于C语言中的一个线程，而CPython在执行函数时会将函数转变为可执行的字节码，如果多个线程同时运行一段字节码是很有可能出错的，为了避免这个错误所以Python使用了GIL锁限制了多线程技术。GIL锁使得同一个时刻的同一进程下的多个线程只能有一个在CP

2021-07-11 15:20:40 195 2

空空如也

空空如也