css
fg_411
菜鸟码农
展开
-
css实现弯曲箭头
前些天写项目,设计图里有弯曲的箭头,当时由于时间紧迫,使用的是图片,现在闲下来,自己再画一个,如下: 实现完全箭头分两部分: 在div内实现直角三角形,旋转调整角度(也可在整理完成再旋转) 使用伪元素实现弯曲部分效果,进行旋转 以上知识点基本都是围绕border属性 <div class="curvedArrowUp"></div> <div class="curvedArrowDw"></div> 最简单的直角三角形: .curvedArrowUp原创 2020-09-08 18:53:13 · 2853 阅读 · 0 评论 -
整理一些常见的页面布局
昨天看博客时无意间发现 圣杯布局 和 双飞翼布局 ,知(gu)识(lou)渊(gua)博(wen)的我赶紧学习一下 圣杯布局 和 双飞翼布局 是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。 圣杯布局是为了讨论「三栏液态布局」的实现,最早的完美实现是由 Matthew Levine 在 2006 年写的一篇文章 《In Search...原创 2020-03-24 15:35:13 · 214 阅读 · 0 评论 -
备忘录(CSS)
<div style="width:150px;"> <p style="word-break: break-all">防止内容变多时文字超过div的范围</p> </div>原创 2017-07-10 14:28:22 · 210 阅读 · 0 评论 -
css 绘制 简单几何图形
一直对css不在行,今天面试有道题要求用 css 写正三角形,回来之后搜了一下样式发现几个有意思的,就选了几个贴上来,想看更多请 点击这里 //正方形 #square { width: 100px; height: 100px; background: blue; } //圆形 #circle { width: 100px; height: 100px; background: ...转载 2018-03-24 17:01:54 · 585 阅读 · 0 评论 -
认识flex属性
1、介绍 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。 flex(flexible box:弹性布局盒模型)。在webkit内核的浏览器中使用时,必须加上 -webkit-前缀。 使用...原创 2018-11-02 22:46:51 · 147 阅读 · 0 评论