-
CSS3 clip-path 用法介绍详解
所属栏目：[站长百科] 日期：2020-05-13 热度：174
刷新 QQ 空间动态时，发现一则广告，随着用户上下滑动动态列表，就会自动切换广告图片，这样的效果对移动端本就不大的屏幕来说，无疑是很精妙的考虑，这样的效果是怎么实现的呢？ 接下来就说说这个效果的具体实现思路： 将两张图片通过定位，相对于图片容[详细]
-
css常用元素水平垂直居中方案
所属栏目：[站长百科] 日期：2020-05-13 热度：140
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) html headstyle.parent {width: 100%;height: 100px;background: cyan;display: flex;justify-content: center;align-items: center;}.son {width: 20%[详细]
-
详解flex布局的元素如何分配容器的剩余空间
所属栏目：[站长百科] 日期：2020-05-13 热度：170
副标题#e# 自从开始开学习 CSS 布局，想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。 在 flex 之前，如果不是专门去搜索相关的解决方案，一般人几乎想不出非常灵活的三（多）栏等高布局方案，而即使看了解决方案，很多人也会大呼[详细]
-
CSS实现镂空遮罩效果
所属栏目：[站长百科] 日期：2020-05-13 热度：129
前一阵子面试被问题到这个问题，突然懵逼了，脑子一片空白，以前知道这种效果，比如什么值得买的改版引导页面： 当时再紧张也应该打出一种实现方法，就是什么值得买这种使用图片实现 它首先加了一个半透明的黑色蒙层（ background-color: rgba(0,0,0,.8)[详细]
-
CSS3 translate导致字体模糊的实例代码
所属栏目：[站长百科] 日期：2020-05-13 热度：76
今日客户反馈，发现 使用了 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 热度：122
特性查询赋予了我们使用CSS检测浏览器是否支持某个css特性的能力。我们可以使用该功能在浏览器支持最新的CSS特性时，使用新的语法来编写我们的样式，同时对于不支持的浏览器进行优雅降级。 CSS的设计本身就是支持优雅降级的。对于浏览器不支持的CSS语法，[详细]
-
css transition animation的使用（内含贝赛尔曲线详解）
所属栏目：[站长百科] 日期：2020-05-13 热度：158
副标题#e# transition也叫过渡动画，主要是用于让一个元素从一种状态过渡到另一种状态效果，常用于主动触发的效果。例如移动端的页面切换（很常用）、button点击效果（也很常见）。 animation才是css3正宗的动画，主要是用于实现某种持续的动画效果（当然简[详细]
-
CSS背景图片固定宽高比自适应调整的实现方法
所属栏目：[站长百科] 日期：2020-05-13 热度：110
img标签可以使图片在保持宽高比不变的情况下自动调整。我们讨论的是div的背景图片实现固定宽高比自适应调整的方法。这里的图片不是 img标签一样通过src引入，而是通过css的background-image: url('路径')实现。 实现背景图片固定宽高比缩放我们采用padding[详细]
-
CSS3实现类似翻书效果的过渡动画的示例代码
所属栏目：[站长百科] 日期：2020-05-13 热度：77
副标题#e# 在VUE实战项目的中有一个加载推荐书籍的过渡动画，在项目中是使用JS实现。 当时看视频大概一个小时作用，拆分动画逻辑，写代码更是耗时。后来自己想着能不能用CSS动画直接写出来，折腾了半天，终于算是实现了。 可以查看加载动画地址 /*首先是DOM[详细]
-
深入理解CSS中的line-height的使用
所属栏目：[站长百科] 日期：2020-05-13 热度：102
什么是line-height(行高)？ line-height 是指两行文字基线之间的距离。 什么是基线？ 基线、底线、顶线、中线 注意： 基线（base line）并不是汉字文字的下端沿，而是英文字母x的下端沿。 不同字体的基线不尽相同。 行距、行高 line-height 与行内框盒子模[详细]
-
移动端rem布局的两种实现方法
所属栏目：[站长百科] 日期：2020-05-12 热度：127
据了解，现在有两种rem布局的样式控制，其中一种是通过css的媒体查询，另外一种是通过引入js来控制，这两种方法各有各的优点，但是我还是喜欢用引入js的方法来实现rem布局，尽管现在市面上大多数都在使用css媒体查询的方式实现，在此我就将这两种方法做一[详细]
-
CSS 常用中文字体 Unicode 编码表
所属栏目：[站长百科] 日期：2020-05-12 热度：114
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。 为此，在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。 例如： font-f[详细]
-
css3 响应式媒体查询的示例代码
所属栏目：[站长百科] 日期：2020-05-12 热度：96
/* 将body的背景颜色设置为tan */body { background-color: tan;}/* 在992px或更低的屏幕上，将背景颜色设置为蓝色 */@media screen and (max-width: 992px) { body {background-color: blue; }}/* 在600px或更低的屏幕上，将背景颜色设置为橄榄色 */@medi[详细]
-
CSS3动画之利用requestAnimationFrame触发重新播放功能
所属栏目：[站长百科] 日期：2020-05-12 热度：132
css3中引入了animation模块,自此css动画进入了我们的视野。css动画名符其实,会写css样式就可以创作动画，对一些不怎么会JS的设计师也是比较包容的。但也正因为如此，当你需要重新播放或者说手动触发动画时，css的局限性就突显出来了，毕竟它不是一门编程语[详细]
-
CSS背景图片实现自适应、全屏、填充与拉伸的方法
所属栏目：[站长百科] 日期：2020-05-12 热度：98
div id=formbackground style=position:absolute; width:100%; height:100%; z-index:-1 img src=http://www.jb51.net/css/pictures/background.jpg height=100% width=100%/ /div div id=formbackground style=position:absolute; z-index:-1;img src=htt[详细]
-
浅谈CSS 浏览器样式重置终结版
所属栏目：[站长百科] 日期：2020-05-12 热度：196
副标题#e# 浏览器的一些默认样式，有时候真的是特别丑； 虽然现在有现成的 UI 框架，但有时候写个小东西不想用那么庞大的 UI 框架,这篇文章介绍解决一些样式问题，最后将给出完整的重置样式表; 如果有遇到其它样式问题，评论区提建议，我将持续更新 样式问[详细]
-
CSS实现标签效果的示例代码
所属栏目：[站长百科] 日期：2020-05-12 热度：66
这里以制作图片右上角标签为例，用CSS以最简单、直接的方式实现效果。 实现效果 实现思路 准备两个div（一个父容器，一个标签div），分别设置宽高，并设置相对布局。 使标签div居于父容器右上角，设置内容居中显示，设置背景和字体颜色，旋转该div。 将父[详细]
-
CSS实现带箭头的提示框效果【示例代码】
所属栏目：[站长百科] 日期：2020-05-12 热度：117
我们在很多UI框架中看到带箭头的提示框，感觉挺漂亮，但是之前一直不知道其原理，今天网上找了些资料算是弄清楚原理了； 先上效果图： 原理分析： 上面的箭头有没有觉得很像一个三角形，是的，它就是三角形；只不过它这个尖角是通过两个三角形来实现的；[详细]
-
使用CSS 给表单必选项添加星号的实现方法
所属栏目：[站长百科] 日期：2020-05-12 热度：194
在制作网页表单的时候，如果一个选项是必填的，通常会给选项添加一个星号，比如 Typecho 的评论表单： p class=form-grouplabel for=author姓名/label span class=required*/spaninput type=text id=author name=author required=required size=30 class=f[详细]
-
使用css创建一个优惠券的方法
所属栏目：[站长百科] 日期：2020-05-12 热度：62
添加优惠券类目,展示用户的优惠券 常见的设计样式如下图,核心为半圆 分步拆解 优惠券的特点是带有反向圆角,为了展示效果更好,适配多种场景,不推荐使用背景图片形式,建议使用 css . 网上有几种方案: 一种是 boder+clip 的形式,裁剪出4个小半圆角,拼凑在一起[详细]
-
搭建websocket消息推送服务,必须要考虑的几个问题
所属栏目：[站长百科] 日期：2020-05-12 热度：83
副标题#e# 近年，不论是正在快速增长的直播，远程教育以及IM聊天场景，还是在常规企业级系统中用到的系统提醒，对websocket的需求越来越大，对websocket的要求也越来越高。从早期对websocket的应用仅限于少部分功能和IM等特殊场景，逐步发展为追求支持高并[详细]
-
Linux/Ubuntu Git从安装到使用的方法步骤
所属栏目：[站长百科] 日期：2020-05-12 热度：82
说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！ 一.叙述 1.说明：需要在Windows 安装Git的同学，可以查看该篇博客https://www.jb51.net/softjc/711624.html相对Windows来说，Ubuntu安装使用Git就很简单了。 2.Git的两大特点 版本[详细]
-
Jar包一键重启的Shell脚本及新服务器部署的一些经验分享
所属栏目：[站长百科] 日期：2020-05-12 热度：82
最近公司为客户重新部署了一套新环境，由我来完成了基础环境的配置，配置过程中总结了一些经验，分享给各位园友 使用 curl 命令检查网络 拿到新服务器后，首先检查服务器网络是否通畅。我们常用的 ping 命令使用的是 ICMP 协议，大部分服务器都设置了域名[详细]
-
完全卸载VSCode--解决卸载重新安装后还有原来配置的问题(图解)
所属栏目：[站长百科] 日期：2020-05-12 热度：139
VSCode卸载后进行重新安装，发现新安装的还有原来的一些配置，卸载的不彻底，有时候也容易出问题，可按照如下方法卸载干净： 1.进入控制面板卸载VSCode，也可以在VSCode的安装目录下用程序自带的卸载程序（这个没有亲自试过.....） 2.这样卸载完后还有一些[详细]
-
详解Idea 2020 找不到或无法安装官方汉化包解决方案
所属栏目：[站长百科] 日期：2020-05-12 热度：181
Idea 2020 发布之后，官方终于支持了中文语言包 但是，我下载后在插件市场无法找到官方的汉化包 那要怎么解决这个问题呢？ 首先，查看你当前Idea的Bulid版本 然后去官网下载离线汉化语言包，下载链接 可以看到一堆的版本号，这里要注意下，目前官方的最新[详细]
