1.前言 在月初的时候,发了CSS3热身实战–过渡与动画(实现炫酷下拉,手风琴,无缝滚动)。js的代码库也发过两次,两篇文章。之前也写了css3的热身实战,既然热身完了,是时候开始封装css3的代码库了,相比…
分类:css3
CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)
1.前言 在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三个特效,希望这三个特殊能让大家受到启发,利用css…
校招进行时(四)---css基础
恩,小菜鸟又来了,上篇文章在这,话不多说,这次罗列总结一下css基础知识,和我一样的菜鸟可以看看。 引入方式 css的引入方式主要有以下几种: 外部样式表 通过在head标签中加入link标签来引入外部样式表,因为其良好…
总结个人使用过的移动端布局方法
这篇文章,主要是总结一下,我在移动端布局用过的方法。有三种,一种是响应式布局,利用@meida判断各个size;第二种是REM;最后是设置viewport中的width。 响应式布局 这种感觉是最好理解了,利用@medi…
如何使用CSS创建巧妙的动画提示框
原文:https://webdesign.tutsplus.co…原作:Jase Smith翻译:Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时,亦或是当他们在点击了按钮之后需要确认自己没点…
Chromium 新的弹窗机制以及 HTML 的
自 1995 年 JavaScript 诞生之初,就包含了 3 个方法 alert()、confirm() 和 prompt()。在随后的 Chrome 版本中,Chrome 团队一直在修改原生弹窗的表现。 但是这种阻断…
紧贴底部的页脚
前言 在写前端页面时,经常会遇到这种情况:有一个具有块级样式的页脚,当页面内容足够长时它一切正常;有的时候,由于页面长度不够,页面底部的页脚会很尴尬的跑上来;页脚不能像我们期望中那样“紧贴”在视口的最底部,而是紧跟在内容…
把图标转成web字体
对字体大家一定不陌生一般使用Font-family: Georgia, SimSun, “宋体”设置字体。字体主要使用两种:衬线和非衬线,但这不是我们这章的主要内容。这章要说的是如何把自己设计的icon转成font,在网…
CSS display 属性详解
display的所有属性 {/* CSS 1 */ display: none; display: inline; display: block; display: list-item; /* CSS 2.1 */ di…
移动端两端对齐 + 图片宽度自适应
自适应四宫格 有这样一张设计稿,左右两边白色间距为4px,中间间距为10px,每一行的两张图是等宽的(即平分去掉间距后的宽度) 有一种方法是和设计师商量,把所有的具体尺寸改为百分比尺寸。。这个布局不太好写的主要原因是,在…
前端面试题(中)
来自妙味的一套面试题,以下答案来自JS讲师的现场上课记录! 一、选择题 1、分析下段代码输出结果是( B ) var arr = [2,3,4,5,6]; var sum =0; for(var i=1;i < a…
GitBook《拥抱未来的CSS布局方式:flex与grid布局》全教程
GitBook《拥抱未来的CSS布局方式:flex与grid布局》全教程 本书(系列文章)为对CSS中flex布局与grid布局的详细介绍,已在GitHub同步更新,如您在阅读过程中发现描述有误或错别字的情况,您可以向本…