前端 - sdk社区 | 技术至上

更多

热门最新

2 年前 / 远方的远方

记不住的css属性

文字超出显示省略号1、超出一行显示省略号.ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 500px;}2、超出多行显示省略号div { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; word-break: break-all

1257 阅读

收藏
2 年前 / 含笑倾城

css文本样式和字体样式

一.css文本样式1.首行缩进p{ text-indent:2em;}2em指文字的2倍大小2.删除线p{ text-decoration:line-through; /* 一条直线从文本穿过*/}span{ text-decoration:underline;/*文本下方一条直线*/}div{ text-decoration:overline;/*文本上方一条直线*/}3.文字行间距p{ line-height:2em;}4.字母间距p{ letter-sp

1146 阅读

收藏
2 年前 / 天橙

令人窒息的垂直居中

平时工作中，经常会遇到各种居中的问题。水平居中，给父元素设置 text-align:center，就可以实现，但是垂直居中 emmm…今天来总结我用过的垂直居中：首先明确一件事情，padding，margin的百分比值，无论上下左右，都是根据父元素的宽度来定！1.针对固定宽高元素 Document body { background-color: yellow; } main { posi

1014 阅读

收藏
2 年前 / 搬运工2号

使用 mask 实现视频弹幕人物遮罩过滤

经常看一些 LOL 比赛直播的小伙伴，肯定都知道，在一些弹幕网站（Bilibili、虎牙）中，当人物与弹幕出现在一起的时候，弹幕会“巧妙”的躲到人物的下面，看着非常的智能。简单的一个截图例子：其实，这里是运用了 CSS 中的 MASK 属性实现的。mask 简单用法介绍之前在多篇文章都提到了 mask，比较详细的一篇是 -- 奇妙的 CSS MASK，本文不对 mask 的基本概念做过多讲解，向下阅读时，如果对一些 mask 的用法感到疑惑，可以再去看看。这里只简单介绍下 mask 的基本用法：

937 阅读

收藏
1 年前 / 德育处主任

这18个网站能让你的页面背景炫酷起来

原文出处：这18个网站能让你的页面背景炫酷起来这18个网站是我在取经路上意外发现的，里面包括纯CSS 实现的炫酷背景，还有专门制作背景图的网站。算是取经路上的大补之物~1. CSS3 Patterns Gallery🎗️ 传送门：『CSS3 Patterns Gallery』如果你认识 Lea Verou 的话，大概率知道这个网站，她徒手写了几十个纯CSS 实现的背景图样式。网站上提供了她的代码。如果你不认识她，那我一定要推荐你阅读一下《CSS揭秘（图灵出品）》这本书，它会让你大受震撼！

908 阅读

收藏
2 年前 / 小乌龟

快速实现IP地址归属地在线查询功能

前期准备判断IP归属地可以通过聚合数据提供地一个免费接口进行获取结果，https://www.juhe.cn/docs/api/id/1。由于提供的接口，不支持跨域请求，所以我们通过PHP进行请求，将结果返回前端页面展示。当然也可以通过Java、Python、Go等语言实现服务端代码 server.php请求接口部分代码，直接使用提供的代码示例：https://www.sdk.cn/details/vjxQ9bLPEpE7bqnKOZ

880 阅读

收藏
2 年前 / 含笑倾城

css文字垂直居中

1.知道高度设置居中.box1{ border: 1px solid pink; height:300px; /* position: relative; */ }.box2{ height: 100px; width: 100px; background-color: yellow; text-align: center; /* position: absolute; top:50%; l

845 阅读

收藏
1 年前 / 零00

JavaScript-密码框输入验证

111有时需要在前端页面，用户输入时先进行简单的验证，减少服务器压力例如，限定了字段的输入长度：输入框后有输入范围提示信息输入错误长度的话，变成错误提示信息输入正确长度的话，显示正确提示信息实现思路先写出输入提示信息，定义错误和正确的类，写出相应样式获取输入框元素对象，if语句对属性值进行长度判断，根据不同结果，显示不同的提示信息内容，设置不同的提示信息类名- - -以切换样式示例代码：密码框输入提示 div { wid

832 阅读

收藏
1 年前 / 零00

JavaScript-tab栏切换

tab栏：点击不同的标签，显示不同的内容，被点击的标签样式发生改变（突出选中的是哪一个）实现思路：将tab栏分为上下两部分，上面是导航列表，下面是各部分对应的内容。把标签和内容都写出来，内容按照标签顺序依次顺着写，给标签都添加自定义属性- - -index，属性值从0开始，依次增加1首先实现上面的效果，点击后样式切换，被点击的字体颜色、背景颜色改变等:①css定义一个类eg：current，里面定义改变后的样式，先给第一个标签写一个该类名，其他的不写类名，②js获取所有标签元素对象，- - -f

760 阅读

收藏
2 年前 / timing

前端比较实用的CSS

1.flex布局{ display: flex; flex-direction: column; align-items: center; justify-content: center { flex:1 /* 所有的子元素平均分配 */ }}我写css必定会用到他，自此之后摒弃flaot,毕竟float要清楚浮动，在我看来他完全可以替代float,而且最大的好处就是对任何不确定的宽和高，我们都可以让他垂直居中对齐，想要了解的更深点，可以点击这里 Flex 布局教

757 阅读

收藏
2 年前 / 含笑倾城

css布局模型

1.流动模型流动（Flow）是默认的网页布局模式。流动布局的特征：块状元素会在所处的包含元素内自上而下按顺序垂直延伸分布，因为再默认状态下，块状元素的宽度都为100%，以行的形式占据位置。在流动模式下，内联元素都会在所处的包含元素内从左到右平均分布显示。2.浮动模式div{ float:left; }3.层模型层模型的三种形式：绝对定位（absolute）如果想为元素设置层模型中的绝对定位，需要设置position:absolute，这条语句的作用将元素从文档流中拖出来，然后使用le

744 阅读

收藏
2 年前 / wex / ECMAScript 6 简介

viewports 剖析

本文转载之：Part1: http://www.quirksmode.org/mobile/viewports.htmlPart2: http://www.quirksmode.org/mobile/viewports2.html————作者：Perter-Paul Kouch————译者：@承风前言在这个迷你系列的文章里，我将解释viewport和多种中药的HTML标签元素的宽度是如何工作的，例如标签。同样也会解释window和screen宽度的问题。第一部分主要关于桌面（pc）浏览器，基本目

725 阅读

收藏
1 年前 / 零00

css样式失效问题解决

在编写页面时，在浏览器宽度超过一定宽度后，需要设置页面字体大小不再改变，但是写了样式之后没有实现该效果。打开网页检查，发现写的样式失效了：解决办法：在该样式后面添加 “!important” - - -》注意：!important代表css样式最高级，但是谨慎使用，不推荐使用，除非特殊情况需要使用

701 阅读

收藏
2 年前 / 含笑倾城

css水平居中

1.行内元素居中text-align:center#box2 { background-color: gray; text-align: center; }#box4 { background-color: hotpink; text-align: center; } 你好 2.定宽块状元素满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为auto来实现居中的。 div{

681 阅读

收藏
1 年前 / 零00

JavaScript-循环精灵图

如果一个模块中，有多个相同的标签，都要使用精灵图，且所用到的小图在精灵图中是有规律整齐排放的，可以使用JavaScript来设置，从而简化css代码。实现思路先找到小图在精灵图中的排列规律，写出位置算法，然后用for循环遍历标签，为标签设置背景图位置属性，用位置算法给属性赋值精灵图示例小图的x轴坐标都为0，y轴上第一个0，第二个44px，第三个88px、、、依次多44px，找到规律：每个的y轴坐标：索引 * 44px（索引从0开始），注意使用精灵图是要将图片向上移，所以y轴坐标为负值代码示例：

673 阅读

收藏

加载中...