CSS
文章平均质量分 84
Creabine
时无重至,华不再扬
展开
-
5分钟彻底搞懂Border画多边形原理
在网上看到大神用border属性来讲div变成三角形,梯形等等各种形状。也详细解释了原理,我看了半天也弄懂了。接下来这篇我希望能用5分钟让前端小白们毫无压力的彻底理解这个原理,这样以后要用的时候也不懂百度了,画个草图直接开写。第一步:理解盒子模型中的border先看图: 这里,我分别标出了4个边框border-top //redborder-left //greenborder-ri原创 2016-07-01 18:22:10 · 5136 阅读 · 0 评论 -
CSS3的函数和事件
很久没写过关于css的博客了,今天来记录一下最近遇到的几个新东西。参考资料:css参考手册Css3函数 之前只知道sass,less这种预处理器有函数,突然发现css3也吸收了他们的想法,搞了自己的函数。目前css的函数有两个:calc/togglecalc calc就是calculate的缩写,运算。支持 “+”, “-“, “*”, “/” 运算,...原创 2018-07-09 11:11:34 · 6213 阅读 · 0 评论 -
前端加载自定义字体及速度优化
今天是2.14情人节,也是另一个重要的日子,那就是我的第一个全栈项目上线啦~~~www.daren.com这个是公司的官网,采用Python+Django做后端,前端也用了gulp自动化工作流,使用了前后端分离的开发方式,从年前弄到现在,虽然之后肯定还会有小的迭代和修改,一些轮播等效果还暂时处于display:none的状态,但是终于可以算是第一版上线了!能适配主流浏览器的PC端和移动端,在做官网的原创 2017-02-14 15:09:56 · 16761 阅读 · 7 评论 -
innerHTML和innerText造成的乱码现象 以及 background-image放入.css中失效
在使用innerHTML或者innerText的时候,替换内容为中文的时候,替换接锅在网页中显示乱码。这是因为html文件的编码格式为UTF-8而js文件不是。这种情况,只要使用记事本打开js文件,并且另存为UTF-8编码格式的文件,即可正常使用。原创 2016-01-22 23:26:02 · 5000 阅读 · 1 评论 -
SASS&Compass语法学习
之前已经了解了sass和compass,但是都只看了皮毛,今天要深入看看他们的用法,在以后的项目中使用起来。Sass的使用来源:SASS中文网变量Sass使用 : $color: #666; 的方式定义变量变量名可以用中划线和下划线进行分隔,并且互相兼容,即 $link-color 和 $link_color 一样并且可以混用。但是中划线更为普遍,compass也使用中划线。嵌套CSS原创 2016-08-23 17:44:41 · 637 阅读 · 0 评论 -
Flex布局学习笔记
公司准备重做官网,听到这个消息很开心,这是我锻炼的好机会,希望能够独自完成整个官网的前后端,所以有很多东西要补。首先就是官网页面的响应式布局,不想使用框架,希望能自己写,这就需要flex布局的知识,配合sass来实现。之后还要继续看node.js,目前计划用express搭建公司官网的后台,这样就能一个人独立完成整个网站了。这周搞定flex和sass进阶,之前看了部分sass,都只是简单的用法,还需原创 2016-08-22 17:52:02 · 494 阅读 · 0 评论 -
100个前端小知识点
这里记录遇到的各种零散的问题1.jQuery使用 $(元素).change() 可以主动触发onchange事件,但是仅仅是用于该事件仅适用于文本域(text field),以及 textarea 和 select 元素。2.div如何在另一个div里边居中: style=”position:fixed;;margin:auto;left:0; right:0; top:0; b原创 2016-04-10 18:12:07 · 1162 阅读 · 1 评论 -
纯CSS&Canvas画哆啦A梦
前段时间看到有人呢用纯CSS画大白,当时觉得很神奇。最近有空了解了一下,其实就是简单的div加上border-radius,transform,把div变成所需的各种形状再定位拼接,其实没有什么高深的技术。但是还是试着做了个小demo,大家都画大白,我就画个别的,最后选了哆啦A梦。最后的结论是,这种方式可以画一些简单的图,但是基本上没什么意义,也就是闲的蛋疼作为练习,熟悉一下定位和css属性。刚好前原创 2016-07-05 16:15:13 · 2805 阅读 · 0 评论 -
Sass&Compass快速入门总结
什么是Sass?Sass是CSS预处理器的一种,其他还有less,stylus。他们的作用相同,但是语法,功能上略有差异,经过了解。我发现less相对来说更易上手,但我还是选择了功能更为强大,语法种类更多的sass。 Sass在早期使用缩进,无法兼容已有的CSS代码,同时这种缩进风格也跟CSS的默认习惯不同,所以虽然sass出现的早,却没有less普及。 后来推出了SCSS。其实他还是Sass,原创 2016-06-22 11:26:49 · 3079 阅读 · 0 评论 -
div+css学习笔记
div+css 的讲解◆div+css的介绍 div是用于存放html 元素,文字,图片,视频等的元素。 css是层叠样式表,用于去指定div中的内容的样式◆div+css的快速体验案例test1.html1235123512351235原创 2015-12-02 02:20:19 · 653 阅读 · 0 评论 -
【HTML第一本】Head First HTML with CSS & XHTML读书笔记
2015.12.6日开始看这本书,学完了韩顺平老师的视频之后准备再通过书本梳理一下知识,然后完成一些小网页的制作。下面是看书的过程中觉得值得记下来的东西,有些事新的理解,有些事韩老师的视频中没有讲到的:1.制作项目时要进行 组织网站, 把文件,图片按照分类在文件夹中放好,便于管理。并且以后进行网页升级的时候,会多出许多文件,尽早归类放好,以后就不用改href里边的链接了。原创 2015-12-06 20:59:51 · 2405 阅读 · 0 评论 -
【HTML第二本】HTML.5与CSS.3权威指南 CSS3部分读书笔记
本书从第十二章P205开始讲CSS3的部分,由于笔记较多,所以分开记。1.CSS3中,摒弃了class属性,提倡使用选择器来将样式与元素直接绑定起来。与正则表达式结合起来了。2.属性选择器:CSS3中有属性选择器,并在其中加入了通配符的概念,引入正则表达式。1)[att=val]{}属性选择器:若元素的att属性的值为val所指定的字符,则使用该选择器指定的样式原创 2015-12-27 14:36:39 · 1252 阅读 · 0 评论 -
css3替代JavaScript实现hover变色功能
在项目中遇到了hover变色的功能,一开始我使用事件onmouseover和onmouseout来监听是否hover,然后用JavaScript函数进行变色,如下://当鼠标移入时圆角矩形变色。 function change_rounded_1(val){ if(val=="mfsy"){ mfsy.style.backgroundColor="#F0EA00"; }else原创 2016-01-22 23:42:39 · 2515 阅读 · 0 评论 -
CSS3中的动画,animation、transition和transform属性的运用
CSS3中使用animation属性,可以不适用JavaScript而制作动画,运用的好,可以做到很多漂亮的效果,最近有空,来摸索一下animation的使用,做几个demo玩玩animation属性的介绍animation属性能够改变元素的位置和各种css属性animation 属性是一个简写属性,用于设置六个动画属性:animation-name 需要绑定到选择器的keyframe的原创 2016-05-06 16:31:46 · 4171 阅读 · 0 评论 -
CSS小技巧
最近写了点官网前台,久违的用了很多css,有些新的小知识积累,记在这里。display:inline-block相关 做轮播的时候不想用float,用了display:inline-block来布局,但是会遇到一些小问题:元素之间会有额外的间隙。此时使用font-size: 0;letter-spacing: 0;来消除间隙。在safari下使用,会出现水平对不齐...原创 2018-08-14 11:19:47 · 302 阅读 · 0 评论