当前标签: css
一个很实用的css技巧简析
我是小雨小雨,专注于更新有趣、实用内容的小伙,如果内容对大家有一点帮助,那么就请动动手指,给个关注、点赞支持一下吧。 ^ - ^ 序言 前两天接到一个需求,其中包括一个有序的列表,我们今天就来看看这个有序怎么做更方便、简单。 当然,这个功能很简单: * 可以手动写死... * 可以循环插入dom,用索引...
2020-02-29 12:43
阅读(41)
天了噜,为什么外链css要放在头部,js要放在尾部?
(题图:梵高-向日葵) 我们最开始学前端的时候都会看到教程在处理外部css,js的时候会将css放在header中,js放在body的最后。为什么要这样子处理,今天参考一些资料好好分析下。 为什么外链css为什么要放头部? 首先整个页面展示给用户会经过html 的解析与渲染过程。 而外链css无论放在h...
2019-12-03 11:03
阅读(117)
CSS实现带箭头的提示框
我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了; 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形;只不过它这个尖角是通过两个三角形来实现的; 首先新建一个div,画出提示框的轮廓 <div clas...
2019-10-14 16:13
阅读(145)
【CSS】CSS特效集锦,视觉魔法的碰撞与融合(一)
前言 在本文中我讲述了7种CSS的特效,它们也许看起来并不惊艳,但是我认为却足够传达本文的理念:编写一些特殊的CSS样式的时候需要不拘于常理,要用特殊的认识角度看待标签和样式属性,从而用「绕个弯」的方式达到效果。 一.浮光掠影 首先我们看第一个实现效果:在鼠标浮动到图片上方时,让一片白影一闪而过。 ...
2019-08-22 09:01
阅读(188)
还在为垂直居中苦恼?CSS 布局利器 flexbox 轻轻松松帮你搞定
传统的 CSS 布局方式是基于盒模型(它是根据盒子与父盒子以及兄弟盒子的关系确定大小和位置的算法),实现时依赖于 block, inline, table, position, float 这些属性,但对于一些特殊布局不易实现,比如垂直居中。 Flexbox Layout 是一种新的布局方式,被称为弹性布局,它使...
2019-08-12 09:39
阅读(226)
你所不知道的 CSS 负值技巧与细节
写本文的起因是,一天在群里有同学说误打误撞下,使用负的 outline-offset 实现了加号。嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢? 使用负值 outline-offset 实现加号 假设我们有这样一个简单的结构: <div></div> div { ...
2019-08-08 10:30
阅读(102)
2019前端面试系列——CSS面试题
盒模型 /* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */ .box { width: 200px; height: 200px; padding: 20px; margin: 20px; background: red; border: 20px solid black; box-...
2019-07-20 14:14
阅读(453)
CSS 二十年发展简史
作者 | 夏之安然 责编 | 伍杏玲 出品 | CSDN(ID:CSDNnews) 在2019年的今天,我们能在网上看到炫酷的动画加载,精彩绝伦的交互效果,以及从 PC 端到移动端的响应式交互,大家觉得习以为常。可你不知道的是,在 20 多年前,网页仅仅提供了文档展示能力,没有装饰的它就像一张黑白报纸...
2019-06-26 14:42
阅读(142)