自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(27)
  • 资源 (1)
  • 收藏
  • 关注

原创 高仿小米商城局部页面 (HTML+CSS)

1、设计思路1.1、将整个页面分为两部分手机 和 查看全部 部分 ,取名为 header手机 展示部分,取名为 main1.2、页面设计思维导图2、HTML 代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> ...

2020-03-11 00:27:14 2595

原创 5分钟了解 position 属性

position 属性规定元素的定位类型1、position属性 说明这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。2、position 属性值值描述absolute生成绝对定位的元素,相对于最近的非static属性进行定位;若无非stat...

2020-04-12 21:41:56 818 1

原创 一个属性搞定指向小箭头

transform: rotate(α) 的 应用1、实现思路创建一个正方形的块元素 arrow添加 左侧边框、上侧边框,设置为1px solid red ;将 arrow 顺时针 旋转 45°根据 定位,将元素放在另一个元素之上2、代码实现<!DOCTYPE html><html lang="en"> <head> ...

2020-04-06 10:31:19 271

原创 z-index属性,你真的会用吗?

z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候, z-index 较大的元素会覆盖较小的元素在上层进行显示。1、定义与用法z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释:元素可拥有负的 z-index 属性值。注释:Z-index 仅能在定位元素上奏效(例如 positi...

2020-04-02 18:45:47 621

原创 深入浅出谈 iframe

HTML内联框架元素 <iframe> 表示 嵌套的 browsing context。它能够将另一个HTML页面嵌入到当前页面中。1、定义与用法iframe 元素会创建包含另外一个文档的内联框架(即行内框架)HTML 与 XHTML 之间的差异在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素提醒和注...

2020-04-01 19:06:22 477

原创 webstorm恢复误删除的项目

新建同名文件夹(一定注意名称要相同,差一个字母都不行)webstorm打开,右键选择Local History->Show History左侧单击选择想要恢复的记录,右侧单击选中整个项目选择Revert Selection,确定,项目就恢复了...

2020-03-29 18:47:47 412

原创 一超多强:浏览器的内核大战

主流浏览器内核介绍在前端的学习中,要实现多种浏览器的兼容性,所以就必须了解浏览器的底层原理,而内核就是非常重要的一环。1、浏览器内核?早期,浏览器内核也称为“渲染引擎”,用来解析HTML语法并进行渲染,W3C虽然规定了标准,但最终还是浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息,不过,除了IE以外,目前主流的浏览器内核都已经比较完美的支持W3C标准了。直到后来,浏览器内明确分...

2020-03-28 13:42:13 128

原创 快速 fieldset 属性详解

fieldset 元素通常用来对表单中的控制元素进行分组(也包括 label 元素)1、属性fieldset 中包含 所有全局属性disabled 如果设置了这个 bool 值属性, 它的后代表单控制元素也会继承这个属性, 它的首个可选的 legend 元素除外, 例如, 禁止编辑. 该元素和它的子元素不会接受任何浏览器事件, 比如点击或者 focus 事件, 一般来说浏览器会将这...

2020-03-27 12:31:58 3562

原创 5分钟带你理解内边距属性 padding

1、定义与用法padding 简写属性在一个声明中设置所有内边距属性说明:这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。**注释:**不允许使用负值。2、padding 属性及其值...

2020-03-26 19:15:31 2996

原创 3分钟带你轻松了解贝塞尔曲线(cubic-bezier)

1、前言在了解 cubic-bezier 之前,你需要对 CSS3 中的动画效果有所认识,它是 animation-timing-function 和 transition-timing-function 中一个重要的内容。2、定义与用法ubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。贝塞尔曲线曲线由四个点 P0,P1,P2 和 P3 定义。P0 和 P3...

2020-03-25 10:57:58 1398

原创 英文断句:理解 word-wrap、word-break用法

1、定义与属性1.1、word-wrap允许长单词换行到下一行语法word-wrap: normal|break-word;值描述normal只在允许的断字点换行(浏览器保持默认处理)。break-word在长单词或 URL 地址内部进行换行。1.2、word-break在恰当的断字点进行换行语法word-break: normal|break...

2020-03-24 22:13:08 526

原创 ::before和::after伪元素的用法

1、伪类和伪元素css3为了区分伪类和伪元素,伪元素采用双冒号写法。1.1、伪类:hover:link:active:target:not():focus1.2、伪元素::first-letter::first-line::before::after::selection::before和::after下特有的content,用于在css渲染中向元素逻辑上的头...

2020-03-23 10:06:24 189

原创 5分钟深入了解margin属性

1、定义与用法margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。**说明:**这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。**注释:**允许使用负值。2、属...

2020-03-21 12:07:06 19657 1

原创 关键帧(@keyframes)

@keyframes 规则通过在动画序列中定义关键帧(或waypoints)的样式来控制CSS动画序列中的中间步骤。这比转换更能控制动画序列的中间步骤。1、语法1.1、取值 帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。from 等效于 0%to 等效于 100% 动画序列中,触发关键帧的时间点,使用百分值来表示。1.2、语法格式@keyframes <...

2020-03-20 16:39:42 1847

原创 CSS3 opacity 属性

设置 div 元素的不透明级别1、属性opacity属性指定了一个元素的透明度。换言之,opacity属性指定了一个元素后面的背景的被覆盖程度。当opacity属性的值应用于某个元素上时,是把这个元素(包括它的内容)当成一个整体看待,即使这个值没有被子元素继承。因此,一个元素和它包含的子元素都会具有和元素背景相同的透明度,哪怕这个元素和它的子元素有不同的opacity属性值。2、语法op...

2020-03-20 11:35:03 17126 4

原创 CSS3 text-overflow 属性

1、定义与用法text-overflow 属性规定当文本溢出包含元素时发生的事情。text-overflow: clip|ellipsis|string;值描述clip修剪文本。ellipsis显示省略符号来代表被修剪的文本。string使用给定的字符串来代表被修剪的文本。2、案例分析<!DOCTYPE html> <...

2020-03-20 11:10:22 213

原创 dispaly、position、float的关系与相互作用

1、属性分析display属性:规定元素生成框的类型。较为常见的有none-缺省值(用于隐藏元素,元素会消失于视界和文档流中),block-块级元素,inline-block-行内块级元素,list-item列表样式块级元素等。position属性:规定元素的定位类型,常用于布局。static-默认值,元素出现在正常文档流中(此时不受top、left、right、bottom、z-index...

2020-03-11 15:23:51 173

原创 深入理解 BFC、IFC、GFC、FFC

1、定义BFC全称 是 block formatting context,也就是 块级格式化上下文,是用于 布局块级盒子 的一块 渲染区域。IFC全称 是 inline formatting context,也就是 内联格式化上下文,是用于 布局内联元素盒子 的一块 渲染区域。GFC全称 是 gridLayout formatting context,也就是 网格布局格式上下文,是用于 布...

2020-03-11 13:40:02 2005

原创 box-shadow 属性 详解

1、box-shadow 语法box-shadow: none ;box-shadow: inset x-offset y-offset blur-radius spread-radius color;2、box-shadow 属性值描述阴影类型:此参数可选,默认的投影方式是 外阴影;如果取其唯一值“inset”,就是将外阴影变成内阴影X-offset:是指 阴影水...

2020-03-11 01:31:34 27684

原创 Git 使用教程

1、Git 配置$ git config --global user.name "YourName"$ git config --global user.email "YourEmail"git config命令的 --global参数,表明这台机器上的所有Git仓库都会使用这个配置,也可以对某个仓库指定不同的用户名和邮箱地址。2、版本库2.1、初始化 Git 仓库$ git ini...

2020-03-10 21:30:26 73

原创 深入理解 font-size

1、广义上的 font-size用于设置 字体大小,辅以单位控制,实质上是控制 字符框 的高度。2、狭义上的 font-size2.1、字体的基线line-height : 意为 行高 ,content-area (内容区域),被 font-family 、 font-size 共同影响(元素看到的高度与实际字体设置大小不一样的原因)em box : 意为 字体框 ,仅被 fon...

2020-03-07 17:54:01 30376 1

原创 控制网页播放视频

基于 JavaScript的单击事件 实现 网页播放视频 的开关,以抖音首页为例1、创建以视频为背景的html网页<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>抖音</title> ...

2020-03-05 14:39:26 431

原创 百度在线人脸识别API简单实现

基于 Python2.7 ,百度人脸识别在线API的调用1、申请百度人脸识别应用首先需要在百度智能云平台登录,登陆后创建应用,创建的应用是人脸识别的,默认已帮你勾选上了相关功能。创建应用后,点击管理应用,你就可以获取 API Key 和 Secret Key 。2、获取token现在就可以编写代码调用在线的 人脸检测API 了首先是获取 token ,用于校验,代码如下,注意换成自己...

2020-03-05 14:36:57 2212

原创 VS code 配置 C/C++ 环境(Windows)

1、前期准备1.1、VS code从 微软官网 下载最新版的 VS code,建议在安装时将选项全部勾选上,勾选后在文件和文件夹的右键菜单中会多出 Open with Code 这个选项,也就是用 vscode打开当前文件/文件夹。1.2、mingw-w64因为vscode只是一个代码编辑器,没有自带有C/C++的编译器。因此首先需要安装一个C/C++编译器并且设置环境变量,这里使用...

2020-03-05 14:34:38 618

原创 spool 命令详解(Oracle数据库)

记录 数据库命令 操作,并且储存在txt文件中1、启动 spool 命令SQL> spool path;path是创建记录命令的文件的绝对路径2、clear screen 命令SQL> clear screen;clear screen 命令用于清屏,但不会清除txt文件里的记录3、关闭 spool 命令SQL> spool off;spool off 命...

2020-03-05 14:31:02 4978

原创 LeetCode刷题

1、 刷题方法1.1、 时间规划每天都刷、规定时间牢记思路1.2、 按类型刷题每个类型10—20题(动态规划,多多益善),总计200-300题搞懂数据类型、数据结构、算法1.3、通过标签筛选题目难度类型1.4、刷题技巧同一类型的题目要一起刷刷题第一遍:5分钟以内想不出来题目,看答案刷题第二遍:尝试不要看答案,15-20分钟内实现...

2020-03-05 14:28:26 110

原创 使用字体图标教程

使用字体图标教程以fontAwesome为例1、下载 fontAwesome 包从 fontAwesome官网下载压缩包2、使用 fontAwesome 包将 fontAwesome 包解压然后复制到工程目录3、使用字体图标在html文件的head 标签里输入以下代码:<link rel="stylesheet" href="font-awesome/css/font-a...

2020-03-05 14:23:57 128

xiaomi.zip

高仿小米商城页面源码,里面包含了所需的fontawesome字体图标、HTML代码、CSS代码、以及所需的图片,用于大家交流学习,如有不合理之处欢迎指点。

2020-03-11

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除