-
10分钟理解CSS BFC原理及其应用
所属栏目:[站长百科] 日期:2020-05-13 热度:112
在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被[详细]
-
css3实现波纹特效、H5实现动态波浪效果
所属栏目:[站长百科] 日期:2020-05-13 热度:113
css3实现动态波纹特效,由于css3里面有过渡和动画效果,现在利用css3实现动态波浪效果就很简单了,直接使用transform来实现就ok, 使得translateX 产生偏移就可以不断实现循环动态效果,这样就比传统的flash来实现更为简单。而且对页面也比较友好的。 比如[详细]
-
CSS实现多行多列的布局的实例代码
所属栏目:[站长百科] 日期:2020-05-13 热度:80
副标题#e# HTML: div class=box1box1:实现两列多行布局ulli111/lili222/lili333/li/ul/div CSS: .box1 { width: 500px; background: #EEEEEE;}.box1 ul { clear: both; overflow: hidden;}.box1 ul li { width: 48%; height: 100px; margin-bottom: 10px; b[详细]
-
详解Hadoop2.7.2 编译64位源码
所属栏目:[站长百科] 日期:2020-05-13 热度:134
最好是用新克隆的虚拟机 ,虚拟机内存设置大一点(我设置的4G),配置网络,主机名,关闭防火墙,关闭selinux 注意:采用root角色编译,减少文件夹权限出现问题 2.jar包准备(hadoop源码、JDK8、maven、ant 、protobuf) (1)hadoop-2.7.2-src.tar.gz (2)[详细]
-
详解Google Protobuf简明教程
所属栏目:[站长百科] 日期:2020-05-13 热度:156
Protobuf实际是一套类似Json或者XML的数据传输格式和规范,用于不同应用或进程之间进行通信时使用。通信时所传递的信息是通过Protobuf定义的message数据结构进行打包,然后编译成二进制的码流再进行传输或者存储。 Protobuf的优点 相比较而言,Protobuf有[详细]
-
VSCode常用知识小结
所属栏目:[站长百科] 日期:2020-05-13 热度:128
VSCode下载链接: https://code.visualstudio.com/ 2.VSCode汉化 3.VSCode常用插件(安装步骤同汉化) 3.1Auto Close Tag (自动闭合HTML/XML标签) 3.2Auto Rename Tag (自动完成另一侧标签的同步修改) 3.3Beautify (格式化 html ,js,css) 3.4Bracket Pair Col[详细]
-
vscode修改默认浏览器的方法
所属栏目:[站长百科] 日期:2020-05-13 热度:61
vscode怎么浏览器打开html预览?这里大家可以通过安装open in browser插件解决。 1.vscode怎么浏览器预览 1.点击拓展 2.输入open in browser,选择第一个 3.点击安装(笔者已安装,所以显示的禁用) 2.vscode怎么修改默认浏览器 在安装完open in browser插件[详细]
-
Vscode 打字特效插件Power Mode安装使用介绍
所属栏目:[站长百科] 日期:2020-05-13 热度:99
壹 引 我记得在17年使用atom编辑器的时候,使用过一款打字特效的插件,只要我们输入代码,代码上方就会有与代码颜色对应的星星效果,今天脑抽突然想起了这个中二插件,搜索了一番成功安装,大致效果如下,这里分享下设置: 贰 安装 打开插件,输入Power Mo[详细]
-
vscode怎么编译运行
所属栏目:[站长百科] 日期:2020-05-13 热度:190
vscode 的调试功能其实提供了一键编译运行的功能(ctrl+F5),但是启动特别特别慢… 又不想安装插件,后来发现vscode 提供了一个叫做 Task 的功能,下面我就来介绍一下怎么使用Task功能实现CC++的一键编译运行(Linux平台下,windows下自行修改)。python[详细]
-
Visual Studio和Visual Studio Code之间有什么区别
所属栏目:[站长百科] 日期:2020-05-13 热度:166
下面是Visual Studio和Visual Studio Code之间的详细差异。 如果你留意的话,.NET已被分成两部分: .NET Core(Mac / Linux / Windows) .NET Framework(仅限Windows) 所有用户界面技术(Windows Presentation Foundation,Windows Forms等)都是框架的[详细]
-
CSS3 clip-path 用法介绍详解
所属栏目:[站长百科] 日期:2020-05-13 热度:137
刷新 QQ 空间动态时,发现一则广告,随着用户上下滑动动态列表,就会自动切换广告图片,这样的效果对移动端本就不大的屏幕来说,无疑是很精妙的考虑,这样的效果是怎么实现的呢? 接下来就说说这个效果的具体实现思路: 将两张图片通过定位,相对于图片容[详细]
-
css常用元素水平垂直居中方案
所属栏目:[站长百科] 日期:2020-05-13 热度:134
flex实现水平垂直居中 适用场景:父子宽高都可未知(比较推荐这种方式,简单,而且目前兼容性也不错。) html headstyle.parent {width: 100%;height: 100px;background: cyan;display: flex;justify-content: center;align-items: center;}.son {width: 20%[详细]
-
深入理解CSS中的line-height的使用
所属栏目:[站长百科] 日期:2020-05-13 热度:175
什么是line-height(行高)? line-height 是指两行文字基线之间的距离。 什么是基线? 基线、底线、顶线、中线 注意: 基线(base line)并不是汉字文字的下端沿,而是英文字母x的下端沿。 不同字体的基线不尽相同。 行距、行高 line-height 与行内框盒子模[详细]
-
CSS实现镂空遮罩效果
所属栏目:[站长百科] 日期:2020-05-13 热度:163
前一阵子面试被问题到这个问题,突然懵逼了,脑子一片空白,以前知道这种效果,比如什么值得买的改版引导页面: 当时再紧张也应该打出一种实现方法,就是什么值得买这种使用图片实现 它首先加了一个半透明的黑色蒙层( background-color: rgba(0,0,0,.8)[详细]
-
详解flex布局的元素如何分配容器的剩余空间
所属栏目:[站长百科] 日期:2020-05-13 热度:50
副标题#e# 自从开始开学习 CSS 布局,想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。 在 flex 之前,如果不是专门去搜索相关的解决方案,一般人几乎想不出非常灵活的三(多)栏等高布局方案,而即使看了解决方案,很多人也会大呼[详细]
-
CSS3 translate导致字体模糊的实例代码
所属栏目:[站长百科] 日期:2020-05-13 热度:60
今日客户反馈,发现 使用了 translate会导致字体模糊。 .media-body-box{@media all and (min-width: 992px){position: absolute;width: 100%;top:50%;transform: translateY(-50%);right: 0;padding: 30px;}} 为了垂直居中,使用了 transform: translateY[详细]
-
CSS中@support实现渐进式网页设计实例代码
所属栏目:[站长百科] 日期:2020-05-13 热度:105
特性查询赋予了我们使用CSS检测浏览器是否支持某个css特性的能力。我们可以使用该功能在浏览器支持最新的CSS特性时,使用新的语法来编写我们的样式,同时对于不支持的浏览器进行优雅降级。 CSS的设计本身就是支持优雅降级的。对于浏览器不支持的CSS语法,[详细]
-
css transition animation的使用(内含贝赛尔曲线详解)
所属栏目:[站长百科] 日期:2020-05-13 热度:56
副标题#e# transition也叫过渡动画,主要是用于让一个元素从一种状态过渡到另一种状态效果,常用于主动触发的效果。例如移动端的页面切换(很常用)、button点击效果(也很常见)。 animation才是css3正宗的动画,主要是用于实现某种持续的动画效果(当然简[详细]
-
CSS背景图片固定宽高比自适应调整的实现方法
所属栏目:[站长百科] 日期:2020-05-13 热度:54
img标签可以使图片在保持宽高比不变的情况下自动调整。我们讨论的是div的背景图片实现固定宽高比自适应调整的方法。这里的图片不是 img标签一样通过src引入,而是通过css的background-image: url('路径')实现。 实现背景图片固定宽高比缩放我们采用padding[详细]
-
CSS3实现类似翻书效果的过渡动画的示例代码
所属栏目:[站长百科] 日期:2020-05-13 热度:75
副标题#e# 在VUE实战项目的中有一个加载推荐书籍的过渡动画,在项目中是使用JS实现。 当时看视频大概一个小时作用,拆分动画逻辑,写代码更是耗时。后来自己想着能不能用CSS动画直接写出来,折腾了半天,终于算是实现了。 可以查看加载动画地址 /*首先是DOM[详细]
-
针对class、id所做的CSS HACK
所属栏目:[站长百科] 日期:2020-05-12 热度:75
这是一篇关于CSS HACK的文章,这篇文章中提到的CSS HACK是针对class、id中属性的HACK,排列的顺序都具有要求。今天要和大家说的是针对class、id所做的CSS HACK。 .test{/*FF*/ height:20px; background-color:orange; } * html .test{/*IE7*/ height:20px;[详细]
-
css自定义占位文本(placeholder)的样式的方法示例
所属栏目:[站长百科] 日期:2020-05-12 热度:123
自定义占位文本(placeholder)的样式 当我们对input元素或者textarea元素写CSS样式的时候, 如果需要自定义占位文本(也就是placeholder)的样式的时候怎么办? CSS有一个伪元素选择器::placeholder可以解决我们的问题. 用法 HTML input placeholder=我是红色的[详细]
-
详解CSS3 弹性布局快速入门
所属栏目:[站长百科] 日期:2020-05-12 热度:87
弹性布局是新一代的布局方式,传统布局中使用浮动布局会给我们带来不少弊端,如CSS代码高度依赖于HTML代码结构等等,下面我将用几个例子让大家快速学会弹性布局。 PS:弹性布局适用于较简单的场景,过于复杂的场景可以尝试着使用CSS3的Grid布局,弹性布局[详细]
-
CSS揭秘之多重边框的实现
所属栏目:[站长百科] 日期:2020-05-12 热度:124
多重边框的两种实现方案: border-shadow outline !DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta name=viewport content=width=device-width, initial-scale=1.0meta http-equiv=X-UA-Compatible content=ie=edgetitleMutiple border/title/headbo[详细]
-
CSS八等分圆的实现示例
所属栏目:[站长百科] 日期:2020-05-12 热度:98
对于CSS的练习介绍如何绘制八等分的圆。 问题1 主要思路 这个地方的主要思路是将一个八等分的圆分成两部分。左边和右边的圆分别用半圆旋转而得。 1 注意:每个半圆最后要用外面的外包矩形切一下 详见#lfet #right 2 右边旋转的圆顺序不一样后面的可能会遮[详细]
