纯CSS表头固定

2018-11-08
阅读 15 分钟
820
纯CSS实现表头固定之所以难,主要在两点。一是占有最大市场份额的IE6不支持position:fixed。另一个,是人们想破头都想在一起表格中实现这种效果。不过外国真的人用纯CSS实现了这种效果,动用了数量惊人的CSS hacks……我觉得,如果搞到代码如此难懂且难扩展,还不如用javascript好了。碰巧今天我也遇到这种需求,换个视角...

纯CSS实现柱形图

2018-11-08
阅读 11 分钟
496
解释一下,ul里面的每一个li就代表我们要统计的内容,span为柱身,em为统计项的名字,strong为统计数值。我们可以添加一些背景颜色来区分他们。

CSS多级菜单

2018-11-07
阅读 4 分钟
529
这是一个相当炫的功能,让网页看起来像桌面程序,如window的开始菜单。实现原理基本和纯CSS相册差不多,但要注意的事项比较多,让我们一步步来吧。

CSS未知高度垂直居中

2018-11-07
阅读 5 分钟
873
好了,我们看其CSS实现。凡是table能做到的,CSS都能做的,但各浏览器在CSS的差异比较大,因此要兼容它们难度很大。这涉及许多细节,各种流啊,display的表现效果与CSS hack,IE早些年搞了大堆的私有属性,这也有待我们深一步挖掘。我们先看最简单的实现,背景图片法

css文本两端对齐

2018-11-07
阅读 2 分钟
654
在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地。这样我们就要用到 text-align, text-justify样式了。

前端图片预览,上传前预览【兼容IE7、8、9、10、11,Firefox,Chrome】

2018-11-03
阅读 4 分钟
942
在现在的Web开发中不可避免的会做一个图片预览的功能,比如在上传图片的情况下,一个很简单的办法就是讲图片上传至服务器之后,再将文件的URL返回回来,然后异步通过这个URL加载刚刚上传的图片,实现图片的预览,很明显的在这个过程中两次Web请求,一次发送文件,一次下载文件,到最后这个文件如果在客户端被删除(取消...

CSS 居中【整合】

2018-11-03
阅读 4 分钟
434
{代码...} text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 {代码...} 垂直居中 inline 文字,inline 元素,配合 display:table ,display:table-cell,有奇效。 {代码...} 与 height 联手,垂直居中文字 {代码...} 示例: {代码...} hacks, hacks(小技巧) 有许多 hacks,负 margin,影子元素 ::be...

几个非常实用的JQuery代码片段

2018-11-03
阅读 3 分钟
1.5k
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的...

CSS基础:block,inline和inline-block

2018-11-02
阅读 2 分钟
1.1k
css的display属性是前端开发中非常常见的属性,本文简单介绍下其中比较常用的属性值,即block、inline和inline-block。

纯 CSS 实现多行文字截断

2018-11-01
阅读 4 分钟
5.3k
看似十分简单的标题截断效果,但是竟然没有一个统一 CSS 属性实现标准,需要用到一些奇淫妙计来实现,一般来说,在做这样文字截断效果时我们更多是希望:

CSS3 创建简单的网页动画 – 实现弹跳球动

2018-10-29
阅读 2 分钟
579
基础准备对于这个实现,我们需要一个简单的 div ,并且样式类名为 ball : HTML 代码: {代码...} 我们将使用 Flexbox 布局,把球放到页面中间,尺寸为 100px * 100px,背景色为橘黄色。 CSS 代码: {代码...} 创建 Keyframe(关键帧)Keyframe(关键帧) 用于 CSS 动画,以便我们完全控制动画。创建 Keyframe(关键帧) 的样式...

你可能不知道的14个JavaScript调试技巧

2018-10-29
阅读 6 分钟
2.5k
了解你的工具可以在完成任务的过程中发挥重大作用。尽管传言 JavaScript 难以调试,但是如果你掌握了一些调试技巧,那么你将会花费更少的时间来解决这些错误。

CSS变量实用指南及注意事项

2018-10-29
阅读 9 分钟
523
近年来,一些动态特性已经开始成为 CSS 语言本身的一部分。 CSS变量 – 官方的术语为 “自定义属性” – 已经已经加入规范并且具有很好的浏览器支持,而 CSS mixins 目前正在开发中 。

炫酷 CSS 背景效果的 10 个代码片段

2018-10-28
阅读 2 分钟
1.5k
在现代网页设计中,大背景图设计非常流行。随着高清(现在是4K)显示器的出现,越来越多的网页设计师使用大背景图来填充屏幕。 因为这样可以造成很大的视觉冲击力,并有助于更好的传递所要表现的内容。 但是,如果只是吧大背景简单的放在网页上效果有限。使用 CSS,偶尔结合 JavaScript ,可以创造出一些惊人的特效。 CS...

Web性能优化,大致可以分为以下几点

2018-10-27
阅读 5 分钟
1.2k
我们都知道对于Web应用来说性能很重要。然而性能优化相关的知识却非常的庞大并且杂乱。对于性能优化需要做些什么以及性能瓶颈是什么,通常我们并不清楚。

高大上的微信小程序中渲染html内容—技术分享

2018-10-24
阅读 7 分钟
680
大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题。但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢?

前后端分离后的前端时代

2018-10-23
阅读 6 分钟
1.7k
什么是前后端分离,要区分前端和后端,需要有个明确的界限。一般,用户可以直接看到的东西,都是属于前端的范畴,除了前端之外都属于后端了。 在传统的像ASP,JSP和PHP等开发模式中,前端是处在一个混沌的状态中,可以说是没有独立的“人格”可言。 前端负责切图和编写静态页面模板,后端将数据渲染到前端提供的页面模板中...