随笔分类 -  CSS

CSS重构：样式表性能调优
摘要：这两天窝在家里又看了本CSS相关的书：《CSS重构：样式表性能调优》。重构是指在不改变代码行为的前提下，重写代码，使其更加简洁、易于复用。 这本书读起来比较快，可挑自己感兴趣的读，前面三章是基础知识的介绍，都了解的话可直接跳过。第四章是为样式分类，我比较感兴趣的是第四章（测试）和第五章（代码的组织和 阅读全文
posted @ 2020-03-23 09:59 咖啡机（K.F.J） 阅读(579) 评论(0) 推荐(2) 编辑
更愉快的书写CSS
摘要：我在写CSS的时候经常会碰到些麻烦事儿： 1）看上去蛮简单的排版却写了很久 2）代码写的越来越散，总是这里补一句，那里补一句，没有条理性 3）margin、padding、font-size等属性在不停的重写 效率提不上去，工期又赶，最后只能加班加点做。 后面仔细想想，其实自己可以做的更有计划性，更 阅读全文
posted @ 2016-12-26 10:23 咖啡机（K.F.J） 阅读(1670) 评论(4) 推荐(12) 编辑
小身材大用途，用PrimusUI驾驭你的页面
摘要：“PrimusUI”是自己在借鉴了如今网上很多开源的UI库，再经过自己整理加工的一个简单代码集合。 每个功能块的CSS代码都很少，力求简单易懂，低门槛，代码可根据自己实际情况轻易修改，改到符合自己场景为止。 一、制作的理由 之所以重复造轮子，有以下几点原因： 1）现今开发很多时候讲究效率，给你很短的 阅读全文
posted @ 2016-05-30 09:30 咖啡机（K.F.J） 阅读(2763) 评论(2) 推荐(10) 编辑
CSS3中惊艳的gradient
摘要：以前曾经记录过linear-gradient（线性渐变）和 radial-gradient（径向渐变）的语法。 可以参考《CSS3中border-radius、box-shadow与gradient那点事儿》 但在实际应用中却不怎么用，主要就是因为自己并没有懂这两个属性的强大之处，再加上自己的想象力 阅读全文
posted @ 2016-05-09 10:31 咖啡机（K.F.J） 阅读(2792) 评论(3) 推荐(12) 编辑
移动开发屏幕适配分析
摘要：我在开发前端的时候曾经会有几个疑惑： 1）拿到的设计搞的宽度是640px或750px的，在页面不同尺寸屏幕布局的时候怎么换算。 2）移动端布局是用%、px、rem、伸缩盒 Flexible Box Layout还是多列Multi-column。 3）用px设置了字体大小，但是在ipad上面显示的却很 阅读全文
posted @ 2016-02-26 09:59 咖啡机（K.F.J） 阅读(3362) 评论(2) 推荐(9) 编辑
CSS3伸缩盒Flexible Box
摘要：这是一种全新的布局，在移动端非常实用，IE对此布局的相关的兼容不是很好，Firefox、Chrome、Safrai等需要加浏览器前缀。 先说说这种布局的特点： 1）移动端由于屏幕宽度都不一样，在布局的时候为了适配，如果用百分比，就得精确计算，而且如果有1px边框，计算会更加复杂难控制 2）如果有多列 阅读全文
posted @ 2016-02-24 11:00 咖啡机（K.F.J） 阅读(1546) 评论(0) 推荐(5) 编辑
前端面试题目搜集
摘要：最近读到一本与前端面试有关的书《前端程序员面试笔试宝典》，里面的内容很多都是高频的面试题，在此推荐给各位网友。 一、理论知识 1.1、前端 MV*框架的意义 早期前端都是比较简单，基本以页面为工作单元，内容以浏览型为主，也偶尔有简单的表单操作，基本不太需要框架。 随着 AJAX 的出现，Web2.0 阅读全文
posted @ 2015-12-01 10:13 咖啡机（K.F.J） 阅读(11991) 评论(31) 推荐(50) 编辑
CSS3中border-radius、box-shadow与gradient那点事儿
摘要：一、border-radiusborder-radius用于添加圆角边框，用处非常广泛。1）一个值，代表了四个角.radius-one { /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 12px; ... 阅读全文
posted @ 2015-09-29 10:19 咖啡机（K.F.J） 阅读(2967) 评论(0) 推荐(1) 编辑
制作在线简历（四）——工作经历
摘要：一、结构倒序显示经历，第一行是时间与公司，第二行是行业，第三行是工作内容，这里也是用了flex布局，图表是用个canvas画布画出来的。下图是大屏幕下的显示方式：移动端的显示如下： 2014/5--2014/9：大... 阅读全文
posted @ 2015-07-02 11:49 咖啡机（K.F.J） 阅读(1313) 评论(0) 推荐(1) 编辑
多种方法实现Loading（加载）动画效果
摘要：当我们ajax提交一个按钮的时候，给那个按钮来个Loading效果会高端很多，体验也会上升个层次。既能让用户知道正在提交中，也能防止二次提交，好处多多呢。上面的这个圈圈是会滚动的。简单点的话，可以直接用GIF动态图片实现。不过现在已经有了CSS3和HTML5了，多了好几种高大上的实现方式。这里先来介... 阅读全文
posted @ 2015-06-08 10:19 咖啡机（K.F.J） 阅读(16423) 评论(10) 推荐(8) 编辑
前端基础学习分享
摘要：用a标签制作一个按钮为主线，然后围绕这个按钮，做一些效果样式等操作。附件中可以下载CSS参考手册。一、工具工欲善其事必先利其器。我们首先需要准备好调试工具，这里我就简单介绍几种，firefox、chrome以及IE。1.firefox我们用到的是firebug，非常好用，工具-》附加组件。这里有一篇... 阅读全文
posted @ 2015-03-30 09:51 咖啡机（K.F.J） 阅读(1438) 评论(0) 推荐(5) 编辑
用CSS制作带图标的按钮
摘要：先上一张效果图这是一个搜索按钮，带了一个搜索的小图标。写的CSS在IE6和IE7中的兼容性不是很好。四边的圆角使用了CSS3的属性。一、小图标用字体制作上面的搜索图标，我是通过网站icomoon，在线生成的，这个网站在国外，国内访问比较慢，用代理或FQ工具上去会比较快。网站如下图：做好一系列选择后，... 阅读全文
posted @ 2014-11-19 09:22 咖啡机（K.F.J） 阅读(6787) 评论(3) 推荐(2) 编辑
CSS选择器的一些记录
摘要：选择器例子例子描述CSS.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname" 的所有元素。1**选择所有元素。2elementp选择所有 元素。1element,elementdiv,p选择所有 元素和所有 元素。... 阅读全文
posted @ 2014-07-20 12:23 咖啡机（K.F.J） 阅读(684) 评论(1) 推荐(0) 编辑
CSS字体记录
摘要：在西方国家的字母体系，分成两大字族：serif 及 sans serif。其中 typewriter 打字机字体，虽然也是 sans serif，但由于他是等距字，所以另独立出一个 Typewriter 字族出来。serif 的意思是，在字的笔画开始及结束的地方有额外的装饰，而且笔画的粗细会因... 阅读全文
posted @ 2014-06-21 16:31 咖啡机（K.F.J） 阅读(1191) 评论(1) 推荐(5) 编辑
关于table的一些记录
摘要：HTML有10个表格相关标签表格的大标题，该标记可以出现在 之间的任意位置。它对于搜索引擎的机器人记录信息十分重要。参数有align、valign表格的列定义属性定义表格列的分组，Firefox、Chrome 以及Safari 仅支持colgroup 元素的span 和width 属性定义表格定义表... 阅读全文
posted @ 2014-06-15 11:53 咖啡机（K.F.J） 阅读(1105) 评论(0) 推荐(2) 编辑
IE里面的一些BUG记录
摘要：网上已经有很多类似的记录了，这里写这个是给自己在项目中碰到的问题做个简单的记录，以后将持续更新1.IE67 border-bottom失效 一个a标签，想要使用移上去后会在下面显示一个横条，我用border-bottom做了一个效果，IE6 7必须加了line-height后才能显示，应该是因为没... 阅读全文
posted @ 2014-06-08 16:25 咖啡机（K.F.J） 阅读(663) 评论(0) 推荐(1) 编辑