前端 - sdk社区 | 技术至上

更多

热门最新

8 个月前 / 远方的远方

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

366 阅读

收藏
8 个月前 / 含笑倾城

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

318 阅读

收藏
8 个月前 / 小乌龟

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

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

287 阅读

收藏
7 个月前 / 含笑倾城

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

270 阅读

收藏
8 个月前 / 天橙

令人窒息的垂直居中

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

268 阅读

收藏
7 个月前 / 含笑倾城

css布局模型

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

244 阅读

收藏
14 天前 / 零00

css样式失效问题解决

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

215 阅读

收藏
8 个月前 / 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）浏览器，基本目

218 阅读

收藏
7 个月前 / 含笑倾城

css水平居中

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

215 阅读

收藏
7 个月前 / 含笑倾城

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

211 阅读

收藏
7 个月前 / timing

前端比较实用的CSS

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

204 阅读

收藏
7 个月前 / 含笑倾城

flex弹性盒模型

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

171 阅读

收藏
4 个月前 / 搬运工2号

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

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

165 阅读

收藏
2 个月前 / 零00

css-浮动float

浮动注意事项注意事项1：浮动和标准的父盒子搭配- - -网页布局可以先用标准的父元素排列上下位置，之后内部子元素采取浮动排列左右位置注意事项2：一个元素浮动了，理论上其他的兄弟元素也要浮动- - -父盒子中有多个子盒子，只要有一个盒子浮动了，其他盒子也要浮动，不然位置会变乱浮动的盒子只会影响后面的盒子清除浮动清除浮动原因没有给父盒子设置高度时，父盒子里面的子盒子后浮动之后，父元素的高度会变成0，没有高度，下面的盒子就会移动上来，为了不使下面的布局发生改动，不上移，可以设置css样式清除浮动带来的

144 阅读

收藏
4 个月前 / 搬运工2号

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

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

136 阅读

收藏

加载中...