前端 - sdk社区 | 技术至上

更多

热门最新

5 个月前 / 远方的远方

记不住的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

258 阅读

收藏
4 个月前 / 小乌龟

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

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

190 阅读

收藏
4 个月前 / 含笑倾城

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

182 阅读

收藏
4 个月前 / 天橙

令人窒息的垂直居中

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

173 阅读

收藏
4 个月前 / wex

viewports 剖析

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

141 阅读

收藏
4 个月前 / 含笑倾城

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

138 阅读

收藏
4 个月前 / 含笑倾城

css布局模型

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

131 阅读

收藏
4 个月前 / 含笑倾城

css盒子模型

盒子模型padding: top right bottom left实际高度：1.使用border为盒子添加边框p{ border:2px solid red /*这是border代码的缩写*/}p{ border-width:2px;/*边框宽度，除了可以用像素(px)，还可以使用thin|medium|thick(不常用)*/ border-style:solid;/*边框样式：dashed(虚线)，dotted（点线），solid(实线)*/ border-co

125 阅读

收藏
4 个月前 / 含笑倾城

css水平居中

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

121 阅读

收藏
3 个月前 / timing

前端比较实用的CSS

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

103 阅读

收藏
4 个月前 / 含笑倾城

flex弹性盒模型

flex属性 #box1 { background-color:yellow; height:100px; display: flex; justify-content: space-between; } #box1 p { width: 200px; } #box2 { background-color: g

97 阅读

收藏
9 天前 / 搬运工2号

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

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

49 阅读

收藏
10 天前 / 搬运工2号

【建议收藏】前端优秀实践不完全指南

本文其实应该叫，Web 用户体验设计提升指南。一个 Web 页面，一个 APP，想让别人用的爽，也就是所谓的良好的用户体验，我觉得他可能包括但不限于：急速的打开速度眼前一亮的 UI 设计酷炫的动画效果丰富的个性化设置便捷的操作b贴心的细节关注残障人士，良好的可访问性...所谓的用户体验设计，其实是一个比较虚的概念，是秉承着以用户为中心的思想的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。良好的用户体验设计，是产品

46 阅读

收藏

没有更多文章了