手把手带你了解Javascript中变量和词法环境_WEB前端开发
本文其实也并非完全基础,还是建立在对Javascript有一定了解之上的,至少对对象要有一定的认知。
开始吧。
在开发页面的时候,遇到很多的列表都需要用到箭头,可以直接用图片作背景铺垫,纯CSS也能实现,并且没有兼容性顾虑,不用CSS3,相比而言,比图片更好用。
原理:一个高宽相等的正方形,选取你所需要的某一边,截取之,就是一个梯形,当高宽都为0,且其他边为透明颜色时,一个三角形就出来了
梯形代码:
html: <div class="arrow"></div> css: arrow{ width:10px; height:10px; border:10px solid #000; border-left-color:orange; }
把高宽设为0,其他边为透明颜色,三角形出来了:
html: <div class="arrow"></div> css: arrow{ width:0; height:0; border: 10px solid transparent; border-left-color: orange;//左箭头 }
在开发中,可以利用伪类,定位实现,不改变dom结构,简洁优雅。
content提供给三角形的位置,这个属性不能少。
学习JavaScript之手机振动API_WEB前端开发
现代浏览器里提供的新的API越来越倾向于移动手机应用,而不是传统的桌面应用,比如JavaScript地理位置信息API,本人介绍API的使用情况。
html: <div class="arrow">文字文字</div> css: div{ position:relative; arrow{ width:0; height:0; border: 10px solid transparent; border-left-color: orange; position:absolute; content:''; }
现在追求平面化设计,还有另一种三角线箭头,更受欢迎。
设置两个伪类,前一个伪类覆盖至另一个了伪类,留出一些线出来就好:
html: <div class="arrow">文字文字</div> CSS: div { position: relative; } .arrow:after,.arrow:before { width: 0; height: 0; border: 10px solid transparent; border-left-color: orange; position: absolute; content: ""; } .arrow:before{ top: 0; left: 70px;//根据实际情况调整 border-left-color: white; }
may you like it.
感谢大家的阅读,希望大家收益多多。
本文转自:https://blog.csdn.net/qq_34250472/article/details/55513862
推荐教程:《CSS教程》
以上就是带你玩转css中各种方向小箭头的详细内容,更多请关注ki4网其它相关文章!
javascript 从定义到执行,需要知道的事_WEB前端开发
javascript从定义到执行,JS引擎在实现层做了很多初始化工作,我们需要引入几个相关的概念,这篇文章的目的不是孤立的为你讲解每一个概念, 而是通过一个简单的demo来展开分析,全局讲解JS引擎从定义到执行的每一个细节。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)