为你推荐

css3 过渡和动画

1.过渡的定义和使用在没有过渡属性的时候,当一个元素的属性值发生变化时,浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0,动态修改成top:100px,这个元素就瞬间跑到100px的位置,有时候我们为了达到某种视觉效果,希望它以动画的形式在一定的时间内,从旧的样式转变成新的样式,而这个过程就是...
代码星球·2020-12-24

Web前端开发规范手册

 文件名称统一用小写的英文字母、数字和下划线的组合。a. html的命名原则引文件统一使用index.htm index.html  index.asp文件名(小写)各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如:关于我们aboutus信息反馈feed...

h5中的结构元素介绍

结构元素不具有任何样式,只是使页面元素的的语义更加明确。 header元素header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题,也可以包含网站Logo图片、搜索表单或者其他相关内容。<header...

html刮刮卡效果实现

公司国庆搞了个集卡、抽奖小活动。抽奖需要刮刮卡的效果,感觉 css 是实现不了。看我使用canvas如何实现刮刮卡效果。废话不多说,线上效果 jsrun-测试地址 、 lilnong.top-测试地址 clearRect 这是我第一个找到的API,作...
代码星球·2020-12-24

Web 设计的CSS 工具有哪些?

当涉及到简化 css 设计和开发相关的工作时,工具总能创造奇迹。值得指出的是,绝大多数的网页设计者和开发人员对不同的 css 工具都感到兴奋,这些工具能帮助他们更快的制作功能完善又十分完美的网站和网页应用。下面给大家介绍几个CSS工具,它们将通过最大限度的发挥CSS的功能来帮助你...

整理经常在H5移动端开发遇到的知识

viewport、强制浏览器全屏、IOS的WebAPP模式、可点击元素出现阴影(这个我觉得真没必要去掉,用户点击是需要反馈的,而这个背景色刚刚好提供了一种反馈)等等,太多啦,这些相信大家百度一下就可以查到很多资料本篇文章主要是讲一些其他的或者优化手段。内容不多 1.弹出数字键盘<!--有"#""*"符号...

Less参数混合

Mixins具有多个参数* 参数可以使用逗号或分号分隔。(建议使用分号,因为逗号具有双重含义:可以将其解释为mixin参数分隔符或者是css列表分隔符);使用逗号作为mixin分隔符使不可能创建逗号分隔的列表作为参数。参数mixin使用一个或多个参数,通过参数和它的属性来扩展Less的功能,以达到在混合到另一...
代码星球·2020-12-24

你应该知道的简单易用的CSS技巧

作为前端,在工作中难免会遇到关于排版的问题,以下是我整理的一些关于css的技巧,希望对你能有帮助。 1、每个单词的首字母大写一般我们会用js实现,其实css就可以实现。js代码:varstr='helloworld';str.replace(/(|^)[a-z]/g,(L)=>L.toUpperCase...

深入理解link和@import到底有什么区别?

在真正的前端开发中,我们很少去写行内样式和内嵌样式,通常都是去引用外部样式。而在我们学习之初的外部样式表都是用link引入的,但是当后来我们学习的逐渐深入,发现@import也可以引入样式。那么同样是引入外部样式,这两者有什么区别呢,下面请跟随我来详细了解一下link和@import的区别吧!  &...

META标签的设置

定义及用法⑴<meta>元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。⑵<meta>标签位于文档的头部,不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。⑶元数据(metadata)是关于数据的信息。元数...
代码星球·2020-12-24

一个完整URL的组成

一、什么是URL/URN/URIURI=URL+URNURI:统一资源标识符URL:统一资源定位符URN:统一资源名称 二、传输协议用来传输客户端和服务器端交互的信息的(类似于快递小哥)HTTP(顺丰):超文本传输协议(除了传递普通的文本,还可以传递文件流或者进制编码等信息),是目前最常用的WEB传输协议HT...
代码星球·2020-12-24

前端webp图片

webp是目前Web比较流行的解决方案,相对于Jpeg/png,基于VP8的压缩,有着非常不错的压缩率。<pliga'1,=""'onum'=""'kern'=""1;=""color:=""rgb(58,=""65,=""69);=""font-family:=""tahoma,="""helvetica=""...
代码星球·2020-12-24

CSS的BEM规范学习

/*常规写法和BEM写法相同*/.list 块中的子元素是块的子元素,并且子元素的子元素在bem里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。如上面的例子,li.item是列表的一个子元素/*常规写法*/.list{}.list.item{}/*BEM写法*/.list{}.lis...
代码星球·2020-12-24

CSS画心形和蛋形

使用transform-origin属性实现设置不同的点为原点1、改变元素基点transform-origin(transform-origin是变形原点,原点就是元素绕着旋转或变形的点)注意:该属性只有在设置了transform属性的时候才起作用;如果在不设置的情况下,元素的基点默认的是其中心位置。即,在没有使用tr...
代码星球·2020-12-24

Web前端开发需要掌握了解的工具、技术

Web的发展日新月异,这也使得Web开发者不得不加快脚步,学习新的技术和编程语言。尤其是对于那些大量流量入口的网站来说,跟上技术发展趋势更是尤为重要。为了使得Web开发人员能够更加专注于业务层面的开发,市场上涌现了各种各样的Web开发工具,灵活运用这些工具就能使得你的开发效率大幅提升,实现事半功倍。 1.We...