前端 - 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

1 赞

0 评论

收藏
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

0 赞

1 评论

收藏
1 个月前 / 天橙

令人窒息的垂直居中

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

0 赞

0 评论

收藏
1 个月前 / 小乌龟

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

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

0 赞

0 评论

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

0 赞

0 评论

收藏
17 天前 / 含笑倾城

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

0 赞

0 评论

收藏
25 天前 / 含笑倾城

css布局模型

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

0 赞

0 评论

收藏
18 天前 / 含笑倾城

css水平居中

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

0 赞

0 评论

收藏
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

0 赞

0 评论

收藏
18 天前 / 含笑倾城

flex弹性盒模型

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

0 赞

0 评论

收藏

没有更多文章了