前端 - sdk社区 | 技术至上

1 年前 / 远方的远方

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

498 阅读

收藏
1 年前 / 含笑倾城

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

491 阅读

收藏
1 年前 / 天橙

令人窒息的垂直居中

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

412 阅读

收藏
1 年前 / 含笑倾城

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

409 阅读

收藏
1 年前 / 小乌龟

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

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

401 阅读

收藏
1 年前 / 含笑倾城

css布局模型

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

377 阅读

收藏
10 个月前 / timing

前端比较实用的CSS

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

349 阅读

收藏
4 个月前 / 零00

css样式失效问题解决

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

334 阅读

收藏
3 个月前 / 零00

JavaScript-tab栏切换

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

336 阅读

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

335 阅读

收藏
3 个月前 / 零00

JavaScript-换肤效果（换背景）

换肤效果：点击不同图片，更换相应页面背景实现思路定义一组图片，每个src属性赋值背景图片路径获取一组图片元素对象（得到伪数组）for循环给图片绑定点击事件- - -onclick，事件处理程序中设置body元素对象的背景图片为- - -当前被点击的图片的路径注意：body元素对象的获取为- - -document.body，js为背景图片路径赋值注意路径的拼接- - -document.body.style.backgroundImage = 'url(' + this.src + ')';代码

331 阅读

收藏
1 年前 / 含笑倾城

css水平居中

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

322 阅读

收藏
1 年前 / 含笑倾城

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

320 阅读

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

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

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

313 阅读

收藏
3 个月前 / 零00

JavaScript-复选框全选/全取消

实现思路获取总选框、所有小选框元素对象总按钮控制小按钮- - -给总选框绑定onclick点击事件，事件处理程序- - -for循环遍历所有小选框，将总选框的- - -checked属性值- - -赋值给它们小按钮影响总按钮- - -for循环给每个小复选框绑定点击事件，每次点击都 for循环检查所有的复选框是否被选中：设置一个变量 flag 控制总按钮的选中状态，初始值为 true ，for循环遍历检查各小复选框选中状态，只要有一个没有选上，flag = false，break 跳出循环不

299 阅读

收藏

加载中...