文章
专栏
创作
写文章
创建专栏
一键迁移
登录
最新
推荐
热门
前端
后端
人工智能
鸿蒙专区
技术讨论
数字中台
其他
全部
前端
JavaScript
GitHub
面试
Vue.js
CSS
Node.js
更多
热门
最新
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 阅读
收藏
加载中...
没有更多文章了